# 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
<x-layouts::app.sidebar :title="$title ?? null">
    <flux:main>
        {{ $slot }}
    </flux:main>
</x-layouts::app.sidebar>
```

---

### 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
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-white dark:bg-zinc-800">
        <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
            <flux:sidebar.toggle class="lg:hidden mr-2" icon="bars-2" inset="left" />

            <x-app-logo href="{{ route('dashboard') }}" wire:navigate />

            <flux:navbar class="-mb-px max-lg:hidden">
                <flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
                    {{ __('Dashboard') }}
                </flux:navbar.item>
            </flux:navbar>

            <flux:spacer />

            <flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
                <flux:tooltip :content="__('Search')" position="bottom">
                    <flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
                </flux:tooltip>
                <flux:tooltip :content="__('Repository')" position="bottom">
                    <flux:navbar.item
                        class="h-10 max-lg:hidden [&>div>svg]:size-5"
                        icon="folder-git-2"
                        href="https://github.com/laravel/livewire-starter-kit"
                        target="_blank"
                        :label="__('Repository')"
                    />
                </flux:tooltip>
                <flux:tooltip :content="__('Documentation')" position="bottom">
                    <flux:navbar.item
                        class="h-10 max-lg:hidden [&>div>svg]:size-5"
                        icon="book-open-text"
                        href="https://laravel.com/docs/starter-kits#livewire"
                        target="_blank"
                        :label="__('Documentation')"
                    />
                </flux:tooltip>
            </flux:navbar>

            <x-desktop-user-menu />
        </flux:header>

        <!-- Mobile Menu -->
        <flux:sidebar collapsible="mobile" sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
            <flux:sidebar.header>
                <x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
                <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
            </flux:sidebar.header>

            <flux:sidebar.nav>
                <flux:sidebar.group :heading="__('Platform')">
                    <flux:sidebar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
                        {{ __('Dashboard')  }}
                    </flux:sidebar.item>
                </flux:sidebar.group>
            </flux:sidebar.nav>

            <flux:spacer />

            <flux:sidebar.nav>
                <flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
                    {{ __('Repository') }}
                </flux:sidebar.item>
                <flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
                    {{ __('Documentation') }}
                </flux:sidebar.item>
            </flux:sidebar.nav>
        </flux:sidebar>

        {{ $slot }}

        @fluxScripts
    </body>
</html>
```

---

## 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
<x-layouts::auth.simple :title="$title ?? null">
    {{ $slot }}
</x-layouts::auth.simple>
```

---

### 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
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
        <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
            <div class="flex w-full max-w-sm flex-col gap-2">
                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
                    <span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
                    </span>
                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
                </a>
                <div class="flex flex-col gap-6">
                    {{ $slot }}
                </div>
            </div>
        </div>
        @fluxScripts
    </body>
</html>
```

---

### 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
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
        <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
            <div class="flex w-full max-w-md flex-col gap-6">
                <a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
                    <span class="flex h-9 w-9 items-center justify-center rounded-md">
                        <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
                    </span>

                    <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
                </a>

                <div class="flex flex-col gap-6">
                    <div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
                        <div class="px-10 py-8">{{ $slot }}</div>
                    </div>
                </div>
            </div>
        </div>
        @fluxScripts
    </body>
</html>
```

---

### 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
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
        <div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
            <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
                <div class="absolute inset-0 bg-neutral-900"></div>
                <a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
                    <span class="flex h-10 w-10 items-center justify-center rounded-md">
                        <x-app-logo-icon class="me-2 h-7 fill-current text-white" />
                    </span>
                    {{ config('app.name', 'Laravel') }}
                </a>

                @php
                    [$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
                @endphp

                <div class="relative z-20 mt-auto">
                    <blockquote class="space-y-2">
                        <flux:heading size="lg">&ldquo;{{ trim($message) }}&rdquo;</flux:heading>
                        <footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
                    </blockquote>
                </div>
            </div>
            <div class="w-full lg:p-8">
                <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
                    <a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
                        <span class="flex h-9 w-9 items-center justify-center rounded-md">
                            <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
                        </span>

                        <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
                    </a>
                    {{ $slot }}
                </div>
            </div>
        </div>
        @fluxScripts
    </body>
</html>
```

---

## 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
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>
    {{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}
</title>

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

@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

