frontend: navbar with its modules css

this commit adds a nabar.

fixes: shivansh-bhatnagar18#19

frontend/package.json

@@ -16,6 +16,7 @@
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "tailwindcss": "^3.4.3"
   },

frontend/src/Navbar.module.css

@@ -0,0 +1,65 @@
+body {
+    transition: margin-right 0.3s;
+    margin-right: 0;
+}
+
+body.menu-open {
+    margin-right: 250px;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    right: -250px;
+    width: 250px;
+    height: 100%;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: right 0.3s;
+    z-index: 1000;
+}
+
+.sidebar.open {
+    right: 0;
+}
+
+.ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.li {
+    padding: 8px 16px;
+    text-align: left;
+    color: #818181;
+}
+
+.li:hover {
+    background-color: #575757;
+    color: #ffffff;
+}
+
+.a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+
+.a.active {
+    color: yellow;
+}
+
+.menuButton {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1100;
+}
+
+.hidden {
+    display: none;
+}
+
+.mainContent {
+    transition: margin-right 0.3s;
+}

frontend/src/Navbar.tsx

@@ -1,7 +1,100 @@
-import './index.css';
+import { useState, useEffect } from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import { FaBars, FaTimes } from 'react-icons/fa';
+import styles from './Navbar.module.css';
 
-function Navbar() {
-    return <div className="flex flex-row">Navbar</div>;
+interface NavbarProps {
+    logoSrc?: string;
+    bgColorFrom?: string;
+    bgColorTo?: string;
+    navLinks?: Array<{ title: string; link: string }>;
+}
+
+function Navbar(props: NavbarProps) {
+    const {
+        logoSrc = './assets/uno_csoc.png', // Default logo
+        navLinks = [
+            { title: 'Home', link: '/' },
+            { title: 'Play', link: '/play' },
+            { title: 'Game', link: '/game' },
+            { title: 'About', link: '/about' },
+        ], // Default navigation
+        bgColorFrom = '#999999',
+        bgColorTo = '#333333',
+        // Default background colors
+    } = props;
+
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        document.body.classList.toggle('menu-open', open);
+    }, [open]);
+
+    const handleMenu = () => {
+        setOpen((prev) => !prev);
+    };
+    const background = `linear-gradient(to right, ${bgColorFrom}, ${bgColorTo})`;
+
+    return (
+        <header className="sticky top-0 z-50 flex flex-row">
+            <nav
+                className="bg-opacity-90 border-gray-200 px-4 lg:px-6 py-2.5 w-full"
+                style={{ background }}
+            >
+                <div className="flex flex-wrap items-center justify-between max-w-screen-xl mx-auto">
+                    <Link to="/" className="flex items-center">
+                        <img src={logoSrc} className="h-12 mr-3" alt="Logo" />
+                    </Link>
+                    <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
+                        <ul className="flex flex-col mt-4 font-medium md:flex-row md:space-x-8 md:mt-0">
+                            {navLinks.map((link, index) => (
+                                <li key={index}>
+                                    <NavLink
+                                        to={link.link}
+                                        className={({ isActive }) =>
+                                            `block py-2 pr-4 pl-3 duration-200 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-yellow-400 lg:p-0 ${isActive ? 'text-yellow-400' : 'text-gray-300'}`
+                                        }
+                                    >
+                                        {link.title}
+                                    </NavLink>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                    <div className={`flex md:hidden ${styles.menuButton}`}>
+                        <button
+                            type="button"
+                            onClick={handleMenu}
+                            className={`inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white`}
+                        >
+                            <span className="sr-only">Toggle main menu</span>
+                            {open ? <FaTimes /> : <FaBars />}
+                        </button>
+                    </div>
+                </div>
+            </nav>
+            <div
+                id="sidebar"
+                className={`${styles.sidebar} ${open ? styles.open : ''}`}
+            >
+                <ul className={styles.ul}>
+                    {navLinks.map((link, index) => (
+                        <li key={index} className={styles.li}>
+                            <NavLink
+                                to={link.link}
+                                className={({ isActive }) =>
+                                    `${styles.a} ${isActive ? styles.active : ''}`
+                                }
+                                onClick={() => setOpen(false)}
+                            >
+                                {link.title}
+                            </NavLink>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </header>
+    );
 }
 
 export default Navbar;

frontend/src/index.css

@@ -16,6 +16,9 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+#root {
+    width: 100%;
+}
 
 a {
     font-weight: 500;
@@ -29,7 +32,6 @@ a:hover {
 body {
     margin: 0;
     display: flex;
-    place-items: center;
     min-width: 320px;
     min-height: 100vh;
 }

frontend/src/pages/AppLayout.tsx

@@ -1,10 +1,26 @@
 import { Outlet } from 'react-router-dom';
 import Navbar from '../Navbar';
+import uno_csoc from '../assets/uno_csoc.png';
 
 function AppLayout() {
+    const logoSrc = uno_csoc; // give path of the logo you want
+    const navLinks = [
+        { title: 'Home', link: '/' },
+        { title: 'Play Options', link: '/play' },
+        { title: 'Game', link: '/game' },
+        { title: 'About', link: '/about' },
+    ];
+    const bgColorFrom = '#999999';
+    const bgColorTo = '#333333'; // Example background colors
+
     return (
         <div>
-            <Navbar />
+            <Navbar
+                logoSrc={logoSrc}
+                navLinks={navLinks}
+                bgColorFrom={bgColorFrom}
+                bgColorTo={bgColorTo}
+            />
             <Outlet />
             {/* todo: Add a footer component */}
         </div>