NAVBAR

src/components/common/ButtonFd.astro

@@ -46,7 +46,7 @@ import { cn } from '@/lib/utils';
 export type ColorName = 'light-beige' | 'light-pink' | 'vivid-pink' | 'light-blue' | 'light-green' | 'black' | 'beige' | 'white';
 
 export interface Props {
-  variant?: 'fill' | 'stroke';
+  variant?: 'fill' | 'stroke' | 'stroke-no-shadow';
   color?: ColorName;
   size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
@@ -360,6 +360,20 @@ const currentSize = sizeConfig[size];
     --disabled-text: rgba(18, 18, 18, 0.2);
     --disabled-shadow: rgba(18, 18, 18, 0.2);
   }
+
+  .button-container--stroke-no-shadow.button-container--black {
+    --default-fill: transparent;
+    --default-stroke: #121212;
+    --default-text: #121212;
+    --default-shadow: transparent;
+    --hover-fill: #121212;
+    --hover-stroke: transparent;
+    --hover-text: #FFFFFF;
+    --hover-shadow: transparent;
+    --disabled-stroke: rgba(18, 18, 18, 0.2);
+    --disabled-text: rgba(18, 18, 18, 0.2);
+    --disabled-shadow: transparent;
+  }
 
   .button-container--beige {
     --default-fill: #fff0d2;

src/components/firstdate/Navbar.astro

@@ -1,9 +1,67 @@
-<nav class="flex items-center w-full justify-between bg-white p-1">
+---
+import ButtonFd from "@common/ButtonFd.astro"
+---
+
+<nav id="main-nav" class="relative flex items-center w-full justify-between bg-white p-1">
   <div></div>
-  <a href="/firstdate/home/">
-    <img src="/common/logo_freshmenfest.svg" alt="logo" />
-  </a>
-  <button>
+  <img src="/common/logo_freshmenfest.svg" alt="logo" />
+  <button id="hamburger-button-main" aria-label="Toggle menu" aria-controls="nav-menu" aria-expanded="false">
     <img src="/common/hamburger.svg" alt="menu" class="h-3 w-auto -translate-x-4" />
   </button>
-</nav>
+</nav>
+<nav id="nav-menu" class="hidden fixed inset-0 min-h-screen z-50 bg-white">
+  <div class="relative flex items-center w-full justify-between bg-white p-1">
+    <div></div>
+    <img src="/common/logo_freshmenfest.svg" alt="logo" />
+    <button id="hamburger-button-menu">
+      <img src="/common/hamburger.svg" alt="menu" class="h-3 w-auto -translate-x-4" />
+    </button>
+  </div>
+  <div class="flex flex-col px-6">
+    <div class="flex w-full justify-center">
+      <hr class="w-full h-[3px] bg-black"/>
+    </div>
+    <ul class="text-black flex flex-col gap-y-6 text-xl my-6">
+      <li>
+        <a href="/firstdate/home">หน้าหลัก</a>
+      </li>
+      <li>
+        <a href="/cufest/">CU FEST</a>
+      </li>
+      <li>
+        <a href="/rpkm/home">รับเพื่อนก้าวใหม่</a>
+      </li>
+      <li>
+        <a href="/firstdate/profile">PROFILE</a>
+      </li>
+      <li>
+        <a href="/firstdate/qrcode">QR CODE</a>
+      </li>
+    </ul>
+    <div class="flex w-full justify-center mb-6">
+      <hr class="w-full h-[3px] bg-black"/>
+    </div>
+    <div class="flex w-full justify-center text-black">
+      <ButtonFd variant="stroke-no-shadow" color="black" href="/logout">
+        ออกจากระบบ
+      </ButtonFd>
+    </div>
+  </div>
+</nav>
+
+<script is:inline type="module">
+  document.addEventListener("DOMContentLoaded", () => {
+    const hamburgerButton = document.getElementById("hamburger-button-main");
+    const hamburgerButtonMenu = document.getElementById("hamburger-button-menu");
+    const navMenu = document.getElementById("nav-menu");
+
+    hamburgerButton.addEventListener("click", () => {
+      navMenu.classList.toggle("hidden");
+    });
+
+    hamburgerButtonMenu.addEventListener("click", () => {
+      navMenu.classList.toggle("hidden");
+
+    });
+  });
+</script>

src/layouts/firstdate/WithNavbar.astro

@@ -2,6 +2,7 @@
 import "@/styles/global.css";
 import Navbar from "@firstdate/Navbar.astro";
 import Footer from "@firstdate/Footer.astro";
+import { ClientRouter } from "astro:transitions";
 
 interface Props {
   title?: string;
@@ -20,6 +21,7 @@ const { title, description } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <meta name="description" content={description} />
+    <ClientRouter />
   </head>
   <body class="min-h-screen min-w-screen bg-slate-500">
     <div class="min-h-screen max-w-[440px] mx-auto flex flex-col bg-[url(/firstdate/main-bg.png)] bg-cover bg-center bg-no-repeat text-white ">