# Layout Files ## App Layouts (For Authenticated Users) ### 1. `layouts/app.blade.php` (Main App Layout) **Path:** `resources/views/layouts/app.blade.php` Wrapper layout that delegates to sidebar layout. Used by authenticated routes. ```blade {{ $slot }} ``` --- ### 2. `layouts/app/sidebar.blade.php` (Sidebar Layout with Header/Navigation) **Path:** `resources/views/layouts/app/sidebar.blade.php` Core authenticated layout with sidebar navigation and header. Renders app header on desktop, mobile sidebar. **Key Features:** - Dark mode support (HTML class="dark") - Responsive: Sidebar on desktop, hamburger on mobile - Desktop navbar with Dashboard link - Mobile header with sidebar toggle - Search, Repository, and Documentation links - User menu in header (desktop) and mobile sidebar - Uses Flux components extensively **Structure:** - HTML/head with partials.head include - Body with min-h-screen, dark mode bg colors - flux:header (desktop) with: - Sidebar toggle (mobile only) - App logo - Desktop navbar with links - Spacer - Secondary navbar (Search, Repo, Docs icons) - Desktop user menu - flux:sidebar (mobile) with: - App logo - Sidebar collapse button - Navigation group (Platform section) - External links (Repo, Docs) - flux:main slot for page content - @fluxScripts directive at end ```blade @include('partials.head') {{ __('Dashboard') }} {{ __('Dashboard') }} {{ __('Repository') }} {{ __('Documentation') }} {{ $slot }} @fluxScripts ``` --- ## Auth Layouts (For Unauthenticated Users) ### 3. `layouts/auth.blade.php` (Auth Wrapper) **Path:** `resources/views/layouts/auth.blade.php` Simple wrapper that delegates to simple layout. Used for auth pages (login, register, password reset, etc.). ```blade {{ $slot }} ``` --- ### 4. `layouts/auth/simple.blade.php` (Simple Auth Layout - Centered) **Path:** `resources/views/layouts/auth/simple.blade.php` Minimalist centered layout for authentication. Used for login, register, etc. **Key Features:** - Dark mode with gradient background (dark:from-neutral-950 to-neutral-900) - Centered content with max-width constraint - App logo centered with link to home - Dark mode gradient background - Flex column centered layout ```blade @include('partials.head')
{{ config('app.name', 'Laravel') }}
{{ $slot }}
@fluxScripts ``` --- ### 5. `layouts/auth/card.blade.php` (Card-based Auth Layout) **Path:** `resources/views/layouts/auth/card.blade.php` Card-based authentication layout with rounded borders and shadow. Alternative to simple layout. **Key Features:** - Centered card with white background and dark border - Max-width constraint - Padding inside card (px-10 py-8) - Light neutral-100 background - Dark mode: stone-950 card bg with stone-800 border ```blade @include('partials.head')
{{ config('app.name', 'Laravel') }}
{{ $slot }}
@fluxScripts ``` --- ### 6. `layouts/auth/split.blade.php` (Split-screen Auth Layout) **Path:** `resources/views/layouts/auth/split.blade.php` Split-screen layout with marketing content on left (desktop only) and form on right. **Key Features:** - Two-column layout on desktop (lg:grid-cols-2) - Left side: Dark background (neutral-900) with motivational quote (hidden on mobile) - Right side: Form content - Logo centered on mobile, top-left on desktop (left side) - Quote display with blockquote - Uses Flux heading component - Full viewport height (h-dvh) ```blade @include('partials.head')
{{ config('app.name', 'Laravel') }} {{ $slot }}
@fluxScripts ``` --- ## Head/Partial Layouts ### 7. `partials/head.blade.php` **Path:** `resources/views/partials/head.blade.php` Shared head section included in all layouts. **Content:** - Meta charset and viewport - Dynamic title generation - Favicon setup (ico, svg, apple-touch-icon) - Fonts: Instrument Sans from fonts.bunny.net (weights 400, 500, 600) - Vite asset loading (CSS and JS) - Flux appearance directive (dark mode toggle support) ```blade {{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }} @vite(['resources/css/app.css', 'resources/js/app.js']) @fluxAppearance ``` --- ## Usage Pattern | Route | Layout Chain | Use Case | |-------|-----------|----------| | `/` (home) | Custom (not using these layouts) | Landing page | | `/dashboard` | `layouts/app` → `layouts/app/sidebar` | Authenticated user dashboard | | `/login`, `/register` | `layouts/auth` → `layouts/auth/simple` | Simple auth forms | | `/stations` | StationSearch Livewire component (no layout wrapper) | Public search page | | `/settings/*` | `layouts/app` → `layouts/app/sidebar` | Settings pages | --- ## Color Scheme in Layouts - **Light Mode:** white background, zinc borders - **Dark Mode:** zinc-800 body, zinc-900 header/sidebar, zinc-700 borders - **Auth Pages (Dark):** linear gradient from neutral-950 to neutral-900