Issue 2 create navbar component

client/src/components/main/Navbar.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function Navbar() {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const navItems = [
+    { href: "/", label: "Home" },
+    { href: "/about", label: "About Us" },
+    { href: "/events", label: "Events" },
+    { href: "/games", label: "Game Showcase" },
+    { href: "/artwork", label: "Art Showcase" },
+  ];
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 w-full border-b border-border/20 bg-background font-jersey10">
+        <div className="mx-auto flex h-[104px] max-w-[1440px] items-center justify-between rounded-[5px] px-20">
+          <Link href="/" className="flex flex-none items-center gap-3 text-2xl">
+            <Image
+              src="/game_dev_club_logo.svg"
+              alt="logo"
+              width={32}
+              height={32}
+              className="h-8 w-8"
+            />
+            <span className="sr-only">Game Development UWA</span>
+            <span aria-hidden="true" className="whitespace-nowrap md:hidden">
+              GDUWA
+            </span>
+            <span
+              aria-hidden="true"
+              className="hidden whitespace-nowrap md:inline"
+            >
+              Game Development UWA
+            </span>
+          </Link>
+
+          <nav className="ml-auto hidden flex-none gap-10 text-xl md:flex">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="whitespace-nowrap text-foreground/90 transition-colors duration-150 hover:text-primary"
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+
+          <div className="ml-auto flex items-center">
+            <div className="relative md:hidden">
+              <button
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                className="flex items-center justify-center p-2"
+                aria-label="Toggle menu"
+              >
+                <Menu className="h-6 w-6" />
+              </button>
+
+              {isDropdownOpen && (
+                <div className="absolute right-0 top-full z-50 mt-2 w-52 flex-col rounded border border-border/20 bg-popover">
+                  {navItems.map((item) => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={() => setIsDropdownOpen(false)}
+                      className="block whitespace-nowrap px-4 py-3 text-lg transition-colors duration-150 hover:bg-white/10"
+                    >
+                      {item.label}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+    </>
+  );
+}

client/src/pages/_app.tsx

@@ -5,6 +5,8 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 import { Fira_Code, Inter as FontSans, Jersey_10 } from "next/font/google";
 
+import Navbar from "@/components/main/Navbar";
+
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
@@ -32,6 +34,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <main
         className={`font-sans ` + fonts.map((font) => font.variable).join(" ")}
       >
+        <Navbar />
         <Component {...pageProps} />
       </main>
     </QueryClientProvider>