Sidebar v2.0 (Polished)

src/App.tsx

@@ -4,12 +4,14 @@ import AppLayout from './components/AppLayout.tsx';
 import Home from './pages/Home.tsx';
 import Register from './pages/Register.tsx';
 import Dashboard from './pages/Dashboard.tsx';
-import Events from './pages/Events.tsx';
+import CreateEvent from './pages/events/CreateEvent.tsx';
+import EventHistory from './pages/events/EventHistory.tsx';
 import Calendar from './pages/Calendar.tsx';
 import Roster from './pages/Roster.tsx';
 import Notifications from './pages/Notifications.tsx';
 import Profile from './pages/Profile.tsx';
 import Settings from './pages/Settings.tsx';
+import HelpCenter from './pages/HelpCenter.tsx';
 
 function App() {
     return (
@@ -21,12 +23,14 @@ function App() {
                         <Route path="/register" element={<Register />} />
                         <Route element={<AppLayout />}>
                             <Route path="/dashboard" element={<Dashboard />} />
-                            <Route path="/events" element={<Events />} />
+                            <Route path="/events/create" element={<CreateEvent />} />
+                            <Route path="/events/history" element={<EventHistory />} />
                             <Route path="/calendar" element={<Calendar />} />
                             <Route path="/roster" element={<Roster />} />
                             <Route path="/notifications" element={<Notifications />} />
                             <Route path="/profile" element={<Profile />} />
                             <Route path="/settings" element={<Settings />} />
+                            <Route path="/help" element={<HelpCenter />} />
                         </Route>
                     </Routes>
                 </BrowserRouter>

src/components/AppLayout.tsx

@@ -3,8 +3,7 @@ import '../css/app-layout.css';
 import { Outlet } from 'react-router-dom';
 import { useCollapseSidebar } from '../hooks/useCollapseSidebar';
 
-import Header from './Header.tsx';
-import Sidebar from './Sidebar.tsx';
+import Sidebar from './sidebar/Sidebar.tsx';
 
 export default function AppLayout() {
     const [collapsed, setCollapsed] = useCollapseSidebar('sidebar-collapsed', false);
@@ -15,7 +14,6 @@ export default function AppLayout() {
 
     return (
         <div className="main-app-container">
-            <Header />
             <div className="app-sidebar-content-container">
                 <Sidebar collapsed={collapsed} onToggle={toggleSidebar} />
                 <div className="app-content">

src/components/DarkModeToggle.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '../contexts/ThemeContext';
 
-export function DarkModeToggle() {
+export default function DarkModeToggle() {
     const { theme, toggleTheme } = useTheme();
 
     return (

src/components/Sidebar.tsx → src/components/sidebar/Sidebar.tsx

@@ -1,16 +1,21 @@
-import '../css/sidebar.css';
+import '../../css/sidebar.css';
+import SidebarGroup from './SidebarGroup.tsx';
 import SidebarLink from './SidebarLink.tsx';
+import SidebarProfile from './SidebarProfile.tsx';
+import SidebarWorkspace from './SidebarWorkspace.tsx';
 
-// Icon Imports
 import {
     Bars3Icon,
     HomeIcon,
     StarIcon,
+    PlusIcon,
+    ClipboardDocumentCheckIcon,
     CalendarDaysIcon,
     UserGroupIcon,
     BellAlertIcon,
     UserCircleIcon,
     Cog8ToothIcon,
+    QuestionMarkCircleIcon,
 } from '@heroicons/react/24/solid';
 
 type SidebarProps = {
@@ -27,17 +32,29 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
                     <Bars3Icon />
                 </button>
             </div>
-            <div className="main-sidebar-link-container">
+            <SidebarWorkspace workspace="Overview">
                 <SidebarLink label="Dashboard" icon={<HomeIcon />} nav="/dashboard" />
-                <SidebarLink label="Events" icon={<StarIcon />} nav="/events" />
+                <SidebarGroup label="Events" icon={<StarIcon />} collapsed={collapsed}>
+                    <SidebarLink label="Create" icon={<PlusIcon />} nav="/events/create" />
+                    <SidebarLink
+                        label="History"
+                        icon={<ClipboardDocumentCheckIcon />}
+                        nav="/events/history"
+                    />
+                </SidebarGroup>
                 <SidebarLink label="Calendar" icon={<CalendarDaysIcon />} nav="/calendar" />
                 <SidebarLink label="Roster" icon={<UserGroupIcon />} nav="/roster" />
                 <SidebarLink label="Notifications" icon={<BellAlertIcon />} nav="/notifications" />
-            </div>
-            <div className="lower-sidebar-link-container">
-                <SidebarLink label="My Profile" icon={<UserCircleIcon />} nav="/profile" />
+            </SidebarWorkspace>
+            <SidebarWorkspace>
+                <SidebarLink label="Help Center" icon={<QuestionMarkCircleIcon />} nav="/help" />
                 <SidebarLink label="Settings" icon={<Cog8ToothIcon />} nav="/settings" />
-            </div>
+                <SidebarProfile
+                    icon={<UserCircleIcon />}
+                    name="Kevin Smith"
+                    email="smithk@rpi.edu"
+                />
+            </SidebarWorkspace>
         </div>
     );
 }

src/components/sidebar/SidebarGroup.tsx

@@ -0,0 +1,35 @@
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
+import { useState, useEffect } from 'react';
+
+type SidebarGroupProps = {
+    label: string;
+    icon: React.ReactNode;
+    children: React.ReactNode;
+    collapsed: boolean;
+};
+
+export default function SidebarGroup({ label, icon, children, collapsed }: SidebarGroupProps) {
+    const [open, setOpen] = useState(true);
+    const Icon = open ? ChevronDownIcon : ChevronRightIcon;
+
+    // This logic assumes the user wants groups back open when sidebar is toggled.
+    useEffect(() => {
+        if (collapsed) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setOpen(false);
+        } else {
+            setOpen(true);
+        }
+    }, [collapsed]);
+
+    return (
+        <div className="sidebar-group">
+            <div className="sidebar-group-header" onClick={() => setOpen((prev) => !prev)}>
+                <span className="sidebar-link-icon">{icon}</span>
+                <span className="sidebar-link-label sidebar-label-transition">{label}</span>
+                <Icon className="group-collapse-icon sidebar-label-transition" />
+            </div>
+            {open && <div className="sidebar-group-children">{children}</div>}
+        </div>
+    );
+}

src/components/SidebarLink.tsx → src/components/sidebar/SidebarLink.tsx

@@ -2,7 +2,7 @@ import { NavLink } from 'react-router-dom';
 
 type SidebarLinkProps = {
     label: string;
-    icon: React.ReactNode; // TODO: Fix this
+    icon: React.ReactNode;
     nav: string;
 };
 
@@ -13,7 +13,7 @@ export default function SidebarLink({ label, icon, nav }: SidebarLinkProps) {
             className={({ isActive }) => `sidebar-link ${isActive ? 'active-link' : ''}`}
         >
             <span className="sidebar-link-icon">{icon}</span>
-            <span className="sidebar-link-label">{label}</span>
+            <span className="sidebar-link-label sidebar-label-transition">{label}</span>
         </NavLink>
     );
 }

src/components/sidebar/SidebarProfile.tsx

@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+type SidebarLinkProps = {
+    icon: React.ReactNode;
+    name: string;
+    email: string;
+};
+
+export default function SidebarProfile({ icon, name, email }: SidebarLinkProps) {
+    const navigate = useNavigate();
+    return (
+        <div className="sidebar-link" onClick={() => navigate('/profile')}>
+            <span className="sidebar-profile-icon">{icon}</span>
+            <div className="sidebar-profile-content sidebar-label-transition">
+                <span>{name}</span>
+                <span className="sidebar-profile-email">{email}</span>
+            </div>
+        </div>
+    );
+}

src/components/sidebar/SidebarWorkspace.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useState } from 'react';
+
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
+
+interface SidebarWorkspaceProps {
+    workspace?: string;
+    children: React.ReactNode;
+}
+
+export default function SidebarWorkspace({ workspace, children }: SidebarWorkspaceProps) {
+    const [open, setOpen] = useState(true);
+    const Icon = open ? ChevronDownIcon : ChevronRightIcon;
+
+    return (
+        <div className={`sidebar-workspace`}>
+            <div
+                onClick={() => setOpen((prev) => !prev)}
+                className={`${workspace ? 'workspace-header' : 'hide'}`}
+            >
+                <Icon className="workspace-icon" />
+                <span className="workspace-text sidebar-label-transition">{workspace}</span>
+            </div>
+            {open && children}
+        </div>
+    );
+}

src/css/colors.css

@@ -42,8 +42,7 @@ mode section as well.
     --standard-black: var(--off-black);
     --standard-text: var(--primary);
 
-    /* Sidebar / Header */
-    --header-bg: var(--highlight);
+    /* Sidebar */
     --sidebar-bg: var(--highlight);
     --sidebar-link-hover-bg: var(--off-white);
     --sidebar-active-link-bg: var(--primary-light);
@@ -56,10 +55,9 @@ mode section as well.
     --site-bg: var(--off-black);
     --standard-white: var(--off-black);
     --standard-black: var(--off-white);
-    --standard-text: var(--primary);
+    --standard-text: var(--off-white);
 
-    /* Sidebar / Header */
-    --header-bg: var(--primary-extra-dark);
+    /* Sidebar */
     --sidebar-bg: var(--primary-extra-dark);
     --sidebar-link-hover-bg: var(--accent);
     --sidebar-active-link-bg: var(--accent);

src/css/index.css

@@ -40,3 +40,6 @@ h1 {
 /*  END OF RANDOM AUTO-GENERATED STYLES            */
 
 /* ================================================= */
+.hide {
+    display: none;
+}