init app

components/NavbarMenu.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { logout } from "@/app/actions/auth";
+
+export function NavbarMenu({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      {/* Desktop menu */}
+      <div className="hidden sm:flex items-center gap-4">
+        <span className="text-sm text-muted font-mono">{email}</span>
+        <Link href="/change-password" className="text-sm text-accent hover:text-accent-hover font-medium">
+          Change Password
+        </Link>
+        <form action={logout}>
+          <button type="submit" className="text-sm text-danger hover:text-red-700 font-medium cursor-pointer">
+            Logout
+          </button>
+        </form>
+      </div>
+
+      {/* Mobile hamburger */}
+      <div className="sm:hidden">
+        <button
+          type="button"
+          onClick={() => setOpen(!open)}
+          className="p-2 rounded-lg hover:bg-surface transition-colors cursor-pointer"
+          aria-label="Menu"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            {open ? (
+              <>
+                <line x1="4" y1="4" x2="16" y2="16" />
+                <line x1="16" y1="4" x2="4" y2="16" />
+              </>
+            ) : (
+              <>
+                <line x1="3" y1="5" x2="17" y2="5" />
+                <line x1="3" y1="10" x2="17" y2="10" />
+                <line x1="3" y1="15" x2="17" y2="15" />
+              </>
+            )}
+          </svg>
+        </button>
+
+        {/* Mobile dropdown */}
+        {open && (
+          <div className="absolute right-4 top-14 bg-white border-2 border-border rounded-xl shadow-lg p-4 flex flex-col gap-3 min-w-[180px]">
+            <span className="text-sm text-muted font-mono truncate">{email}</span>
+            <Link href="/change-password" onClick={() => setOpen(false)} className="text-sm text-accent hover:text-accent-hover font-medium">
+              Change Password
+            </Link>
+            <form action={logout}>
+              <button type="submit" className="text-sm text-danger hover:text-red-700 font-medium cursor-pointer">
+                Logout
+              </button>
+            </form>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}