feat: adiciona toggle da navegação mobile

Author: dougdomingos

src/components/layout/Header.astro

@@ -5,6 +5,7 @@ import MobileNav from "../navigation/MobileNav.astro";
 import type { NavLink } from "../navigation/NavLink";
 
 import List from "phosphor-astro/List.astro"
+import ToggleMobileNav from "../navigation/ToggleMobileNav.astro";
 
 const navigationLinks: NavLink[] = [
   {
@@ -34,7 +35,7 @@ const navigationLinks: NavLink[] = [
       <!-- Navbar -->
       <DesktopNav links={navigationLinks} />
       <MobileNav links={navigationLinks} />
-      <button class="block md:hidden" onclick="toggleNavigation()"><List class="w-8" /></button>
+      <ToggleMobileNav />
     </Fragment>
   </Container>
 </header>

src/components/navigation/MobileNav.astro

@@ -4,8 +4,13 @@ import type { NavigationProps } from "./NavLink";
 const { links } = Astro.props as NavigationProps;
 ---
 
-<nav class="absolute top-16 left-0 w-screen py-4 overflow-hidden bg-accent-950 block md:hidden">
-  <ul class="flex flex-col justify-center items-center h-full list-none gap-3">
+<nav
+  id="mobile-navigation"
+  class="absolute top-16 left-0 w-screen max-h-0 overflow-hidden bg-accent-950 block md:hidden transition-[max-height] duration-300"
+>
+  <ul
+    class="flex flex-col justify-center items-center h-full list-none gap-3 py-4"
+  >
     {
       links.map(({ url, label }) => (
         <li class="hover:text-accent-500">

src/components/navigation/ToggleMobileNav.astro

@@ -0,0 +1,22 @@
+---
+import List from "phosphor-astro/List.astro";
+---
+
+<button id="mobile-toggle-btn" class="block md:hidden"
+  ><List class="w-8" /></button
+>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const button = document.getElementById("mobile-toggle-btn")!;
+    const navigation = document.getElementById("mobile-navigation")!;
+
+    button.addEventListener("click", () => {
+      if (navigation.classList.contains("max-h-0")) {
+        navigation.classList.replace("max-h-0", "max-h-[100px]");
+      } else {
+        navigation.classList.replace("max-h-[100px]", "max-h-0");
+      }
+    });
+  });
+</script>