xgarcia17 · xgarcia17 · May 5, 2026 · May 4, 2026 · May 4, 2026 · May 5, 2026
@@ -4,12 +4,25 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 :root {
   /* background colors */
   --bg-primary: #b0c3a3;
-  --bg-secondary: #4b5743;
+  --bg-secondary: #122918;
   --bg-text: #f5fdef;
 
+  --border-color: #4b5743;
+
   /* text colors */
   --text-primary: #171717;
   --text-secondary: #525252;
@@ -26,11 +39,13 @@
   --bg-secondary: #0e3b1a;
   --bg-text: #4b5743;
 
+  --border-color: #0e3b1a;
+
   /* text colors */
   --text-primary: #ededed;
   --text-secondary: #a3a3a3;
   --text-title: #efbf04;
-  --text-title-shadow: #9F7F03;
+  --text-title-shadow: #9f7f03;
   --text-muted: #737373;
   --text-brand: #c084fc;
   --text-danger: #f87171;
@@ -48,8 +63,8 @@
     background-color: var(--bg-text);
   }
 
-  .border-secondary {
-    border-color: var(--bg-secondary);
+  .border-color {
+    border-color: var(--border-color);
   }
 
   /* text colors */
@@ -71,12 +86,17 @@
   .text-danger {
     color: var(--text-danger);
   }
+  .text-navbar-active {
+    color: #efbf04;
+  }
+  .text-navbar-inactive {
+    color: #9F7F03;
+  }
 
   .title-shadow {
     -webkit-text-stroke-width: 2px;
     -webkit-text-stroke-color: var(--text-title-shadow);
   }
-
 
   /* screen responsiveness */
   .h1-responsive {

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import { ThemeProvider } from "@/components/theme-provider";
+import NavBar from "@/components/navbar";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -13,7 +14,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning className="bg-primary">
+    <html lang="en" suppressHydrationWarning className="bg-primary w-full">
       <head>
         <script
           dangerouslySetInnerHTML={{
@@ -34,8 +35,11 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body>
-        <ThemeProvider>{children}</ThemeProvider>
+      <body className="min-h-screen w-full flex flex-col">
+        <ThemeProvider>
+          <NavBar />
+          <main className="flex-1 w-full flex flex-col">{children}</main>
+        </ThemeProvider>
       </body>
     </html>
   );

@@ -0,0 +1,3 @@
+export default function GlobalLeaderboardPage() {
+  return <h1>This is the global leaderboard page</h1>;
+}
@@ -1,13 +1,10 @@
-export default async function Home() {
+export default async function HomePage() {
   return (
-    <div
-      className="padding-responsive min-h-screen flex flex-col items-center"
-      style={{ paddingTop: "20vh" }}
-    >
+    <div className="padding-responsive flex flex-col items-center">
       <h1 className="text-center h1-responsive font-bold text-title m-12 title-shadow">
         OnPar
       </h1>
-      <div className="mx-auto w-[80%] border-[5px] rounded- bg-text border-secondary min-h-[30vh] flex items-center">
+      <div className="mx-auto w-[80%] border-[5px] rounded bg-text border-color min-h-[30vh] flex items-center mb-10">
         <p className="text-center text-primary text-lg md:text-xl p-4">
           Welcome to <em>OnPar</em>! <em>OnPar</em>&nbsp;is an application for
           you and your friends to gameify your goal-tracking in a golf-inspired

@@ -0,0 +1,3 @@
+export default function TournamentsPage() {
+  return <h1>This is the tournaments page</h1>;
+}
@@ -0,0 +1,93 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const MINI_BUTTON_CLASSNAME =
+  "flex-shrink-0 flex items-center justify-center gap-2 px-3 py-2 font-medium hover:scale-110 transition cursor-pointer";
+
+const links = [
+  { href: "/tournaments", label: "Your Tournaments" },
+  { href: "/leaderboard", label: "Leaderboard" },
+];
+
+export default function NavBar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <nav className="w-full bg-secondary flex-shrink-0">
+      <div className="w-full px-[clamp(1rem,5vw,4rem)] py-3 flex items-center justify-between">
+        {/* Title */}
+        <Link href="/" aria-label="Home">
+          <span className="block text-3xl font-bold text-navbar-active mr-[20px] leading-[0.85] hover:scale-110 transition">
+            OnPar
+          </span>
+        </Link>
+
+        {/* Desktop links */}
+        <div className="hidden sm:flex items-center gap-[clamp(0.5rem,2vw,1.5rem)] text-sm">
+          {links.map((link) => {
+            const isActive = pathname.startsWith(link.href);
+
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={
+                  isActive
+                    ? `${MINI_BUTTON_CLASSNAME} text-navbar-active`
+                    : `${MINI_BUTTON_CLASSNAME} text-navbar-inactive`
+                }
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+          {/* User Portal Button */}
+          <div>User Placeholder</div>
+        </div>
+
+        {/* Hamburger button */}
+        <button
+          type="button"
+          aria-label="Toggle navigation menu"
+          aria-expanded={open}
+          onClick={() => setOpen((prev) => !prev)}
+          className={`sm:hidden text-3xl transition ${
+            open ? "text-navbar-inactive" : "text-navbar-active"
+          }`}
+        >
+          ☰
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="md:hidden px-[clamp(1rem,5vw,4rem)] pb-4 flex flex-col items-center gap-2 text-sm">
+          {links.map((link) => {
+            const isActive = pathname.startsWith(link.href);
+
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setOpen(false)}
+                className={
+                  isActive
+                    ? `${MINI_BUTTON_CLASSNAME} text-navbar-active`
+                    : `${MINI_BUTTON_CLASSNAME} text-navbar-inactive`
+                }
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+          {/* User Portal Button */}
+          <div>User Placeholder</div>
+        </div>
+      )}
+    </nav>
+  );
+}