New Branch Structure

resources/themes/common/views/components/app-logo-icon.blade.php

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
+    <path 
+        fill="currentColor" 
+        fill-rule="evenodd" 
+        clip-rule="evenodd"
+        d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
+    />
+</svg>

resources/themes/common/views/components/app-logo.blade.php

@@ -0,0 +1,17 @@
+@props([
+    'sidebar' => false,
+])
+
+@if($sidebar)
+    <flux:sidebar.brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
+            <x-stylist-theme-common::app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+        </x-slot>
+    </flux:sidebar.brand>
+@else
+    <flux:brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
+        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
+            <x-stylist-theme-common::app-logo-icon class="size-5 fill-current text-white dark:text-black" />
+        </x-slot>
+    </flux:brand>
+@endif

resources/themes/common/views/components/auth-header.blade.php

@@ -0,0 +1,9 @@
+@props([
+    'title',
+    'description',
+])
+
+<div class="flex w-full flex-col text-center">
+    <flux:heading size="xl">{{ $title }}</flux:heading>
+    <flux:subheading>{{ $description }}</flux:subheading>
+</div>

resources/themes/common/views/components/auth-session-status.blade.php

@@ -0,0 +1,9 @@
+@props([
+    'status',
+])
+
+@if ($status)
+    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
+        {{ $status }}
+    </div>
+@endif

resources/themes/common/views/components/desktop-user-menu.blade.php

@@ -0,0 +1,39 @@
+<flux:dropdown position="bottom" align="start">
+    <flux:sidebar.profile
+        :name="auth()->user()->name"
+        :initials="auth()->user()->initials()"
+        icon:trailing="chevron-up-down"
+        data-test="sidebar-menu-button"
+    />
+
+    <flux:menu>
+        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+            <flux:avatar
+                :name="auth()->user()->name"
+                :initials="auth()->user()->initials()"
+            />
+            <div class="grid flex-1 text-start text-sm leading-tight">
+                <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
+                <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
+            </div>
+        </div>
+        <flux:menu.separator />
+        <flux:menu.radio.group>
+            <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
+                {{ __('Settings') }}
+            </flux:menu.item>
+            <form method="POST" action="{{ route('logout') }}" class="w-full">
+                @csrf
+                <flux:menu.item
+                    as="button"
+                    type="submit"
+                    icon="arrow-right-start-on-rectangle"
+                    class="w-full cursor-pointer"
+                    data-test="logout-button"
+                >
+                    {{ __('Log out') }}
+                </flux:menu.item>
+            </form>
+        </flux:menu.radio.group>
+    </flux:menu>
+</flux:dropdown>

resources/themes/common/views/components/layouts/app.blade.php

@@ -0,0 +1,5 @@
+<x-stylist-theme-common::layouts.app.sidebar :title="$title ?? null">
+    <flux:main>
+        {{ $slot }}
+    </flux:main>
+</x-stylist-theme-common::layouts.app.sidebar>

