Skip to content

Commit 14cb378

Browse files
AwesomolocityAwesomolocity
committed
Update sidebar layout
1 parent 9ad7f7b commit 14cb378

File tree

2 files changed

+48
-80
lines changed

2 files changed

+48
-80
lines changed

‎resources/views/components/app-logo.blade.php‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1-
<div class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
2-
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
3-
</div>
4-
<div class="ms-1 grid flex-1 text-start text-sm">
5-
<span class="mb-0.5 truncate leading-tight font-semibold">Laravel Starter Kit</span>
6-
</div>
1+
@blaze
2+
3+
@props([
4+
'sidebar' => false,
5+
])
6+
7+
@if($sidebar)
8+
<flux:sidebar.brand name="Laravel Starter Kit" {{ $attributes }}>
9+
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
10+
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
11+
</x-slot>
12+
</flux:sidebar.brand>
13+
@else
14+
<flux:brand name="Laravel Starter Kit" {{ $attributes }}>
15+
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
16+
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
17+
</x-slot>
18+
</flux:brand>
19+
@endif

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

Lines changed: 29 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -4,78 +4,36 @@
44
@include('partials.head')
55
</head>
66
<body class="min-h-screen bg-white dark:bg-zinc-800">
7-
<flux:sidebar sticky stashable class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
8-
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
9-
10-
<a href="{{ route('dashboard') }}" class="me-5 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
11-
<x-app-logo />
12-
</a>
13-
14-
<flux:navlist variant="outline">
15-
<flux:navlist.group :heading="__('Platform')" class="grid">
16-
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
17-
</flux:navlist.group>
18-
</flux:navlist>
7+
<flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
8+
<flux:sidebar.header>
9+
<x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
10+
<flux:sidebar.collapse class="lg:hidden" />
11+
</flux:sidebar.header>
12+
13+
<flux:sidebar.nav>
14+
<flux:sidebar.group :heading="__('Platform')" class="grid">
15+
<flux:sidebar.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
16+
{{ __('Dashboard') }}
17+
</flux:sidebar.item>
18+
</flux:sidebar.group>
19+
</flux:sidebar.nav>
1920

2021
<flux:spacer />
2122

22-
<flux:navlist variant="outline">
23-
<flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
24-
{{ __('Repository') }}
25-
</flux:navlist.item>
23+
<flux:sidebar.nav>
24+
<flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
25+
{{ __('Repository') }}
26+
</flux:sidebar.item>
2627

27-
<flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
28-
{{ __('Documentation') }}
29-
</flux:navlist.item>
30-
</flux:navlist>
28+
<flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
29+
{{ __('Documentation') }}
30+
</flux:sidebar.item>
31+
</flux:sidebar.nav>
3132

32-
<!-- Desktop User Menu -->
33-
<flux:dropdown class="hidden lg:block" position="bottom" align="start">
34-
<flux:profile
35-
:name="auth()->user()->name"
36-
:initials="auth()->user()->initials()"
37-
icon:trailing="chevrons-up-down"
38-
data-test="sidebar-menu-button"
39-
/>
40-
41-
<flux:menu class="w-[220px]">
42-
<flux:menu.radio.group>
43-
<div class="p-0 text-sm font-normal">
44-
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
45-
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
46-
<span
47-
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
48-
>
49-
{{ auth()->user()->initials() }}
50-
</span>
51-
</span>
52-
53-
<div class="grid flex-1 text-start text-sm leading-tight">
54-
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
55-
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
56-
</div>
57-
</div>
58-
</div>
59-
</flux:menu.radio.group>
60-
61-
<flux:menu.separator />
62-
63-
<flux:menu.radio.group>
64-
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
65-
</flux:menu.radio.group>
66-
67-
<flux:menu.separator />
68-
69-
<form method="POST" action="{{ route('logout') }}" class="w-full">
70-
@csrf
71-
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full" data-test="logout-button">
72-
{{ __('Log Out') }}
73-
</flux:menu.item>
74-
</form>
75-
</flux:menu>
76-
</flux:dropdown>
33+
<x-desktop-user-menu />
7734
</flux:sidebar>
7835

36+
7937
<!-- Mobile User Menu -->
8038
<flux:header class="lg:hidden">
8139
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
@@ -92,17 +50,14 @@ class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200
9250
<flux:menu.radio.group>
9351
<div class="p-0 text-sm font-normal">
9452
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
95-
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
96-
<span
97-
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
98-
>
99-
{{ auth()->user()->initials() }}
100-
</span>
101-
</span>
53+
<flux:avatar
54+
:name="auth()->user()->name"
55+
:initials="auth()->user()->initials()"
56+
/>
10257

10358
<div class="grid flex-1 text-start text-sm leading-tight">
104-
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
105-
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
59+
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
60+
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
10661
</div>
10762
</div>
10863
</div>

0 commit comments

Comments
 (0)