MAD Lab

Navegação e overlays

mad-page-container mad-page-header mad-sidebar-nav mad-separator mad-empty-state

Componentes de casca

mad-page-container/mad-page-header e mad-sidebar-nav foram pensados para SER a raiz/estrutura da página — esta própria página do Tutor já está dentro de um <mad-page-container> real. Por isso os exemplos abaixo aparecem em MINIATURA, contidos num card de altura fixa, e nunca como um segundo "shell" por cima do shell real do Tutor.

Estrutura da página

mad-page-container + mad-page-header (título/ícone/breadcrumb/ações) + mad-page-content.

Conteúdo da página (grid, cards, forms...) entra aqui dentro — <mad-page-content> é a área abaixo do cabeçalho.

resources/views/tutor/examples/navegacao-pagina/estrutura-pagina.blade.php

<div style="max-height:340px;overflow:auto;border:1px solid var(--mad-border);border-radius:10px;">
    <mad-page-container style="min-height:0;">
        <mad-page-header title="Pedidos" icon="shopping-cart" breadcrumb="Vendas &gt; Pedidos">
            <actions>
                <mad-btn variant="primary" icon="plus" size="sm">Novo</mad-btn>
            </actions>
        </mad-page-header>

        <mad-page-content>
            <p style="padding:16px;color:var(--mad-text-muted);">
                Conteúdo da página (grid, cards, forms...) entra aqui dentro —
                <code>&lt;mad-page-content&gt;</code> é a área abaixo do cabeçalho.
            </p>
        </mad-page-content>
    </mad-page-container>
</div>

Sidebar-nav (rail + painéis)

mad-sidebar-nav com rail de ícones e painéis alternáveis, estilo VSCode/Outlook.

resources/views/tutor/examples/navegacao-pagina/sidebar-nav.blade.php

<div style="height:240px;border:1px solid var(--mad-border);border-radius:10px;overflow:hidden;">
    <mad-sidebar-nav default="pastas" style="height:100%;">
        <mad-sidebar-nav-rail>
            <mad-sidebar-nav-btn name="pastas" 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="onFavoritosDemo" />
        </mad-sidebar-nav-rail>

        <mad-sidebar-nav-panel name="pastas">
            <p style="font-size:13px;color:var(--mad-text-muted);padding:4px;">Conteúdo do painel de pastas.</p>
        </mad-sidebar-nav-panel>
        <mad-sidebar-nav-panel name="tags">
            <p style="font-size:13px;color:var(--mad-text-muted);padding:4px;">Conteúdo do painel de tags.</p>
        </mad-sidebar-nav-panel>
    </mad-sidebar-nav>
</div>

app/control/Tutor/TutorNavegacaoPagina.php

public function onFavoritosDemo(): MadResponse
{
    return (new MadResponse())
        ->toast('Ação de exemplo — normalmente filtraria a lista pelos favoritos.', 'info');
}

Separador

mad-separator simples e com label.

Acima do separador

Entre os dois

Abaixo do separador rotulado

resources/views/tutor/examples/navegacao-pagina/separador.blade.php

<div style="padding:16px;border:1px solid var(--mad-border);border-radius:10px;">
    <p style="margin:0 0 12px;font-size:13px;color:var(--mad-text-muted);">Acima do separador</p>
    <mad-separator />
    <p style="margin:12px 0;font-size:13px;color:var(--mad-text-muted);">Entre os dois</p>
    <mad-separator label="ou" />
    <p style="margin:12px 0 0;font-size:13px;color:var(--mad-text-muted);">Abaixo do separador rotulado</p>
</div>

Estado vazio

mad-empty-state para listas sem resultado, com ação de recuperação.

Nenhum pedido encontrado

Ajuste os filtros ou cadastre o primeiro pedido.

resources/views/tutor/examples/navegacao-pagina/estado-vazio.blade.php

<div style="border:1px solid var(--mad-border);border-radius:10px;">
    <mad-empty-state icon="inbox" title="Nenhum pedido encontrado"
        description="Ajuste os filtros ou cadastre o primeiro pedido.">
        <mad-btn variant="primary" icon="plus" size="sm">Novo pedido</mad-btn>
    </mad-empty-state>
</div>

← AnteriorAccordion Próxima →Botões

Código-fonte completo da página

app/control/Tutor/TutorNavegacaoPagina.php

<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;
use Mad\Http\MadResponse;

/**
 * TutorNavegacaoPagina — mad-page-container/mad-page-header/mad-sidebar-nav/
 * mad-separator/mad-empty-state.
 *
 * São componentes de CASCA (pensados para ser a raiz/estrutura da própria
 * página) — aqui eles aparecem em MINIATURA dentro de um card contido
 * (altura fixa + overflow + style="min-height:0" sobrescrevendo o
 * min-height:100vh do mad-page-container), nunca como um segundo "shell" de
 * página de verdade por cima do shell real do Tutor.
 */
class TutorNavegacaoPagina extends TutorPage
{
    protected string $catalogKey = 'navegacao_pagina';

    public function onFavoritosDemo(): MadResponse
    {
        return (new MadResponse())
            ->toast('Ação de exemplo — normalmente filtraria a lista pelos favoritos.', 'info');
    }
}

resources/views/tutor/navegacao/pagina.blade.php

<x-tutor-page page="navegacao_pagina">
    <mad-callout type="warning" title="Componentes de casca" icon="layout-template">
        mad-page-container/mad-page-header e mad-sidebar-nav foram pensados para
        SER a raiz/estrutura da página — esta própria página do Tutor já está
        dentro de um <code>&lt;mad-page-container&gt;</code> real. Por isso os exemplos abaixo
        aparecem em MINIATURA, contidos num card de altura fixa, e nunca como um
        segundo "shell" por cima do shell real do Tutor.
    </mad-callout>

    <x-tutor-demo demo="tutor.examples.navegacao-pagina.estrutura-pagina"
        title="Estrutura da página" desc="mad-page-container + mad-page-header (título/ícone/breadcrumb/ações) + mad-page-content." />

    <x-tutor-demo demo="tutor.examples.navegacao-pagina.sidebar-nav"
        title="Sidebar-nav (rail + painéis)" desc="mad-sidebar-nav com rail de ícones e painéis alternáveis, estilo VSCode/Outlook."
        php="TutorNavegacaoPagina::onFavoritosDemo" />

    <x-tutor-demo demo="tutor.examples.navegacao-pagina.separador"
        title="Separador" desc="mad-separator simples e com label." />

    <x-tutor-demo demo="tutor.examples.navegacao-pagina.estado-vazio"
        title="Estado vazio" desc="mad-empty-state para listas sem resultado, com ação de recuperação." />
</x-tutor-page>

Página e layout

Pedidos