resources/themes/common/views/components/layouts/app/header.blade.php

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('stylist-theme-common::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-stylist-theme-common::app-logo href="{{ route('dashboard') }}" wire:navigate />
+
+            <flux:navbar class="-mb-px max-lg:hidden">
+                <flux:navbar.item icon="squares-2x2" :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"
+                        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"
+                        href="https://laravel.com/docs/starter-kits#livewire"
+                        target="_blank"
+                        :label="__('Documentation')"
+                    />
+                </flux:tooltip>
+            </flux:navbar>
+
+            <x-stylist-theme-common::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-stylist-theme-common::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="squares-2x2" :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" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
+                    {{ __('Repository') }}
+                </flux:sidebar.item>
+                <flux:sidebar.item icon="book-open" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
+                    {{ __('Documentation') }}
+                </flux:sidebar.item>
+            </flux:sidebar.nav>
+        </flux:sidebar>
+
+        {{ $slot }}
+
+        @persist('toast')
+            <flux:toast.group>
+                <flux:toast />
+            </flux:toast.group>
+        @endpersist
+
+        @fluxScripts
+    </body>
+</html>

resources/themes/common/views/components/layouts/app/sidebar.blade.php

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('stylist-theme-common::partials.head')
+    </head>
+    <body class="min-h-screen bg-white dark:bg-zinc-800">
+        <flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+            <flux:sidebar.header>
+                <x-stylist-theme-common::app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
+                <flux:sidebar.collapse class="lg:hidden" />
+            </flux:sidebar.header>
+
+            <flux:sidebar.nav>
+                <flux:sidebar.group :heading="__('Platform')" class="grid">
+                    <flux:sidebar.item icon="home" :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" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
+                    {{ __('Repository') }}
+                </flux:sidebar.item>
+
+                <flux:sidebar.item icon="book-open" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
+                    {{ __('Documentation') }}
+                </flux:sidebar.item>
+            </flux:sidebar.nav>
+
+            <x-stylist-theme-common::desktop-user-menu class="hidden lg:block" :name="auth()->user()->name" />
+        </flux:sidebar>
+
+        <!-- Mobile User Menu -->
+        <flux:header class="lg:hidden">
+            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
+
+            <flux:spacer />
+
+            <flux:dropdown position="top" align="end">
+                <flux:profile
+                    :initials="auth()->user()->initials()"
+                    icon-trailing="chevron-down"
+                />
+
+                <flux:menu>
+                    <flux:menu.radio.group>
+                        <div class="p-0 text-sm font-normal">
+                            <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                                <flux:avatar
+                                    :name="auth()->user()->name"
+                                    :initials="auth()->user()->initials()"
+                                />
+
+                                <div class="grid flex-1 text-start text-sm leading-tight">
+                                    <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
+                                    <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
+                                </div>
+                            </div>
+                        </div>
+                    </flux:menu.radio.group>
+
+                    <flux:menu.separator />
+
+                    <flux:menu.radio.group>
+                        <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
+                            {{ __('Settings') }}
+                        </flux:menu.item>
+                    </flux:menu.radio.group>
+
+                    <flux:menu.separator />
+
+                    <form method="POST" action="{{ route('logout') }}" class="w-full">
+                        @csrf
+                        <flux:menu.item
+                            as="button"
+                            type="submit"
+                            icon="arrow-right-start-on-rectangle"
+                            class="w-full cursor-pointer"
+                            data-test="logout-button"
+                        >
+                            {{ __('Log out') }}
+                        </flux:menu.item>
+                    </form>
+                </flux:menu>
+            </flux:dropdown>
+        </flux:header>
+
+        {{ $slot }}
+
+        @persist('toast')
+            <flux:toast.group>
+                <flux:toast />
+            </flux:toast.group>
+        @endpersist
+
+        @fluxScripts
+    </body>
+</html>

resources/themes/common/views/components/layouts/auth.blade.php

@@ -0,0 +1,3 @@
+<x-stylist-theme-common::layouts.auth.simple :title="$title ?? null">
+    {{ $slot }}
+</x-stylist-theme-common::layouts.auth.simple>

resources/themes/common/views/components/layouts/auth/card.blade.php

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('stylist-theme-common::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-stylist-theme-common::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>
+
+        @persist('toast')
+            <flux:toast.group>
+                <flux:toast />
+            </flux:toast.group>
+        @endpersist
+
+        @fluxScripts
+    </body>
+</html>

resources/themes/common/views/components/layouts/auth/simple.blade.php

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('stylist-theme-common::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-stylist-theme-common::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>
+
+        @persist('toast')
+            <flux:toast.group>
+                <flux:toast />
+            </flux:toast.group>
+        @endpersist
+
+        @fluxScripts
+    </body>
+</html>

resources/themes/common/views/components/layouts/auth/split.blade.php

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+    <head>
+        @include('stylist-theme-common::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-stylist-theme-common::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-stylist-theme-common::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>
+
+        @persist('toast')
+            <flux:toast.group>
+                <flux:toast />
+            </flux:toast.group>
+        @endpersist
+
+        @fluxScripts
+    </body>
+</html>

resources/themes/common/views/components/passkey-registration.blade.php

@@ -0,0 +1,116 @@
+@assets
+@vite('resources/js/passkeys.js')
+@endassets
+
+<div
+    x-data="{
+        supported: false,
+        showForm: false,
+        name: '',
+        loading: false,
+        error: null,
+        updateSupport() {
+            this.supported = Boolean(window.Passkeys?.isSupported());
+        },
+        getDefaultPasskeyName() {
+            const ua = navigator.userAgent;
+
+            const browser = [
+                { pattern: /Edg|Edge/, name: 'Edge' },
+                { pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
+                { pattern: /Firefox|FxiOS/, name: 'Firefox' },
+                { pattern: /Chrome|CriOS/, name: 'Chrome' },
+                { pattern: /Safari/, name: 'Safari' },
+            ].find(({ pattern }) => pattern.test(ua))?.name;
+
+            const os = [
+                { pattern: /iPhone/, name: 'iPhone' },
+                { pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
+                { pattern: /Android/, name: 'Android' },
+                { pattern: /Mac/, name: 'Mac' },
+                { pattern: /Windows/, name: 'Windows' },
+            ].find(({ pattern }) => pattern.test(ua))?.name;
+
+            return [browser, os].filter(Boolean).join(' on ') || '';
+        },
+        init() {
+            this.name = this.getDefaultPasskeyName();
+            this.updateSupport();
+
+            window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
+        },
+        async register() {
+            if (!this.name.trim()) return;
+
+            this.loading = true;
+            this.error = null;
+
+            try {
+                await window.Passkeys.register({ name: this.name });
+                this.name = '';
+                this.showForm = false;
+                await $wire.loadPasskeys();
+            } catch (e) {
+                if (e.constructor?.name !== 'UserCancelledError') {
+                    this.error = e.message;
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+        cancel() {
+            this.showForm = false;
+            this.name = '';
+            this.error = null;
+        },
+    }"
+>
+    <template x-if="!supported">
+        <flux:text>{{ __('Passkeys are not supported in this browser.') }}</flux:text>
+    </template>
+
+    <template x-if="supported && !showForm">
+        <div>
+            <flux:button
+                variant="primary"
+                icon="plus"
+                x-on:click="showForm = true"
+            >
+                {{ __('Add passkey') }}
+            </flux:button>
+        </div>
+    </template>
+
+    <template x-if="supported && showForm">
+        <div class="space-y-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
+            <flux:input
+                label="{{ __('Passkey name') }}"
+                x-model="name"
+                placeholder="{{ __('e.g., MacBook Pro, iPhone') }}"
+                x-on:keydown.enter.prevent="register()"
+                x-ref="passkeyNameInput"
+                x-init="$nextTick(() => $refs.passkeyNameInput?.focus())"
+            />
+            <flux:text class="!mt-1">{{ __('Give this passkey a name to help you identify it later.') }}</flux:text>
+
+            <p x-show="error" x-text="error" x-cloak class="text-sm text-red-600 dark:text-red-400"></p>
+
+            <div class="flex gap-2">
+                <flux:button
+                    variant="primary"
+                    x-on:click="register()"
+                    x-bind:disabled="loading || !name.trim()"
+                >
+                    <span x-show="!loading">{{ __('Register passkey') }}</span>
+                    <span x-show="loading" x-cloak>{{ __('Registering...') }}</span>
+                </flux:button>
+                <flux:button
+                    variant="ghost"
+                    x-on:click="cancel()"
+                >
+                    {{ __('Cancel') }}
+                </flux:button>
+            </div>
+        </div>
+    </template>
+</div>

resources/themes/common/views/components/passkey-verify.blade.php

@@ -0,0 +1,76 @@
+@props([
+    'optionsRoute' => 'passkey.login-options',
+    'submitRoute' => 'passkey.login',
+    'label' => __('Sign in with a passkey'),
+    'loadingLabel' => __('Authenticating...'),
+    'separator' => __('Or continue with email'),
+])
+
+@assets
+@vite('resources/js/passkeys.js')
+@endassets
+
+<div
+    x-data="{
+        supported: false,
+        loading: false,
+        error: null,
+        updateSupport() {
+            this.supported = Boolean(window.Passkeys?.isSupported());
+        },
+        init() {
+            this.updateSupport();
+
+            window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
+        },
+        async verify() {
+            this.loading = true;
+            this.error = null;
+            try {
+                const response = await window.Passkeys.verify({
+                    routes: {
+                        options: '{{ route($optionsRoute) }}',
+                        submit: '{{ route($submitRoute) }}',
+                    },
+                });
+                Livewire.navigate(response.redirect || '/dashboard');
+            } catch (e) {
+                if (e.constructor?.name !== 'UserCancelledError') {
+                    this.error = e.message;
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+    }"
+>
+    <template x-if="supported">
+        <div>
+            <div class="grid gap-2">
+                <flux:button
+                    variant="outline"
+                    icon="finger-print"
+                    class="w-full"
+                    x-on:click="verify()"
+                    x-bind:disabled="loading"
+                >
+                    <span x-show="!loading">{{ $label }}</span>
+                    <span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
+                </flux:button>
+                <p x-show="error" x-text="error" x-cloak
+                   class="text-sm text-center text-red-600 dark:text-red-400"></p>
+            </div>
+
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div>
+                </div>
+                <div class="relative flex justify-center text-xs uppercase">
+                    <span class="px-2 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-900">
+                        {{ $separator }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>

resources/themes/common/views/components/settings/layout.blade.php

@@ -0,0 +1,20 @@
+<div class="flex items-start max-md:flex-col">
+    <div class="me-10 w-full pb-4 md:w-[220px]">
+        <flux:navlist aria-label="{{ __('Settings') }}">
+            <flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
+        </flux:navlist>
+    </div>
+
+    <flux:separator class="md:hidden" />
+
+    <div class="flex-1 self-stretch max-md:pt-6">
+        <flux:heading>{{ $heading ?? '' }}</flux:heading>
+        <flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
+
+        <div class="mt-5 w-full max-w-lg">
+            {{ $slot }}
+        </div>
+    </div>
+</div>