bitstream/fuel-price

Fork 0

Files

Ovidiu U 41be8e2806

linter / quality (push) Has been cancelled

Details

tests / ci (8.3) (push) Has been cancelled

Details

tests / ci (8.4) (push) Has been cancelled

Details

tests / ci (8.5) (push) Has been cancelled

Details

superdesign

2026-04-06 20:01:46 +01:00

13 KiB

Raw Blame History

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.

<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

<!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.).

<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

<!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

<!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)

<!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)

<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

13 KiB Raw Blame History

Layout Files

App Layouts (For Authenticated Users)

1. layouts/app.blade.php (Main App Layout)

2. layouts/app/sidebar.blade.php (Sidebar Layout with Header/Navigation)

Auth Layouts (For Unauthenticated Users)

3. layouts/auth.blade.php (Auth Wrapper)

4. layouts/auth/simple.blade.php (Simple Auth Layout - Centered)

5. layouts/auth/card.blade.php (Card-based Auth Layout)

6. layouts/auth/split.blade.php (Split-screen Auth Layout)

Head/Partial Layouts

7. partials/head.blade.php

Usage Pattern

Color Scheme in Layouts

13 KiB

Raw Blame History

1. `layouts/app.blade.php` (Main App Layout)

2. `layouts/app/sidebar.blade.php` (Sidebar Layout with Header/Navigation)

3. `layouts/auth.blade.php` (Auth Wrapper)

4. `layouts/auth/simple.blade.php` (Simple Auth Layout - Centered)

5. `layouts/auth/card.blade.php` (Card-based Auth Layout)

6. `layouts/auth/split.blade.php` (Split-screen Auth Layout)

7. `partials/head.blade.php`