speedtest-tracker/resources/views/layouts/partials/header.blade.php at main · BTSLAB/speedtest-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<header class="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
    <div>
        <h1 class="text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">{{ $title ?? 'Page Title' }} - {{ config('app.name') }}</h1>
    </div>

    <div class="flex items-center shrink-0 gap-4">
        <div
            x-data="{ theme: null }"
            x-init="
                theme = localStorage.getItem('theme') || 'system'
                $watch('theme', () => {
                    localStorage.setItem('theme', theme)
                    const effectiveTheme = theme === 'system'
                        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
                        : theme
                    if (effectiveTheme === 'dark') {
                        document.documentElement.classList.add('dark')
                    } else {
                        document.documentElement.classList.remove('dark')
                    }
                    $dispatch('theme-changed', theme)
                })
            "
            class="flex items-center gap-1 p-1 rounded-lg bg-gray-100 dark:bg-gray-800"
        >
            <button
                type="button"
                x-on:click="theme = 'light'"
                x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'light' }"
                class="p-2 rounded-md transition-all"
                aria-label="Light mode"
            >
                <x-tabler-sun class="size-4" />
            </button>

            <button
                type="button"
                x-on:click="theme = 'dark'"
                x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'dark' }"
                class="p-2 rounded-md transition-all"
                aria-label="Dark mode"
            >
                <x-tabler-moon class="size-4" />
            </button>

            <button
                type="button"
                x-on:click="theme = 'system'"
                x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'system' }"
                class="p-2 rounded-md transition-all"
                aria-label="System theme"
            >
                <x-tabler-device-desktop class="size-4" />
            </button>
        </div>

        @auth
            <livewire:topbar.actions :showDashboard="false" />

            <x-filament::button
                href="{{ url('/admin') }}"
                icon="tabler-layout-dashboard"
                iconButton="true"
                tag="a"
                size="lg"
            >
                {{ __('general.admin') }}
            </x-filament::button>
        @else
            <x-filament::button
                href="{{ url('/login') }}"
                icon="tabler-login"
                tag="a"
                size="lg"
            >
                {{ __('auth.sign_in') }}
            </x-filament::button>
        @endauth
    </div>
</header>