Docs›Componentes (Admin)›mad-sidebar-nav
Componentes (Admin)

mad-sidebar-nav

Sidebar rail + painéis (estilo VSCode/Outlook).

Navegacao lateral em formato "rail" (trilho de icones) + paineis expansiveis. Padrao usado em layouts tipo VSCode/Outlook: coluna estreita de botoes-icone a esquerda, painel de conteudo aparece ao lado quando um botao e ativado.

O estado do painel ativo e mantido client-side via Alpine (activePanel). Botoes sem name nao controlam painel — sao acoes puras (combinar com mad:click ou navigate).

Estrutura obrigatoria

<mad-sidebar-nav default="folders">
    <mad-sidebar-nav-rail>
        <mad-sidebar-nav-btn name="folders" icon="folder" title="Pastas" />
        <mad-sidebar-nav-btn name="tags" icon="tag" title="Tags" />
        <mad-sidebar-nav-separator />
        <mad-sidebar-nav-btn icon="star" title="Favoritos" mad:click="onFavoritos" />
    </mad-sidebar-nav-rail>

    <mad-sidebar-nav-panel name="folders">
        Conteudo do painel de pastas
    </mad-sidebar-nav-panel>

    <mad-sidebar-nav-panel name="tags">
        Conteudo do painel de tags
    </mad-sidebar-nav-panel>
</mad-sidebar-nav>

CRITICO: os botoes que abrem painel precisam ter name igual ao name do <mad-sidebar-nav-panel> correspondente. Botoes sem name nao alteram activePanel — servem apenas como atalho/acao.

Props do <mad-sidebar-nav>

Prop Tipo Default Descricao
default string '' Nome do painel ativo inicial. Vazio = nenhum painel aberto
action string '' Reservado (passa adiante para o consumidor)
class string '' Classes CSS extras
style string '' Estilos inline

Props do <mad-sidebar-nav-rail>

Prop Tipo Default Descricao
class string '' Classes CSS extras

Container vertical fixo (trilho) que agrupa os botoes e separadores. Conteudo livre.

Props do <mad-sidebar-nav-btn>

Prop Tipo Default Descricao
name string '' Nome do painel que este botao controla. Vazio = botao de acao pura
icon string '' Icone Lucide (obrigatorio na pratica)
title string '' Tooltip nativo (atributo title)
class string '' Classes CSS extras
attrs string '' Atributos HTML extras (mad:click, navigate, data-*)

Comportamento: quando name esta presente, clicar alterna activePanel entre name e '' (toggle). Quando name esta vazio, o botao nao mexe no estado do painel — combine com mad:click="metodo" ou navigate="Classe" via attrs.

Props do <mad-sidebar-nav-panel>

Prop Tipo Default Descricao
name string '' Identificador do painel (deve bater com o name do botao)
class string '' Classes CSS extras
style string '' Estilos inline

Renderizado com x-show="activePanel === '{name}'" + x-cloak. Conteudo livre — pode conter <mad-tree-view>, lista de tags, filtros, etc.

<mad-sidebar-nav-separator />

Divisor visual entre grupos de botoes no rail. Sem props.

Botoes de acao (sem painel)

Botoes sem name nao alternam painel. Use para atalhos que mudam visualizacao via servidor:

<mad-sidebar-nav-rail>
    <mad-sidebar-nav-btn name="folders" icon="folder" title="Pastas" />
    <mad-sidebar-nav-separator />
    <mad-sidebar-nav-btn icon="star" title="Favoritos" mad:click="onViewMode('favorites')" />
    <mad-sidebar-nav-btn icon="clock" title="Recentes" mad:click="onViewMode('recents')" />
    <mad-sidebar-nav-btn icon="trash-2" title="Lixeira" mad:click="onViewMode('trash')" />
</mad-sidebar-nav-rail>

Exemplo completo (lista de documentos GED)

