From 5e27ae639d5cbd6eeb106706fb6320ed775a9c4b Mon Sep 17 00:00:00 2001
From: Sagnik Mandal <acriticalcynic@outlook.com>
Date: Thu, 6 Jun 2024 18:29:06 +0530
Subject: [PATCH] frontend: Add Navbar

This adds a UNO themed navbar to the frontend. The navbar is responsive
and collapses into a hamburger menu on smaller screens.

It can have multiple links, which can be defined on use.

Fixes #19

Signed-off-by: Sagnik Mandal <acriticalcynic@outlook.com>
---
 frontend/package.json            |  1 +
 frontend/src/Navbar.tsx          |  7 -----
 frontend/src/library/Navbar.tsx  | 50 ++++++++++++++++++++++++++++++++
 frontend/src/pages/AppLayout.tsx | 13 +++++++--
 4 files changed, 62 insertions(+), 9 deletions(-)
 delete mode 100644 frontend/src/Navbar.tsx
 create mode 100644 frontend/src/library/Navbar.tsx

diff --git a/frontend/package.json b/frontend/package.json
index e8d8ad3..93736e0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "fix-format": "prettier --write src"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
deleted file mode 100644
index 753ba46..0000000
--- a/frontend/src/Navbar.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import './index.css';
-
-function Navbar() {
-    return <div className="flex flex-row">Navbar</div>;
-}
-
-export default Navbar;
diff --git a/frontend/src/library/Navbar.tsx b/frontend/src/library/Navbar.tsx
new file mode 100644
index 0000000..2fd6400
--- /dev/null
+++ b/frontend/src/library/Navbar.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
+import { NavbarLink } from '../pages/AppLayout';
+
+function NavbarItem({ link }: { link: NavbarLink }) {
+    return (
+        <Link
+            to={link.path}
+            className="text-[#ECD407] font-bold text-xl hover:underline"
+        >
+            {link.label}
+        </Link>
+    );
+}
+
+function Navbar({ links }: { links: NavbarLink[] }) {
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    return (
+        <div className="flex flex-row sticky top-0 bg-[#D72600] p-3 shadow-md justify-between items-center">
+            <div className="text-[#ECD407] tracking-tight font-black text-4xl drop-shadow-[-7px_0px_0px_rgba(0,0,0,1)]">
+                <Link to="/">UNO</Link>
+            </div>
+            <div className="hidden md:flex space-x-4">
+                {links.map((link, index) => (
+                    <NavbarItem key={index} link={link} />
+                ))}
+            </div>
+            <div className="md:hidden flex items-center">
+                <button onClick={() => setMenuOpen(!menuOpen)}>
+                    {menuOpen ? (
+                        <XMarkIcon className="w-5 h-5 text-[#ECD407]" />
+                    ) : (
+                        <Bars3Icon className="w-6 h-6 text-[#ECD407]" />
+                    )}
+                </button>
+            </div>
+            {menuOpen && (
+                <div className="absolute top-16 left-0 w-full bg-[#D72600] p-3 flex flex-col space-y-4 md:hidden">
+                    {links.map((link, index) => (
+                        <NavbarItem key={index} link={link} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default Navbar;
diff --git a/frontend/src/pages/AppLayout.tsx b/frontend/src/pages/AppLayout.tsx
index 26aaa2e..e8e77e5 100644
--- a/frontend/src/pages/AppLayout.tsx
+++ b/frontend/src/pages/AppLayout.tsx
@@ -1,10 +1,19 @@
 import { Outlet } from 'react-router-dom';
-import Navbar from '../Navbar';
+import Navbar from '../library/Navbar';
+
+export type NavbarLink = {
+    path: string;
+    label: string;
+};
 
 function AppLayout() {
+    const links: NavbarLink[] = [
+        { path: '/about', label: 'About' },
+        { path: '/play', label: 'Play' },
+    ];
     return (
         <div>
-            <Navbar />
+            <Navbar links={links} />
             <Outlet />
             {/* todo: Add a footer component */}
         </div>