Implemented Mobile navbar

Naapperas · Dec 22, 2023 · ba6948d · ba6948d
1 parent 2504da5
commit ba6948d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/src/components/AppBar/Mobile.astro b/src/components/AppBar/Mobile.astro
@@ -26,13 +26,14 @@ const { pages, customClasses } = Astro.props;
     <nav class="flex gap-3">
         <label id="nav-menu-mobile" class="block md:hidden relative">
             <input
+                id="menu-input"
                 type="checkbox"
                 name="hamburger-input"
                 id="hamburger-input"
                 class="peer hidden"
             />
 
-            <!-- Do this thios way so that we can correctly use the sibling selector -->
+            <!-- Do this this way so that we can correctly use the sibling selector -->
             <div class="items-center hidden peer-checked:inline-flex">
                 <Close />
             </div>
@@ -46,3 +47,34 @@ const { pages, customClasses } = Astro.props;
         </a>
     </nav>
 </header>
+<nav id="menu-items" class="transition-[height] hidden h-0 md:hidden px-20">
+    <ul
+        class="flex flex-col gap-2 items-center text-2xl border-y py-1 border-opacity-95 border-color-4"
+    >
+        {
+            pages.map((page) => (
+                <NavLink
+                    page={page}
+                    linkClasses="hover:bg-opacity-35 hover:bg-color-4 w-full h-full text-center py-2 px-4 rounded-md"
+                />
+            ))
+        }
+    </ul>
+</nav>
+
+<script lang="ts">
+    const elem = document.querySelector("#menu-input");
+
+    if (elem) {
+        elem.checked = false;
+
+        elem?.addEventListener("click", () => {
+            const mobileNav = document.querySelector("#menu-items");
+
+            if (!mobileNav) return;
+
+            mobileNav.classList.toggle("h-0");
+            mobileNav.classList.toggle("hidden");
+        });
+    }
+</script>
diff --git a/src/components/AppBar/Nav/Link.astro b/src/components/AppBar/Nav/Link.astro
@@ -21,20 +21,22 @@ export const backgroundColorForPageLink = (
 
 export const hasIcon = (
     page: Page,
-): page is Omit<Page, "icon"> & { icon: NonNullable<Page["icon"]> } => {
+): page is Page & { icon: NonNullable<Page["icon"]> } => {
     return page.icon !== undefined && page.icon.enabled;
 };
 
 interface Props {
     page: Page;
+    linkClasses?: string;
 }
 
-const { page } = Astro.props;
+const { page, linkClasses } = Astro.props;
 ---
 
 <li
     class:list={[
         "h-full flex flex-col justify-center p-1",
+        linkClasses,
         { ...backgroundColorForPageLink(Astro.url, page) },
     ]}
 >