Sidebar

Componente de layout com barra lateral colapsável e área de conteúdo principal.

Uso

<script setup lang="ts">
import { Sidebar } from '@halfbyte/maka'
import { ref } from 'vue'

const aberta = ref(true)
</script>

<template>
  <Sidebar v-model="aberta" style="height: 500px">
    <template #sidebar>
      <nav style="padding: 16px">
        <p><strong>Navegação</strong></p>
        <ul style="list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:4px">
          <li><a href="#">Dashboard</a></li>
          <li><a href="#">Configurações</a></li>
          <li><a href="#">Perfil</a></li>
        </ul>
      </nav>
    </template>

    <div style="padding: 24px">
      <h2>Conteúdo principal</h2>
      <p>A sidebar aparece ao lado esquerdo.</p>
    </div>
  </Sidebar>
</template>

Lado direito

<Sidebar v-model="aberta" side="right" style="height: 400px">
  <template #sidebar>
    <div style="padding:16px">Sidebar direita</div>
  </template>
  <div style="padding:16px">Conteúdo</div>
</Sidebar>

Props

Prop	Tipo	Padrão
modelValue	boolean	true
side	"left" | "right"	"left"
width	string	"260px"
collapsible	boolean	true

Slots

Slot	Descrição
sidebar	Conteúdo da barra lateral
default	Conteúdo principal (área ao lado da sidebar)

Events

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao abrir/fechar a sidebar