10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-07-11 18:56:06 +09:00
Code Issues Packages Projects Releases Wiki Activity

update navigation

Browse Source
This commit is contained in:
somrat sorkar
2023-07-27 10:30:41 +06:00
parent 6b048173b6
commit 9660f9fda9
2 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/partials/Header.astro
+11 -15
View File
@@ -32,22 +32,18 @@ const { pathname } = Astro.url;
<input id="nav-toggle" type="checkbox" class="hidden" />
<label
for="nav-toggle"
class="order-3 cursor-pointer text-dark dark:text-white lg:order-1"
class="order-3 cursor-pointer flex items-center lg:hidden text-dark dark:text-white lg:order-1"
>
<span id="show-button" class="flex items-center lg:order-1 lg:hidden">
<svg class="h-6 fill-current" viewBox="0 0 20 20">
<title>Menu Open</title>
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
</svg>
</span>
<span id="hide-button" class="hidden items-center lg:order-1">
<svg class="h-6 fill-current" viewBox="0 0 20 20">
<title>Menu Close</title>
<polygon
points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
transform="rotate(45 10 10)"></polygon>
</svg>
</span>
<svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
<title>Menu Open</title>
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
</svg>
<svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
<title>Menu Close</title>
<polygon
points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
transform="rotate(45 10 10)"></polygon>
</svg>
</label>
<!-- /navbar toggler -->
<ul
src/styles/navigation.scss
+4 -4
View File
@@ -1,14 +1,14 @@
// navbar toggler
input#nav-toggle:checked ~ label#show-button {
input#nav-toggle:checked + label #show-button {
@apply hidden;
}
input#nav-toggle:checked ~ label#hide-button {
@apply flex lg:hidden;
input#nav-toggle:checked + label #hide-button {
@apply block;
}
input#nav-toggle:checked ~ #nav-menu {
@apply block lg:flex;
@apply block;
}
.header {