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 <[email protected]>
shivansh-bhatnagar18 · Jun 1, 2024 · 2840c09 · 2840c09
1 parent f05595c
commit 2840c09
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 20 deletions.
diff --git 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
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -17,19 +17,8 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
-}
-
 body {
     margin: 0;
-    display: flex;
-    place-items: center;
     min-width: 320px;
     min-height: 100vh;
 }

diff --git a/frontend/src/library/Navbar.tsx 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
@@ -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>