Skip to content

Commit 2853d21

Browse files
RafaelCenzanoRafaelCenzano
authored
Sagar- New Frontend Updates (#130)
2 parents f0acd41 + 0d54764 commit 2853d21

10 files changed

Lines changed: 420 additions & 180 deletions

‎LabConnect S25 Documentation.pdf‎

578 KB
Binary file not shown.

‎labonnect_S25_poster.pdf‎

1010 KB
Binary file not shown.

‎src/App.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,16 @@ import { HelmetProvider } from 'react-helmet-async';
2020
import { AuthProvider } from './context/AuthContext.tsx';
2121

2222
function App() {
23-
2423
return (
2524
<AuthProvider>
2625
<HelmetProvider>
27-
<section>
26+
27+
<div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
2828
<MainNavigation />
29-
<main className="flex flex-col min-h-screen p-8">
29+
{/*
30+
The <main> element now has padding ("p-8") but a transparent background.
31+
*/}
32+
<main className="p-8 flex-grow bg-transparent">
3033
<Routes>
3134
<Route path="/" element={<Home />} />
3235
<Route path="/health" element={<p>App is Healthy</p>} />
@@ -35,27 +38,19 @@ function App() {
3538
<Route path="/login" element={<LoginRedirection />} />
3639
<Route path="/signout" element={<LogoutRedirection />} />
3740
<Route path="/logout" element={<LogoutRedirection />} />
38-
3941
<Route path="/opportunities" element={<Opportunities />} />
4042
<Route path="/profile" element={<ProfilePage />} />
41-
<Route
42-
path="/staff/department/:department"
43-
element={<Department />}
44-
/>
43+
<Route path="/staff/department/:department" element={<Department />} />
4544
<Route path="/staff" element={<Departments />} />
4645
<Route path="/staff/:staffId" element={<StaffPage />} />
4746
<Route path="/create" element={<CreatePost edit={false} />} />
48-
<Route
49-
path="/edit/:postID"
50-
element={<CreatePost edit={true} />}
51-
/>
47+
<Route path="/edit/:postID" element={<CreatePost edit={true} />} />
5248
<Route path="/post/:postID" element={<IndividualPost />} />
53-
5449
<Route path="/*" element={<PageNotFound />} />
5550
</Routes>
5651
</main>
5752
<StickyFooter />
58-
</section>
53+
</div>
5954
</HelmetProvider>
6055
</AuthProvider>
6156
);

‎src/images/LabConnect_Logo-removebg-preview.png‎

50.7 KB
Loading

‎src/images/LabConnect_Logo2-removebg-preview.png‎

48.4 KB
Loading

‎src/shared/components/Navigation/MainNavigation.tsx‎

Lines changed: 102 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,132 @@
1-
import React from "react";
1+
import React, { useState, useEffect } from "react";
22
import { Disclosure } from "@headlessui/react";
33
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
4-
import { Link, NavLink, useLocation } from "react-router-dom";
4+
import { Link, NavLink } from "react-router-dom";
55
import { useAuth } from "../../../context/AuthContext.tsx";
6+
import logo from "../../../images/LabConnect_Logo-removebg-preview.png"; // Adjust path if needed
67

78
export default function MainNavigation() {
8-
99
const { auth } = useAuth();
10+
const [isDarkMode, setIsDarkMode] = useState(false);
11+
12+
// Toggle dark mode by adding or removing the "dark" class on the HTML element.
13+
useEffect(() => {
14+
if (isDarkMode) {
15+
document.documentElement.classList.add("dark");
16+
} else {
17+
document.documentElement.classList.remove("dark");
18+
}
19+
}, [isDarkMode]);
1020

11-
const location = useLocation().pathname;
21+
// Define navigation routes based on authentication.
1222
const routes = auth.isAuthenticated
1323
? [
14-
{ name: "Opportunities", href: "/opportunities", current: true },
15-
{ name: "Create", href: "/create", current: false },
16-
{ name: "Staff", href: "/staff", current: false },
17-
{ name: "Profile", href: "/profile", current: false },
18-
{ name: "Sign Out", href: "/signout", current: false },
19-
]
20-
: [{ name: "Sign In", href: "/signin", current: false }];
24+
{ name: "Opportunities", href: "/opportunities" },
25+
{ name: "Create", href: "/create" },
26+
{ name: "Staff", href: "/staff" },
27+
{ name: "Profile", href: "/profile" },
28+
{ name: "Sign Out", href: "/signout" }
29+
]
30+
: [{ name: "Sign In", href: "/signin" }];
2131

2232
return (
23-
<Disclosure as="nav" className="bg-slate-100">
33+
<Disclosure as="nav" className="bg-blue-600 text-white shadow-inner">
2434
{({ open }) => (
2535
<>
26-
<div className="mainnav sm:px-6 lg:px-8">
27-
<div className="mainnav-header">
28-
<div className="mainnav-desc sm:hidden">
29-
{/* Mobile menu button*/}
30-
<Disclosure.Button className="btn-disclosure hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
31-
<span className="absolute -inset-0.5" />
32-
<span className="sr-only">Open main menu</span>
36+
<div className="w-full px-4 py-6 flex items-center justify-between">
37+
{/* Left Section: Branding */}
38+
<div className="flex items-center space-x-4">
39+
<Link to="/">
40+
<img
41+
src={logo}
42+
alt="LabConnect Logo"
43+
className="h-16 w-auto filter brightness-0 invert"
44+
/>
45+
</Link>
46+
<span className="font-bold text-xl">LabConnect</span>
47+
</div>
48+
{/* Center Section: Navigation Links */}
49+
<div className="hidden md:flex flex-grow justify-center">
50+
<nav className="flex space-x-12">
51+
{routes.map((item) => (
52+
<NavLink
53+
key={item.name}
54+
to={item.href}
55+
className={({ isActive }) =>
56+
`text-2xl font-bold hover:underline ${
57+
isActive ? "underline" : ""
58+
}`
59+
}
60+
>
61+
{item.name}
62+
</NavLink>
63+
))}
64+
</nav>
65+
</div>
66+
{/* Right Section: Dark Mode Toggle and Mobile Menu Button */}
67+
<div className="flex items-center">
68+
<label className="flex items-center cursor-pointer">
69+
<div className="relative">
70+
<input
71+
type="checkbox"
72+
className="sr-only"
73+
checked={isDarkMode}
74+
onChange={() => setIsDarkMode((prev) => !prev)}
75+
/>
76+
<div className="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full" />
77+
<div
78+
className={`absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform ${
79+
isDarkMode ? "translate-x-5" : ""
80+
}`}
81+
></div>
82+
</div>
83+
<span className="ml-3 text-white text-lg font-bold">
84+
Enable Dark Mode
85+
</span>
86+
</label>
87+
<div className="md:hidden ml-4">
88+
<Disclosure.Button className="p-2 rounded hover:bg-gray-700 hover:text-white focus:outline-none">
3389
{open ? (
34-
<XMarkIcon className="blck66" aria-hidden="true" />
90+
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
3591
) : (
36-
<Bars3Icon className="blck66" aria-hidden="true" />
92+
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
3793
)}
3894
</Disclosure.Button>
3995
</div>
40-
<div className="mainnav-desc2 sm:items-stretch sm:justify-start">
41-
<div className="mainnav-title-link">
42-
<Link to="/" className="blue-link hover:text-blue-900 focus:text-blue-900">
43-
LabConnect
44-
</Link>
45-
</div>
46-
<div className="hidden sm:ml-6 sm:block">
47-
<div className="flex space-x-4 ">
48-
{routes.map((item) => (
49-
<NavLink
50-
key={item.name}
51-
to={item.href}
52-
className={`${location === item.href
53-
? "text-black"
54-
: "text-gray-600"
55-
} hover:text-gray-800 hover:bg-gray-200 mainnav-link`}
56-
aria-current={item.current}
57-
>
58-
{item.name}
59-
</NavLink>
60-
))}
61-
</div>
62-
</div>
63-
</div>
6496
</div>
6597
</div>
66-
67-
<Disclosure.Panel className="sm:hidden">
68-
<div className="space-y-1 px-2 pb-3 pt-2">
98+
{/* Mobile Panel */}
99+
<Disclosure.Panel className="md:hidden">
100+
<div className="px-4 pb-3 pt-2 space-y-1">
69101
{routes.map((item) => (
70102
<Disclosure.Button
71103
key={item.name}
72-
as="a"
73-
href={item.href}
74-
className="btn-disclosure2 hover:bg-gray-200"
75-
aria-current={item.current ? "page" : undefined}
104+
as={Link}
105+
to={item.href}
106+
className="block text-2xl font-bold hover:underline"
76107
>
77108
{item.name}
78109
</Disclosure.Button>
79110
))}
111+
{/* Dark Mode Toggle Switch */}
112+
<label className="absolute top-4 right-4 flex items-center cursor-pointer">
113+
<input
114+
type="checkbox"
115+
className="sr-only peer"
116+
checked={isDarkMode}
117+
onChange={() => setIsDarkMode(prev => !prev)}
118+
/>
119+
<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">
120+
<div
121+
className={`absolute left-1 top-1 bg-white dark:bg-gray-300 w-4 h-4 rounded-full transition-transform duration-300 ${
122+
isDarkMode ? "translate-x-5" : ""
123+
}`}
124+
></div>
125+
</div>
126+
<span className="ml-3 text-gray-700 dark:text-gray-200 font-medium">
127+
Enable Dark Mode
128+
</span>
129+
</label>
80130
</div>
81131
</Disclosure.Panel>
82132
</>

0 commit comments

Comments
 (0)