# Layout Navigation Components > Componentes de UI para layout e navegação seguindo o padrão de components do Easy Budget. - Skill: `majiayu000/layout-navigation-components` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add majiayu000/layout-navigation-components` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/layout-navigation-components/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Finance & Business - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/layout-navigation-components --- # Componentes de UI para Layout e Navegação Esta skill define os componentes Blade específicos para layout e navegação no Easy Budget, seguindo o padrão de components estabelecido no sistema. ## Estrutura de Components ``` resources/views/components/ ├── layout/ │ ├── app.blade.php # Layout principal do sistema │ ├── admin.blade.php # Layout para área administrativa │ ├── auth.blade.php # Layout para páginas de autenticação │ ├── dashboard.blade.php # Layout para dashboard │ ├── sidebar.blade.php # Barra lateral de navegação │ ├── navbar.blade.php # Barra de navegação superior │ ├── breadcrumbs.blade.php # Breadcrumb de navegação │ ├── footer.blade.php # Rodapé do sistema │ ├── theme-switcher.blade.php # Troca de tema │ └── notifications.blade.php # Sistema de notificações └── ... ``` ## 1. App Layout Component Componente para layout principal do sistema. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `title` | `string` | Título da página | Obrigatório | | `sidebar` | `bool` | Exibir barra lateral | `true` | | `navbar` | `bool` | Exibir barra superior | `true` | | `theme` | `string` | Tema do sistema | `auto` | ### Estrutura ```blade @props([ 'title', 'sidebar' => true, 'navbar' => true, 'theme' => 'auto' ]) {{ $title }} - {{ tenant('name') ?? 'Easy Budget' }} @vite(['resources/css/app.css', 'resources/js/app.js']) @stack('styles')
@if($navbar) @endif
@if($sidebar) @endif
{{ $slot }}
@if(session('success'))
@elseif(session('error'))
@endif @stack('scripts') ``` ## 2. Admin Layout Component Componente para layout da área administrativa. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `title` | `string` | Título da página | Obrigatório | | `breadcrumbs` | `array` | Breadcrumb da página | `[]` | | `sidebar` | `bool` | Exibir barra lateral | `true` | ### Estrutura ```blade @props([ 'title', 'breadcrumbs' => [], 'sidebar' => true ]) {{ $title }} - Administração - {{ tenant('name') ?? 'Easy Budget' }} @stack('styles')

{{ $title }}

@if($sidebar) @endif
@if(!empty($breadcrumbs)) @endif {{ $slot }}
@stack('scripts') ``` ## 3. Auth Layout Component Componente para layout de páginas de autenticação. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `title` | `string` | Título da página | Obrigatório | | `showLogo` | `bool` | Exibir logo da empresa | `true` | | `background` | `string` | Imagem de fundo | `null` | ### Estrutura ```blade @props([ 'title', 'showLogo' => true, 'background' => null ]) {{ $title }} - {{ tenant('name') ?? 'Easy Budget' }} @stack('styles')
@if($showLogo && tenant('logo')) @endif

{{ $title }}

Bem-vindo ao {{ tenant('name') ?? 'Easy Budget' }}

{{ $slot }}

© {{ date('Y') }} {{ tenant('name') ?? 'Easy Budget' }}. Todos os direitos reservados.

@stack('scripts') ``` ## 4. Dashboard Layout Component Componente para layout de dashboard. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `title` | `string` | Título do dashboard | Obrigatório | | `stats` | `array` | Estatísticas do dashboard | `[]` | | `charts` | `array` | Gráficos do dashboard | `[]` | | `filters` | `bool` | Exibir filtros | `true` | ### Estrutura ```blade @props([ 'title', 'stats' => [], 'charts' => [], 'filters' => true ])

{{ $title }}

Visão geral do seu negócio

@if($filters)
@endif
@if(!empty($stats))
@foreach($stats as $stat)
{{ $stat['value'] }}
{{ $stat['label'] }}
@if(isset($stat['trend']))
{{ abs($stat['trend']) }}%
@endif
@endforeach
@endif @if(!empty($charts))
@foreach($charts as $chart)
{{ $chart['title'] }}
@endforeach
@endif
{{ $slot }}
@push('scripts') @endpush ``` ## 5. Sidebar Component Componente para barra lateral de navegação. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `menu` | `array` | Estrutura do menu | `[]` | | `active` | `string` | Item ativo | `''` | | `user` | `User` | Usuário logado | `null` | ### Estrutura ```blade @props([ 'menu' => [], 'active' => '', 'user' => null ]) @push('styles') @endpush @push('scripts') @endpush ``` ## 6. Navbar Component Componente para barra de navegação superior. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `user` | `User` | Usuário logado | Obrigatório | | `notifications` | `array` | Notificações | `[]` | | `search` | `bool` | Exibir campo de busca | `true` | ### Estrutura ```blade @props([ 'user', 'notifications' => [], 'search' => true ]) @push('styles')