--- name: layout-navigation-components description: Componentes de UI para layout e navegação seguindo o padrão de components do Easy Budget. --- # 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') @endpush ``` ## 7. Breadcrumbs Component Componente para breadcrumb de navegação. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `breadcrumbs` | `array` | Estrutura do breadcrumb | Obrigatório | ### Estrutura ```blade @props(['breadcrumbs']) @if(!empty($breadcrumbs)) @endif @push('styles') @endpush ``` ## 8. Footer Component Componente para rodapé do sistema. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `links` | `array` | Links do rodapé | `[]` | | `social` | `array` | Links sociais | `[]` | | `showCopyright` | `bool` | Exibir copyright | `true` | ### Estrutura ```blade @props([ 'links' => [], 'social' => [], 'showCopyright' => true ])

{{ tenant('description') ?? 'Sua solução de gestão empresarial completa.' }}

@if(!empty($links))
Links Rápidos
@endif
Suporte
@if(!empty($social))
Siga-nos
@endif
@if($showCopyright)
© {{ date('Y') }} {{ tenant('name') ?? 'Easy Budget' }}. Todos os direitos reservados.
@endif
Termos de Uso Política de Privacidade Cookies
@push('styles') @endpush ``` ## 9. Theme Switcher Component Componente para troca de tema. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `currentTheme` | `string` | Tema atual | `auto` | | `themes` | `array` | Temas disponíveis | `[]` | ### Estrutura ```blade @props([ 'currentTheme' => 'auto', 'themes' => [ 'auto' => ['name' => 'Automático', 'icon' => 'bi-circle-half'], 'light' => ['name' => 'Claro', 'icon' => 'bi-sun'], 'dark' => ['name' => 'Escuro', 'icon' => 'bi-moon'] ] ])
    @foreach($themes as $key => $theme)
    • @endforeach
@push('styles') @endpush @push('scripts') @endpush ``` ## 10. Notifications Component Componente para sistema de notificações. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `notifications` | `array` | Notificações | `[]` | | `maxVisible` | `int` | Máximo de notificações visíveis | `5` | ### Estrutura ```blade @props([ 'notifications' => [], 'maxVisible' => 5 ])
@foreach($notifications as $notification)
{{ $notification['title'] }}
{{ $notification['message'] }}
{{ $notification['time'] }}
@endforeach
@push('styles') @endpush @push('scripts') @endpush ``` ## 11. Integração com Padrões Existentes ### Uso em Views ```blade {{-- Layout Principal --}}
{{-- Dashboard --}} {{-- Autenticação --}}
@csrf
``` ### Estilos CSS ```css /* Layout Components Styles */ .sidebar { width: 250px; background-color: #fff; border-right: 1px solid #e9ecef; } .navbar { box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; } .footer { margin-top: auto; background-color: #f8f9fa; border-top: 1px solid #e9ecef; } .notification-item { background: white; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } ``` ## 12. JavaScript Interatividade ### Sistema de Layout ```javascript // layout-system.js document.addEventListener('DOMContentLoaded', function() { // Sidebar toggle const sidebarToggle = document.getElementById('sidebarToggle'); const sidebar = document.getElementById('sidebar'); if (sidebarToggle && sidebar) { sidebarToggle.addEventListener('click', function() { sidebar.classList.toggle('show'); }); } // Theme switcher const themeSwitcher = document.getElementById('themeSwitcher'); if (themeSwitcher) { // Theme switching logic } // Responsive navigation window.addEventListener('resize', function() { if (window.innerWidth > 768) { sidebar.classList.remove('show'); } }); }); ``` ## 13. Validação e Segurança ### Autorização ```php // LayoutPolicy.php public function viewSidebar(User $user) { return $user->tenant_id === tenant('id'); } public function viewNotifications(User $user) { return $user->tenant_id === tenant('id'); } public function changeTheme(User $user) { return $user->can('manage-settings'); } ``` ### Validations ```blade {{-- Sidebar com validação de permissões --}} @can('viewSidebar') @endcan {{-- Theme Switcher com validação de permissões --}} @can('changeTheme') @endcan ``` Este padrão de components para layout e navegação garante consistência visual, reutilização de código e manutenibilidade, seguindo os mesmos princípios estabelecidos nos outros components do sistema.