Sagar- New Frontend Updates

src/App.tsx

@@ -20,13 +20,16 @@ import { HelmetProvider } from 'react-helmet-async';
 import { AuthProvider } from './context/AuthContext.tsx';
 
 function App() {
-
   return (
     <AuthProvider>
       <HelmetProvider>
-        <section>
+
+        <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
           <MainNavigation />
-          <main className="flex flex-col min-h-screen p-8">
+          {/*
+            The <main> element now has padding ("p-8") but a transparent background.
+          */}
+          <main className="p-8 flex-grow bg-transparent">
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/health" element={<p>App is Healthy</p>} />
@@ -35,27 +38,19 @@ function App() {
               <Route path="/login" element={<LoginRedirection />} />
               <Route path="/signout" element={<LogoutRedirection />} />
               <Route path="/logout" element={<LogoutRedirection />} />
-
               <Route path="/opportunities" element={<Opportunities />} />
               <Route path="/profile" element={<ProfilePage />} />
-              <Route
-                path="/staff/department/:department"
-                element={<Department />}
-              />
+              <Route path="/staff/department/:department" element={<Department />} />
               <Route path="/staff" element={<Departments />} />
               <Route path="/staff/:staffId" element={<StaffPage />} />
               <Route path="/create" element={<CreatePost edit={false} />} />
-              <Route
-                path="/edit/:postID"
-                element={<CreatePost edit={true} />}
-              />
+              <Route path="/edit/:postID" element={<CreatePost edit={true} />} />
               <Route path="/post/:postID" element={<IndividualPost />} />
-
               <Route path="/*" element={<PageNotFound />} />
             </Routes>
           </main>
           <StickyFooter />
-        </section>
+        </div>
       </HelmetProvider>
     </AuthProvider>
   );

src/shared/components/Navigation/MainNavigation.tsx

@@ -1,82 +1,132 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Disclosure } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
-import { Link, NavLink, useLocation } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { useAuth } from "../../../context/AuthContext.tsx";
+import logo from "../../../images/LabConnect_Logo-removebg-preview.png"; // Adjust path if needed
 
 export default function MainNavigation() {
-
   const { auth } = useAuth();
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Toggle dark mode by adding or removing the "dark" class on the HTML element.
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [isDarkMode]);
 
-  const location = useLocation().pathname;
+  // Define navigation routes based on authentication.
   const routes = auth.isAuthenticated
     ? [
-      { name: "Opportunities", href: "/opportunities", current: true },
-      { name: "Create", href: "/create", current: false },
-      { name: "Staff", href: "/staff", current: false },
-      { name: "Profile", href: "/profile", current: false },
-      { name: "Sign Out", href: "/signout", current: false },
-    ]
-    : [{ name: "Sign In", href: "/signin", current: false }];
+        { name: "Opportunities", href: "/opportunities" },
+        { name: "Create", href: "/create" },
+        { name: "Staff", href: "/staff" },
+        { name: "Profile", href: "/profile" },
+        { name: "Sign Out", href: "/signout" }
+      ]
+    : [{ name: "Sign In", href: "/signin" }];
 
   return (
-    <Disclosure as="nav" className="bg-slate-100">
+    <Disclosure as="nav" className="bg-blue-600 text-white shadow-inner">
       {({ open }) => (
         <>
-          <div className="mainnav sm:px-6 lg:px-8">
-            <div className="mainnav-header">
-              <div className="mainnav-desc sm:hidden">
-                {/* Mobile menu button*/}
-                <Disclosure.Button className="btn-disclosure hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                  <span className="absolute -inset-0.5" />
-                  <span className="sr-only">Open main menu</span>
+          <div className="w-full px-4 py-6 flex items-center justify-between">
+            {/* Left Section: Branding */}
+            <div className="flex items-center space-x-4">
+              <Link to="/">
+                <img
+                  src={logo}
+                  alt="LabConnect Logo"
+                  className="h-16 w-auto filter brightness-0 invert"
+                />
+              </Link>
+              <span className="font-bold text-xl">LabConnect</span>
+            </div>
+            {/* Center Section: Navigation Links */}
+            <div className="hidden md:flex flex-grow justify-center">
+              <nav className="flex space-x-12">
+                {routes.map((item) => (
+                  <NavLink
+                    key={item.name}
+                    to={item.href}
+                    className={({ isActive }) =>
+                      `text-2xl font-bold hover:underline ${
+                        isActive ? "underline" : ""
+                      }`
+                    }
+                  >
+                    {item.name}
+                  </NavLink>
+                ))}
+              </nav>
+            </div>
+            {/* Right Section: Dark Mode Toggle and Mobile Menu Button */}
+            <div className="flex items-center">
+              <label className="flex items-center cursor-pointer">
+                <div className="relative">
+                  <input
+                    type="checkbox"
+                    className="sr-only"
+                    checked={isDarkMode}
+                    onChange={() => setIsDarkMode((prev) => !prev)}
+                  />
+                  <div className="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full" />
+                  <div
+                    className={`absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform ${
+                      isDarkMode ? "translate-x-5" : ""
+                    }`}
+                  ></div>
+                </div>
+                <span className="ml-3 text-white text-lg font-bold">
+                  Enable Dark Mode
+                </span>
+              </label>
+              <div className="md:hidden ml-4">
+                <Disclosure.Button className="p-2 rounded hover:bg-gray-700 hover:text-white focus:outline-none">
                   {open ? (
-                    <XMarkIcon className="blck66" aria-hidden="true" />
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   ) : (
-                    <Bars3Icon className="blck66" aria-hidden="true" />
+                    <Bars3Icon className="h-6 w-6" aria-hidden="true" />
                   )}
                 </Disclosure.Button>
               </div>
-              <div className="mainnav-desc2 sm:items-stretch sm:justify-start">
-                <div className="mainnav-title-link">
-                  <Link to="/" className="blue-link hover:text-blue-900 focus:text-blue-900">
-                    LabConnect
-                  </Link>
-                </div>
-                <div className="hidden sm:ml-6 sm:block">
-                  <div className="flex space-x-4 ">
-                    {routes.map((item) => (
-                      <NavLink
-                        key={item.name}
-                        to={item.href}
-                        className={`${location === item.href
-                          ? "text-black"
-                          : "text-gray-600"
-                          } hover:text-gray-800  hover:bg-gray-200  mainnav-link`}
-                        aria-current={item.current}
-                      >
-                        {item.name}
-                      </NavLink>
-                    ))}
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
-
-          <Disclosure.Panel className="sm:hidden">
-            <div className="space-y-1 px-2 pb-3 pt-2">
+          {/* Mobile Panel */}
+          <Disclosure.Panel className="md:hidden">
+            <div className="px-4 pb-3 pt-2 space-y-1">
               {routes.map((item) => (
                 <Disclosure.Button
                   key={item.name}
-                  as="a"
-                  href={item.href}
-                  className="btn-disclosure2 hover:bg-gray-200"
-                  aria-current={item.current ? "page" : undefined}
+                  as={Link}
+                  to={item.href}
+                  className="block text-2xl font-bold hover:underline"
                 >
                   {item.name}
                 </Disclosure.Button>
               ))}
+              {/* Dark Mode Toggle Switch */}
+              <label className="absolute top-4 right-4 flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  className="sr-only peer"
+                  checked={isDarkMode}
+                  onChange={() => setIsDarkMode(prev => !prev)}
+                />
+                <div className="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer-focus:outline-none peer-checked:bg-blue-600 relative transition-all duration-300">
+                  <div
+                    className={`absolute left-1 top-1 bg-white dark:bg-gray-300 w-4 h-4 rounded-full transition-transform duration-300 ${
+                      isDarkMode ? "translate-x-5" : ""
+                    }`}
+                  ></div>
+                </div>
+                <span className="ml-3 text-gray-700 dark:text-gray-200 font-medium">
+                  Enable Dark Mode
+                </span>
+              </label>
             </div>
           </Disclosure.Panel>
         </>