-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
user-menu.blade.php
105 lines (87 loc) · 4.02 KB
/
user-menu.blade.php
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
@php
$user = \Filament\Facades\Filament::auth()->user();
@endphp
<x-filament::dropdown placement="bottom-end">
<x-slot name="trigger">
<x-filament::user-avatar :user="$user" />
</x-slot>
<ul
class="py-1 space-y-1"
x-data="{
mode: null,
theme: null,
init: function () {
this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
if (this.mode === 'manual') return
if (event.matches && (! document.documentElement.classList.contains('dark'))) {
this.theme = 'dark'
document.documentElement.classList.add('dark')
} else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
this.theme = 'light'
document.documentElement.classList.remove('dark')
}
})
$watch('theme', () => {
if (this.mode === 'auto') return
localStorage.setItem('theme', this.theme)
if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
document.documentElement.classList.add('dark')
} else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark')
}
$dispatch('dark-mode-toggled', this.theme)
})
},
isSystemDark: function () {
return window.matchMedia('(prefers-color-scheme: dark)').matches
},
}"
>
@php
$items = \Filament\Facades\Filament::getUserMenuItems();
$accountItem = $items['account'] ?? null;
$logoutItem = $items['logout'] ?? null;
@endphp
<x-filament::dropdown.item
:color="$accountItem?->getColor() ?? 'secondary'"
:icon="$accountItem?->getIcon() ?? 'heroicon-s-user-circle'"
:href="$accountItem?->getUrl()"
tag="a"
>
{{ $accountItem?->getLabel() ?? \Filament\Facades\Filament::getUserName($user) }}
</x-filament::dropdown.item>
<div>
@if (config('filament.dark_mode'))
<x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="close(); mode = 'manual'; theme = 'light'">
{{ __('filament::layout.buttons.light_mode.label') }}
</x-filament::dropdown.item>
<x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="close(); mode = 'manual'; theme = 'dark'">
{{ __('filament::layout.buttons.dark_mode.label') }}
</x-filament::dropdown.item>
@endif
</div>
@foreach ($items as $key => $item)
@if ($key !== 'account' && $key !== 'logout')
<x-filament::dropdown.item
:color="$item->getColor() ?? 'secondary'"
:icon="$item->getIcon()"
:href="$item->getUrl()"
tag="a"
>
{{ $item->getLabel() }}
</x-filament::dropdown.item>
@endif
@endforeach
<x-filament::dropdown.item
:color="$logoutItem?->getColor() ?? 'secondary'"
:icon="$logoutItem?->getIcon() ?? 'heroicon-s-logout'"
:action="$logoutItem?->getUrl() ?? route('filament.auth.logout')"
method="post"
tag="form"
>
{{ $logoutItem?->getLabel() ?? __('filament::layout.buttons.logout.label') }}
</x-filament::dropdown.item>
</ul>
</x-filament::dropdown>