Skip to content

Commit 4759890

Browse files
AwesomolocityAwesomolocity
committed
Update header layout
1 parent 14cb378 commit 4759890

File tree

3 files changed

+57
-71
lines changed

3 files changed

+57
-71
lines changed

‎resources/views/components/desktop-user-menu.blade.php‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<flux:dropdown position="bottom" align="start">
2+
<flux:sidebar.profile
3+
:initials="auth()->user()->initials()"
4+
icon:trailing="chevrons-up-down"
5+
data-test="sidebar-menu-button"
6+
/>
7+
8+
<flux:menu>
9+
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
10+
<flux:avatar
11+
:name="auth()->user()->name"
12+
:initials="auth()->user()->initials()"
13+
/>
14+
<div class="grid flex-1 text-start text-sm leading-tight">
15+
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
16+
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
17+
</div>
18+
</div>
19+
<flux:menu.separator />
20+
<flux:menu.radio.group>
21+
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
22+
{{ __('Settings') }}
23+
</flux:menu.item>
24+
<form method="POST" action="{{ route('logout') }}" class="w-full">
25+
@csrf
26+
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full" data-test="logout-button">
27+
{{ __('Log Out') }}
28+
</flux:menu.item>
29+
</form>
30+
</flux:menu.radio.group>
31+
</flux:menu>
32+
</flux:dropdown>

‎resources/views/components/layouts/app/header.blade.php‎

Lines changed: 24 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
</head>
66
<body class="min-h-screen bg-white dark:bg-zinc-800">
77
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
8-
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
8+
<flux:sidebar.toggle class="lg:hidden mr-2" icon="bars-2" inset="left" />
99

10-
<a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
11-
<x-app-logo />
12-
</a>
10+
<x-app-logo href="{{ route('dashboard') }}" wire:navigate />
1311

1412
<flux:navbar class="-mb-px max-lg:hidden">
1513
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
@@ -43,78 +41,34 @@ class="h-10 max-lg:hidden [&>div>svg]:size-5"
4341
</flux:tooltip>
4442
</flux:navbar>
4543

46-
<!-- Desktop User Menu -->
47-
<flux:dropdown position="top" align="end">
48-
<flux:profile
49-
class="cursor-pointer"
50-
:initials="auth()->user()->initials()"
51-
/>
52-
53-
<flux:menu>
54-
<flux:menu.radio.group>
55-
<div class="p-0 text-sm font-normal">
56-
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
57-
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
58-
<span
59-
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
60-
>
61-
{{ auth()->user()->initials() }}
62-
</span>
63-
</span>
64-
65-
<div class="grid flex-1 text-start text-sm leading-tight">
66-
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
67-
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
68-
</div>
69-
</div>
70-
</div>
71-
</flux:menu.radio.group>
72-
73-
<flux:menu.separator />
74-
75-
<flux:menu.radio.group>
76-
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
77-
</flux:menu.radio.group>
78-
79-
<flux:menu.separator />
80-
81-
<form method="POST" action="{{ route('logout') }}" class="w-full">
82-
@csrf
83-
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full" data-test="logout-button">
84-
{{ __('Log Out') }}
85-
</flux:menu.item>
86-
</form>
87-
</flux:menu>
88-
</flux:dropdown>
44+
<x-desktop-user-menu />
8945
</flux:header>
9046

9147
<!-- Mobile Menu -->
92-
<flux:sidebar stashable sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
93-
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
94-
95-
<a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
96-
<x-app-logo />
97-
</a>
98-
99-
<flux:navlist variant="outline">
100-
<flux:navlist.group :heading="__('Platform')">
101-
<flux:navlist.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
102-
{{ __('Dashboard') }}
103-
</flux:navlist.item>
104-
</flux:navlist.group>
105-
</flux:navlist>
48+
<flux:sidebar collapsible="mobile" sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
49+
<flux:sidebar.header>
50+
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
51+
<flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
52+
</flux:sidebar.header>
53+
54+
<flux:sidebar.nav>
55+
<flux:sidebar.group :heading="__('Platform')">
56+
<flux:sidebar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
57+
{{ __('Dashboard') }}
58+
</flux:sidebar.item>
59+
</flux:sidebar.group>
60+
</flux:sidebar.nav>
10661

10762
<flux:spacer />
10863

109-
<flux:navlist variant="outline">
110-
<flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
111-
{{ __('Repository') }}
112-
</flux:navlist.item>
113-
114-
<flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
115-
{{ __('Documentation') }}
116-
</flux:navlist.item>
117-
</flux:navlist>
64+
<flux:sidebar.nav>
65+
<flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
66+
{{ __('Repository') }}
67+
</flux:sidebar.item>
68+
<flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
69+
{{ __('Documentation') }}
70+
</flux:sidebar.item>
71+
</flux:sidebar.nav>
11872
</flux:sidebar>
11973

12074
{{ $slot }}

‎resources/views/components/layouts/app/sidebar.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</flux:sidebar.item>
3131
</flux:sidebar.nav>
3232

33-
<x-desktop-user-menu />
33+
<x-desktop-user-menu class="hidden lg:block" />
3434
</flux:sidebar>
3535

3636

0 commit comments

Comments
 (0)