Skip to content

Commit a1c530f

Browse files
committed
Recreate improved sidebar toggle button
1 parent 5340aa0 commit a1c530f

File tree

1 file changed

+10
-9
lines changed

1 file changed

+10
-9
lines changed
Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<button
22
id="sidebar-toggle"
33
title="Toggle sidebar"
4-
aria-label="Toggle sidebar navigation menu"
5-
@click="sidebarOpen = ! sidebarOpen"
6-
:class="{'[&>span:first-child]:opacity-0 [&>span:nth-child(2)]:rotate-45 [&>span:nth-child(3)]:-rotate-45 [&>span:last-child]:opacity-0': sidebarOpen}"
7-
class="relative inline-block w-8 h-8 hover:text-gray-700 dark:text-gray-200"
8-
>
9-
<span class="block w-5 h-0.5 bg-current absolute left-1.5 top-1 transition-all duration-300 ease-out" role="presentation"></span>
10-
<span class="block w-5 h-0.5 bg-current absolute left-1.5 top-2.5 transition-all duration-300 ease-out origin-center" role="presentation"></span>
11-
<span class="block w-5 h-0.5 bg-current absolute left-1.5 top-2.5 transition-all duration-300 ease-out origin-center" role="presentation"></span>
12-
<span class="block w-5 h-0.5 bg-current absolute left-1.5 top-4 transition-all duration-300 ease-out" role="presentation"></span>
4+
aria-label="Toggle sidebar navigation menu"
5+
@click="sidebarOpen = !sidebarOpen"
6+
class="flex items-center justify-center w-8 h-8 px-2 py-1 hover:text-gray-700 dark:text-gray-200 opacity-75 hover:opacity-100"
7+
>
8+
<div class="relative w-5 h-4">
9+
<div class="absolute top-0 w-5 h-0.5 bg-current transition-all duration-300 ease-in-out" :class="sidebarOpen ? 'opacity-0' : ''"></div>
10+
<div class="absolute inset-0 my-auto w-5 h-0.5 bg-current transition-all duration-300 ease-in-out origin-center" :class="sidebarOpen ? 'rotate-45' : ''"></div>
11+
<div class="absolute inset-0 my-auto w-5 h-0.5 bg-current transition-all duration-300 ease-in-out origin-center" :class="sidebarOpen ? '-rotate-45' : ''"></div>
12+
<div class="absolute bottom-0 w-5 h-0.5 bg-current transition-all duration-300 ease-in-out" :class="sidebarOpen ? 'opacity-0' : ''"></div>
13+
</div>
1314
</button>

0 commit comments

Comments
 (0)