♻️ Refactor Navbar

xdaruis · Aug 24, 2024 · 45750b1 · 45750b1
1 parent 2ff2d2a
commit 45750b1
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 62 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -5,10 +5,25 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    >
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
+    >
     <title>Elections</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+      crossorigin="anonymous">
+    </script>
   </body>
 </html>
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -25,7 +25,7 @@ const router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: <Home/>,
+        element: <Home />
       },
       {
         path: '/login',
@@ -39,9 +39,9 @@ const router = createBrowserRouter([
   },
   {
     path: '*',
-    element: <NotFound />,
+    element: <NotFound />
   }
-])
+]);
 
 const App = () => {
   const dispatch = useDispatch();

diff --git a/frontend/src/components/Layout/index.js b/frontend/src/components/Layout/index.js
@@ -2,13 +2,13 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Footer from '../Footer.js';
-import NavigationBar from '../NavigationBar.js';
+import Navbar from '../Navbar.js';
 import './styles.css';
 
 const Layout = () => {
   return (
     <div className="holy-grail-flexbox">
-      <NavigationBar />
+      <Navbar />
       <main className="main-content">
         <Outlet />
       </main>

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, NavLink, useNavigate } from 'react-router-dom';
+
+import { logout } from '../features/auth.js';
+import CustomDropdown from './ui/CustomDropdown/index.jsx';
+import CustomNavLink from './ui/CustomNavLink.jsx';
+
+const Navbar = () => {
+  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const handleLogout = (e) => {
+    e.preventDefault();
+    try {
+      dispatch(logout());
+      navigate('/login');
+    } catch (error) {
+      console.error('Logout failed', error);
+    }
+  };
+
+  const mainItems = [
+    { label: 'Profile', path: '/profile' },
+    { label: 'TBA', path: '/' }
+  ];
+
+  const additionalItems = [
+    { label: 'Logout', onClick: handleLogout, isButton: true }
+  ];
+
+  const toggleProps = {
+    className: '',
+    id: 'user-dropdown',
+    icon: <i className="bi bi-person-circle fs-4"></i>
+  };
+
+  return (
+    <nav
+      className="header navbar navbar-expand-lg navbar-light bg-light
+        shadow-sm"
+    >
+      <div className="container-fluid">
+        <NavLink className="navbar-brand" to="/">
+          Elections
+        </NavLink>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarNav">
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item">
+              <CustomNavLink label="Home" linkTo="/" />
+            </li>
+            <li className="nav-item">
+              <CustomNavLink label="TBA" linkTo="/TBA" />
+            </li>
+          </ul>
+          {isAuthenticated ? (
+            <CustomDropdown
+              mainItems={mainItems}
+              additionalItems={additionalItems}
+              toggleProps={toggleProps}
+            />
+          ) : (
+            <Link className="nav-link" to="/login">
+              Login
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/frontend/src/components/NavigationBar.js b/frontend/src/components/NavigationBar.js
diff --git a/frontend/src/components/ui/CustomDropdown/index.jsx b/frontend/src/components/ui/CustomDropdown/index.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './styles.css';
+
+function CustomDropdown({ mainItems, additionalItems = [], toggleProps }) {
+  return (
+    <div className="dropdown">
+      <button
+        className={`btn btn-link dropdown-toggle bg-transparent
+          border-0 p-0 ${toggleProps.className}`}
+        id={toggleProps.id || 'user-dropdown'}
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        {toggleProps.icon}
+      </button>
+      <ul
+        className="dropdown-menu dropdown-menu-end"
+        aria-labelledby={toggleProps.id || 'user-dropdown'}
+      >
+        {mainItems.map((item, index) => (
+          <li key={index}>
+            <Link
+              className="dropdown-item"
+              to={item.path}
+              onClick={item.onClick}
+            >
+              {item.label}
+            </Link>
+          </li>
+        ))}
+        <li>
+          <hr className="dropdown-divider" />
+        </li>
+        {additionalItems.map((item, index) => (
+          <li key={index}>
+            {item.isButton ? (
+              <button className="dropdown-item" onClick={item.onClick}>
+                {item.label}
+              </button>
+            ) : (
+              <Link className="dropdown-item" to={item.path}>
+                {item.label}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default CustomDropdown;
diff --git a/frontend/src/components/ui/CustomDropdown/styles.css b/frontend/src/components/ui/CustomDropdown/styles.css
@@ -0,0 +1,3 @@
+.btn-link:focus {
+  box-shadow: none; /* Remove the blue outline */
+}
diff --git a/frontend/src/components/ui/CustomNavLink.jsx b/frontend/src/components/ui/CustomNavLink.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+function CustomNavLink({ label, linkTo }) {
+  return (
+    <NavLink
+      className={({ isActive }) => 'nav-link' + (isActive ? ' active' : '')}
+      to={linkTo}
+    >
+      {label}
+    </NavLink>
+  );
+}
+
+export default CustomNavLink;