348 lines
13 KiB
Markdown
348 lines
13 KiB
Markdown
# 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">“{{ trim($message) }}”</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
|
|
|