diff --git a/client/public/game_dev_club_logo.svg b/client/public/game_dev_club_logo.svg new file mode 100644 index 0000000..072fb6d --- /dev/null +++ b/client/public/game_dev_club_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/components/main/Navbar.tsx b/client/src/components/main/Navbar.tsx new file mode 100644 index 0000000..9f8daa4 --- /dev/null +++ b/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 ( + <> +
+
+ + logo + Game Development UWA + + + + + + +
+
+ + + {isDropdownOpen && ( +
+ {navItems.map((item) => ( + setIsDropdownOpen(false)} + className="block whitespace-nowrap px-4 py-3 text-lg transition-colors duration-150 hover:bg-white/10" + > + {item.label} + + ))} +
+ )} +
+
+
+
+ + ); +} diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx index d48da23..eb47676 100644 --- a/client/src/pages/_app.tsx +++ b/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) {
font.variable).join(" ")} > +