<div style="display:flex;gap:0;">
    <mad-sidebar-nav :default="$sidebarPanel">
        <mad-sidebar-nav-rail>
            <mad-sidebar-nav-btn name="folders" icon="folder" :title="__('ged.folders')" />
            <mad-sidebar-nav-btn icon="star" :title="__('ged.favorites')" mad:click="onViewMode('favorites')" />
            <mad-sidebar-nav-btn icon="clock" :title="__('ged.recents')" mad:click="onViewMode('recents')" />
            <mad-sidebar-nav-btn icon="share-2" :title="__('ged.shared')" mad:click="onViewMode('shared')" />
            <mad-sidebar-nav-btn icon="archive" :title="__('ged.archive')" mad:click="onViewMode('archived')" />
            <mad-sidebar-nav-btn icon="trash-2" :title="__('ged.trash')" mad:click="onViewMode('trash')" />
            <mad-sidebar-nav-separator />
            <mad-sidebar-nav-btn name="tags" icon="tag" :title="__('ged.tags')" />
        </mad-sidebar-nav-rail>

        <mad-sidebar-nav-panel name="folders">
            <mad-tree-view name="pastas" model="GedFolder" display="name"
                parent-field="parent_id" icon="folder" mad:click="onSelectFolder" />
        </mad-sidebar-nav-panel>

        <mad-sidebar-nav-panel name="tags">
            @foreach($allTags as $tag)
                <mad-btn variant="ghost" size="sm" mad:click="onSelectTag({{ $tag->id }})">
                    {{ $tag->name }}
                </mad-btn>
            @endforeach
        </mad-sidebar-nav-panel>
    </mad-sidebar-nav>

    <div style="flex:1;padding:16px;">
        {{-- conteudo principal (grid de documentos, etc) --}}
    </div>
</div>

NUNCA fazer

{{-- ERRADO: <mad-sidebar-nav-btn> fora do <mad-sidebar-nav-rail> — quebra o agrupamento visual --}}
<mad-sidebar-nav>
    <mad-sidebar-nav-btn name="a" icon="folder" />
    <mad-sidebar-nav-panel name="a">...</mad-sidebar-nav-panel>
</mad-sidebar-nav>

{{-- CERTO: botoes sempre dentro do rail --}}
<mad-sidebar-nav>
    <mad-sidebar-nav-rail>
        <mad-sidebar-nav-btn name="a" icon="folder" />
    </mad-sidebar-nav-rail>
    <mad-sidebar-nav-panel name="a">...</mad-sidebar-nav-panel>
</mad-sidebar-nav>

{{-- ERRADO: name do botao nao bate com name do panel --}}
<mad-sidebar-nav-btn name="folders" icon="folder" />
<mad-sidebar-nav-panel name="pastas">...</mad-sidebar-nav-panel>

{{-- CERTO: names identicos --}}
<mad-sidebar-nav-btn name="folders" icon="folder" />
<mad-sidebar-nav-panel name="folders">...</mad-sidebar-nav-panel>

{{-- ERRADO: usar name num botao que so deveria disparar acao --}}
<mad-sidebar-nav-btn name="trash" icon="trash-2" mad:click="onViewMode('trash')" />
{{-- isso tenta abrir um painel "trash" inexistente alem de chamar a acao --}}

{{-- CERTO: sem name = botao de acao pura --}}
<mad-sidebar-nav-btn icon="trash-2" title="Lixeira" mad:click="onViewMode('trash')" />

{{-- ERRADO: montar rail manualmente com div + botao --}}
<div class="sidebar">
    <button onclick="show('folders')"><i data-lucide="folder"></i></button>
</div>

{{-- CERTO --}}
<mad-sidebar-nav>
    <mad-sidebar-nav-rail>
        <mad-sidebar-nav-btn name="folders" icon="folder" />
    </mad-sidebar-nav-rail>
    <mad-sidebar-nav-panel name="folders">...</mad-sidebar-nav-panel>
</mad-sidebar-nav>