Remove Sidebar, Match Storyboard

.github/workflows/ci.yml

@@ -98,8 +98,8 @@ jobs:
                   push: false
                   tags: web-ui:test
 
-    cypress-dashboard:
-        name: Cypress - Dashboard
+    cypress-home:
+        name: Cypress - Home
         runs-on: ubuntu-latest
 
         steps:
@@ -118,7 +118,7 @@ jobs:
               run: npx wait-on http://localhost:5173
 
             - name: Run Cypress
-              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+              run: npx cypress run --spec "cypress/e2e/home/**/*.cy.ts"
 
     cypress-events:
         name: Cypress - Events
@@ -140,29 +140,7 @@ jobs:
               run: npx wait-on http://localhost:5173
 
             - name: Run Cypress
-              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
-
-    cypress-insights:
-        name: Cypress - Insights
-        runs-on: ubuntu-latest
-
-        steps:
-            - uses: actions/checkout@v4
-
-            - name: Install dependencies
-              run: npm ci
-
-            - name: Build Docker image
-              run: docker build -t web-ui:test .
-
-            - name: Start container
-              run: docker run -d --name webui -p 5173:80 web-ui:test
-
-            - name: Wait for app
-              run: npx wait-on http://localhost:5173
-
-            - name: Run Cypress
-              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+              run: npx cypress run --spec "cypress/e2e/events/**/*.cy.ts"
 
     cypress-organizations:
         name: Cypress - Organizations
@@ -184,10 +162,10 @@ jobs:
               run: npx wait-on http://localhost:5173
 
             - name: Run Cypress
-              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+              run: npx cypress run --spec "cypress/e2e/organizations/**/*.cy.ts"
 
-    cypress-user:
-        name: Cypress - User
+    cypress-profile:
+        name: Cypress - Profile
         runs-on: ubuntu-latest
 
         steps:
@@ -206,4 +184,4 @@ jobs:
               run: npx wait-on http://localhost:5173
 
             - name: Run Cypress
-              run: npx cypress run --spec "cypress/e2e/dashboard/**/*.cy.ts"
+              run: npx cypress run --spec "cypress/e2e/profile/**/*.cy.ts"

cypress/e2e/events/events.cy.ts

@@ -2,6 +2,6 @@ describe('Event Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/events');
 
-        cy.get('h1').should('contain', 'My Events');
+        cy.get('h1').should('contain', 'Events');
     });
 });

cypress/e2e/dashboard/dashboard.cy.ts → cypress/e2e/home/home.cy.ts

@@ -1,7 +1,7 @@
-describe('Dashboard Page', () => {
+describe('Home Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173');
 
-        cy.get('h1').should('contain', 'My Dashboard');
+        cy.get('h1').should('contain', 'Home');
     });
 });

cypress/e2e/organizations/organizations.cy.ts

@@ -2,6 +2,6 @@ describe('Organizations Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/organizations');
 
-        cy.get('h1').should('contain', 'My Organizations');
+        cy.get('h1').should('contain', 'Organizations');
     });
 });

cypress/e2e/profile/profile.cy.ts

@@ -2,6 +2,6 @@ describe('Profile Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173/profile');
 
-        cy.get('h1').should('contain', 'My Profile');
+        cy.get('h1').should('contain', 'Profile');
     });
 });

src/App.tsx

@@ -3,7 +3,6 @@ import { ThemeProvider } from './contexts/ThemeContext';
 import AppLayout from './components/AppLayout.tsx';
 import Home from './pages/Home.tsx';
 import Events from './pages/Events.tsx';
-import Insights from './pages/Insights.tsx';
 import Organizations from './pages/Organizations.tsx';
 import Testing from './pages/Testing.tsx'; // temp page
 import Profile from './pages/Profile.tsx';
