feat: adiciona menu para dispositivos mobile

Guardians-DSC · Jan 30, 2025 · bae36bb · bae36bb
1 parent dab8289
commit bae36bb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
@@ -4,6 +4,8 @@ import DesktopNav from "../navigation/DesktopNav.astro";
 import MobileNav from "../navigation/MobileNav.astro";
 import type { NavLink } from "../navigation/NavLink";
 
+import List from "phosphor-astro/List.astro"
+
 const navigationLinks: NavLink[] = [
   {
     label: "home",
@@ -31,6 +33,8 @@ const navigationLinks: NavLink[] = [
 
       <!-- Navbar -->
       <DesktopNav links={navigationLinks} />
+      <MobileNav links={navigationLinks} />
+      <button class="block md:hidden" onclick="toggleNavigation()"><List class="w-8" /></button>
     </Fragment>
   </Container>
 </header>
diff --git a/src/components/navigation/DesktopNav.astro b/src/components/navigation/DesktopNav.astro
@@ -5,7 +5,7 @@ const { links } = Astro.props as NavigationProps;
 ---
 
 <nav>
-  <ul class="flex list-none gap-3">
+  <ul class="list-none gap-4 hidden md:flex">
     {
       links.map(({ url, label }) => (
         <li class="hover:text-accent-500">

diff --git a/src/components/navigation/MobileNav.astro b/src/components/navigation/MobileNav.astro
@@ -4,7 +4,7 @@ import type { NavigationProps } from "./NavLink";
 const { links } = Astro.props as NavigationProps;
 ---
 
-<nav class="fixed top-0 left-0 w-screen h-screen overflow-hidden bg-accent-950">
+<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">
     {
       links.map(({ url, label }) => (
@@ -14,7 +14,4 @@ const { links } = Astro.props as NavigationProps;
       ))
     }
   </ul>
-  <button class="absolute top-4 right-4 p-4 rounded-xl active:bg-primary-950">
-    X
-  </button>
 </nav>