Skip to content

Commit

Permalink
refactor: dropdown menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@yilanboy
yilanboy committed Jan 14, 2025
1 parent 2ae4c07 commit 3c690f6
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 78 deletions.
5 changes: 5 additions & 0 deletions resources/views/components/dropdown/button.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<button
{{ $attributes->merge(['class' => 'flex w-full items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700', 'type' => 'button', 'role' => 'menuitem']) }}
>
{{ $slot }}
</button>
4 changes: 4 additions & 0 deletions resources/views/components/dropdown/link.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<a
{{ $attributes->merge(['class' => 'flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700', 'role' => 'menuitem', 'wire:navigate' => '']) }}>
{{ $slot }}
</a>
5 changes: 5 additions & 0 deletions resources/views/components/dropdown/menu.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div
{{ $attributes->merge(['class' => 'mt-2 w-48 rounded-md bg-gray-50 p-2 ring-1 ring-black/20 dark:bg-gray-800 dark:text-gray-50 dark:ring-gray-400/40', 'role' => 'menu']) }}
>
{{ $slot }}
</div>
99 changes: 29 additions & 70 deletions resources/views/livewire/shared/header.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,50 +159,36 @@ class="size-12 rounded-full"
</div>

{{-- profile menu --}}
<div
class="absolute right-0 top-16 mt-2 w-48 rounded-md bg-gray-50 p-2 ring-1 ring-black/20 dark:bg-gray-800 dark:text-gray-50 dark:ring-gray-400/40"
x-cloak
<x-dropdown.menu
class="absolute right-0 top-16"
x-cloak=""
x-show="profileMenuIsOpen"
x-on:click.outside="closeProfileMenu"
x-transition.origin.top.right
x-transition.origin.top.right=""
>
<a
class="flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
href="{{ route('posts.create') }}"
wire:navigate
>
<x-dropdown.link href="{{ route('posts.create') }}">
<x-icon.pencil class="w-4" />
<span class="ml-2">新增文章</span>
</a>
</x-dropdown.link>

<a
class="flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
href="{{ route('users.show', ['id' => auth()->id()]) }}"
wire:navigate
>
<x-dropdown.link href="{{ route('users.show', ['id' => auth()->id()]) }}">
<x-icon.info-circle class="w-4" />
<span class="ml-2">個人資訊</span>
</a>
</x-dropdown.link>

<a
class="flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
href="{{ route('users.edit', ['id' => auth()->id()]) }}"
wire:navigate
>
<x-dropdown.link href="{{ route('users.edit', ['id' => auth()->id()]) }}">
<x-icon.person-circle class="w-4" />
<span class="ml-2">會員中心</span>
</a>
</x-dropdown.link>

<button
class="flex w-full items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
type="button"
<x-dropdown.button
wire:confirm="你確定要登出嗎？"
wire:click="logout"
>
<x-icon.box-arrow-left class="w-4" />
<span class="ml-2">登出</span>
</button>
</div>
</x-dropdown.button>
</x-dropdown.menu>
</div>
@endauth
</div>
Expand Down Expand Up @@ -299,8 +285,7 @@ class="rounded-full text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:ho

@if (auth()->user()->unreadNotifications->count() > 0)
<span class="absolute right-2 top-2 -mr-1 -mt-1 flex h-3 w-3">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
</span>
@endif
Expand Down Expand Up @@ -328,62 +313,36 @@ class="size-10 rounded-full"
</div>

{{-- profile menu --}}
<div
class="absolute right-0 top-12 mt-2 w-48 rounded-md bg-gray-50 p-2 text-gray-700 ring-1 ring-black/20 dark:bg-gray-800 dark:text-gray-50 dark:ring-gray-400/40"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
x-cloak
<x-dropdown.menu
class="absolute right-0 top-12"
x-cloak=""
x-show="profileMenuIsOpen"
x-on:click.outside="closeProfileMenu"
x-transition.origin.top.right
x-transition.origin.top.right=""
>
<a
class="flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
href="{{ route('posts.create') }}"
role="menuitem"
tabindex="-1"
wire:navigate
>
<x-dropdown.link href="{{ route('posts.create') }}">
<x-icon.pencil class="w-4" />
<span class="ml-2">新增文章</span>
</a>

<a
class="flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
href="{{ route('users.show', ['id' => auth()->id()]) }}"
role="menuitem"
tabindex="-1"
wire:navigate
>
</x-dropdown.link>

<x-dropdown.link href="{{ route('users.show', ['id' => auth()->id()]) }}">
<x-icon.info-circle class="w-4" />
<span class="ml-2">個人資訊</span>
</a>

<a
class="flex items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
href="{{ route('users.edit', ['id' => auth()->id()]) }}"
role="menuitem"
tabindex="-1"
wire:navigate
>
</x-dropdown.link>

<x-dropdown.link href="{{ route('users.edit', ['id' => auth()->id()]) }}">
<x-icon.person-circle class="w-4" />
<span class="ml-2">會員中心</span>
</a>
</x-dropdown.link>

<button
class="flex w-full items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
type="button"
role="menuitem"
tabindex="-1"
<x-dropdown.button
wire:confirm="你確定要登出嗎？"
wire:click="logout"
>
<x-icon.box-arrow-left class="w-4" />
<span class="ml-2">登出</span>
</button>
</div>
</x-dropdown.button>
</x-dropdown.menu>
</div>
@endauth
</div>
Expand Down
14 changes: 6 additions & 8 deletions resources/views/livewire/shared/users/posts.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,27 +36,25 @@ class="inline-flex w-full items-center justify-center rounded-md border bg-gray-
>
</button>

<div
class="absolute right-0 top-1 z-50 mt-12 w-40 rounded-md bg-gray-50 p-1 text-lg ring-1 ring-black/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-50 dark:ring-gray-600/20"
x-cloak
<x-dropdown.menu
class="absolute right-0 top-12 z-10"
x-cloak=""
x-show="dropdownIsOpen"
x-on:click.away="closeDropdown"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="-translate-y-2"
x-transition:enter-end="translate-y-0"
>
@foreach (array_keys($this->postsGroupByYear) as $year)
<button
class="group relative flex w-full cursor-default select-none items-center justify-between rounded px-2 py-1.5 outline-none hover:bg-gray-200 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-50"
<x-dropdown.button
data-year="{{ $year }}"
type="button"
x-on:click="switchPostsByYear"
wire:key="switch-to-{{ $year }}-posts"
>
<span>{{ $year }}</span>
</button>
</x-dropdown.button>
@endforeach
</div>
</x-dropdown.menu>
</div>

@foreach ($this->postsGroupByYear as $year => $posts)
Expand Down

0 comments on commit 3c690f6

Please sign in to comment.