@@ -17,12 +16,11 @@ function App() {
                     <BrowserRouter>
                         <Routes>
                             <Route element={<AppLayout />}>
+                                <Route path="/profile" element={<Profile />} />
                                 <Route path="/" element={<Home />} />
                                 <Route path="/events" element={<Events />} />
-                                <Route path="/insights" element={<Insights />} />
                                 <Route path="/organizations" element={<Organizations />} />
                                 <Route path="/testing" element={<Testing />} />
-                                <Route path="/profile" element={<Profile />} />
                             </Route>
                         </Routes>
                     </BrowserRouter>

src/components/AppLayout.tsx

@@ -1,24 +1,15 @@
 /* Layout that each page will follow */
 import '../css/app-layout.css';
 import { Outlet } from 'react-router-dom';
-import { useCollapseSidebar } from '../hooks/useCollapseSidebar';
 
-import Sidebar from './sidebar/Sidebar.tsx';
+import Navbar from './navbar/Navbar.tsx';
 
 export default function AppLayout() {
-    const [collapsed, setCollapsed] = useCollapseSidebar('sidebar-collapsed', false);
-
-    const toggleSidebar = () => {
-        setCollapsed((prev) => !prev);
-    };
-
     return (
         <div className="main-app-container">
-            <div className="app-sidebar-content-container">
-                <Sidebar collapsed={collapsed} onToggle={toggleSidebar} />
-                <div className="app-content">
-                    <Outlet />
-                </div>
+            <Navbar />
+            <div className="app-content">
+                <Outlet />
             </div>
         </div>
     );

src/components/navbar/Navbar.tsx

@@ -0,0 +1,62 @@
+import { useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import NavbarLink from './NavbarLink';
+import '../../css/navbar.css';
+
+type IndicatorState = { left: number; width: number };
+
+export default function Navbar() {
+    const navbarRef = useRef<HTMLDivElement>(null);
+    const location = useLocation();
+    const [indicator, setIndicator] = useState<IndicatorState>({ left: 0, width: 0 });
+
+    const computeIndicator = () => {
+        const navbarEl = navbarRef.current;
+        if (!navbarEl) return;
+
+        const activeEl = navbarEl.querySelector('.navlink.active-navlink') as HTMLElement | null;
+        if (!activeEl) return;
+
+        const navRect = navbarEl.getBoundingClientRect();
+        const activeRect = activeEl.getBoundingClientRect();
+
+        const next = {
+            left: activeRect.left - navRect.left,
+            width: activeRect.width,
+        };
+
+        // Avoid useless state updates
+        setIndicator((prev) => (prev.left === next.left && prev.width === next.width ? prev : next));
+    };
+
+    // Run when the route changes (active link changes).
+    // useLayoutEffect helps avoid a visible "jump" on first render.
+    useLayoutEffect(() => {
+        // Let the DOM apply the active class first, then measure.
+        requestAnimationFrame(computeIndicator);
+    }, [location.pathname]);
+
+    // Also update on resize
+    useEffect(() => {
+        const onResize = () => computeIndicator();
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+
+    return (
+        <div className="navbar" ref={navbarRef}>
+            <div
+                className="nav-indicator"
+                style={{
+                    transform: `translateX(${indicator.left}px)`,
+                    width: `${indicator.width}px`,
+                }}
+            />
+            <NavbarLink label="profile" nav="/" />
+            <NavbarLink label="home" nav="/events" />
+            <NavbarLink label="events" nav="/insights" />
+            <NavbarLink label="orgs" nav="/organizations" />
+            <NavbarLink label="test" nav="/testing" />
+        </div>
+    );
+}

src/components/navbar/NavbarLink.tsx

@@ -0,0 +1,14 @@
+import { NavLink } from 'react-router-dom';
+
+type NavbarLinkProps = {
+    label: string;
+    nav: string;
+};
+
+export default function NavbarLink({ label, nav }: NavbarLinkProps) {
+    return (
+        <NavLink to={nav} className={({ isActive }) => `navlink ${isActive ? 'active-navlink' : ''}`}>
+            {label}
+        </NavLink>
+    );
+}