Changed navbar <p> to Links, added mobile view scaffold & react icons

Author: Shinetopia

client/next.config.mjs

@@ -7,6 +7,9 @@ const isWindowsDevContainer = () =>
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  images: {
+    domains: ["squadrone.com.au"],
+  },
   reactStrictMode: true,
   // dumb fix for windows docker
   webpack: isWindowsDevContainer()

client/package-lock.json

@@ -27,6 +27,7 @@
     "next": "15.3.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

client/package.json

@@ -1,20 +1,85 @@
-export function Navbar() {
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { FiAlignJustify, FiX } from "react-icons/fi";
+
+export default function Navbar() {
+  const router = useRouter();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const handleNav = () => {
+    setMenuOpen(!menuOpen);
+  };
   return (
-    <div className="medium-sm fixed left-0 top-0 flex h-16 w-screen items-center justify-between bg-light">
-      {/* Logo container */}
-      <div className="ml-10 rounded p-2 text-center">LOGO</div>
+    <>
+      <nav className="medium-sm fixed left-0 top-0 flex h-16 w-screen items-center justify-between bg-light">
+        {/* Logo container */}
+        {/* <div className="ml-10 rounded p-2 text-center">LOGO</div> */}
+        <div className="relative ml-10 h-10 w-28">
+          <Image
+            className="object-contain"
+            src="https://squadrone.com.au/wp-content/uploads/2024/11/squadrone-logo-01-scaled.webp"
+            alt="Squadrone Logo"
+            width={2560}
+            height={889}
+          />
+        </div>
 
-      {/* Navbar traversal options container */}
-      <div className="flex items-center gap-8">
-        <div className="p-2 text-primary">Home</div>
-        <div className="p-2 text-dark">Schedule</div>
-        <div className="p-2 text-dark">Format & Rules</div>
-        <div className="p-2 text-dark">Sponsor & Guest</div>
-        <div className="p-2 text-dark">Leaderboard</div>
-        <div className="mr-10 rounded-2xl bg-primary p-3 px-6 font-semibold text-light">
-          View Live Results
+        {/* Navbar traversal options container */}
+        <div className="hidden items-center gap-8 sm:flex">
+          <Link href="/" className="nav-link-active">
+            Home
+          </Link>
+          <Link href="/schedule" className="nav-link">
+            Schedule
+          </Link>
+          <Link href="/format-rules" className="nav-link text-dark">
+            Format & Rules
+          </Link>
+          <Link href="/sponsor-guest" className="nav-link text-dark">
+            Sponsor & Guest
+          </Link>
+          <Link href="/leaderboard" className="nav-link text-dark">
+            Leaderboard
+          </Link>
+          <div className="mr-10 rounded-2xl bg-primary p-3 px-6 font-semibold text-light">
+            View Live Results
+          </div>
+        </div>
+        <div onClick={handleNav} className="mr-5 cursor-pointer sm:hidden">
+          <FiAlignJustify size={35} />
+        </div>
+      </nav>
+      <div
+        className={
+          menuOpen
+            ? "fixed right-0 top-0 h-screen w-[65%] bg-light p-10 shadow-xl duration-500 ease-out"
+            : "fixed right-[-100%] duration-500 ease-in"
+        }
+      >
+        <div className="flex w-full items-center justify-end">
+          <div onClick={handleNav} className="cursor-pointer">
+            <FiX size={35} />
+          </div>
+        </div>
+        <div className="flex flex-col py-6">
+          <Link href="/" className="nav-link-active">
+            Home
+          </Link>
+          <Link href="/schedule" className="nav-link">
+            Schedule
+          </Link>
+          <Link href="/format-rules" className="nav-link text-dark">
+            Format & Rules
+          </Link>
+          <Link href="/sponsor-guest" className="nav-link text-dark">
+            Sponsor & Guest
+          </Link>
+          <Link href="/leaderboard" className="nav-link text-dark">
+            Leaderboard
+          </Link>
         </div>
       </div>
-    </div>
+    </>
   );
 }

client/src/components/ui/navbar.tsx

@@ -1,11 +1,11 @@
 import { Inter as FontSans } from "next/font/google";
 import { useState } from "react";
 
-import { Navbar } from "@/components/ui/navbar";
 import { usePings } from "@/hooks/pings";
 import { cn } from "@/lib/utils";
 
 import { Button } from "../components/ui/button";
+import Navbar from "../components/ui/navbar";
 
 const fontSans = FontSans({
   subsets: ["latin"],

client/src/pages/index.tsx

@@ -100,3 +100,12 @@
     @apply font-worksans text-[16px] font-normal;
   }
 }
+
+@layer components {
+  .nav-link {
+    @apply text-dark hover:text-primary transition-colors duration-200;
+  }
+  .nav-link-active {
+    @apply text-primary;
+  }
+}