Feature/navbar header

apps/frontend/src/app.tsx

@@ -15,6 +15,7 @@ import { ConfirmSentEmailPage } from '@containers/auth/ConfirmSentEmailPage';
 import { ConfirmRegisteredPage } from '@containers/auth/ConfirmRegisteredPage';
 import { DashboardPage } from '@containers/dashboard/DashboardPage';
 import { DonorStatsChart } from '@components/DonorStatsChart';
+import SidebarTester from '@containers/dashboard/sidebar/SidebarTester';
 
 const router = createBrowserRouter([
   {
@@ -44,6 +45,10 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/sidebar-test',
+    element: <SidebarTester />,
+  },
   {
     path: '/test',
     element: <TestimonialTester />,

apps/frontend/src/containers/dashboard/header/Header.tsx

@@ -0,0 +1,56 @@
+import { useAuth } from '../../../components/AuthProvider';
+
+type HeaderProps = {
+  title?: string;
+  userName?: string;
+  userRole?: string;
+  className?: string;
+};
+
+function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function Header({
+  title = 'Dashboard Overview',
+  userName = 'F. N. Way',
+  userRole = 'Admin/Standard',
+  className,
+}: HeaderProps) {
+  const { user } = useAuth();
+
+  const displayUserName =
+    user?.firstName && user?.lastName
+      ? `${user.firstName} ${user.lastName}`
+      : userName;
+
+  const displayUserRole = user?.status
+    ? user.status.charAt(0).toUpperCase() + user.status.slice(1).toLowerCase()
+    : userRole;
+
+  return (
+    <header
+      className={cn(
+        'flex h-[88px] w-full items-center justify-between border-b border-neutral-200 bg-neutral-50 px-[28px] pr-[34px]',
+        className,
+      )}
+    >
+      <h1 className="font-['Source_Sans_Pro'] text-[36px] font-semibold leading-[48px] tracking-[-0.72px] text-black">
+        {title}
+      </h1>
+
+      <div className="flex items-center rounded-md border border-neutral-200 bg-neutral-50 px-3 py-[7.5px]">
+        <div className="h-11 w-11 shrink-0 rounded-full bg-emerald-700" />
+
+        <div className="ml-3 flex flex-col">
+          <span className="font-['Source_Sans_Pro'] text-[16px] font-semibold leading-7 text-neutral-900">
+            {displayUserName}
+          </span>
+          <span className="font-['Source_Sans_Pro'] text-[14px] font-normal leading-6 text-neutral-900">
+            {displayUserRole}
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}

apps/frontend/src/containers/dashboard/sidebar/Sidebar.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { Link, useLocation } from 'react-router-dom';
+import {
+  Bookmark,
+  ListFilter,
+  Mail,
+  BadgeCheck,
+  Settings,
+  LucideIcon,
+} from 'lucide-react';
+
+import FCCLogo from './FCCLogo.svg';
+import FCCText from './FCC.svg';
+
+function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(' ');
+}
+
+type NavItem = {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+};
+
+const navItems: NavItem[] = [
+  {
+    label: 'Dashboard Overview',
+    href: '/dashboard',
+    icon: Bookmark,
+  },
+  {
+    label: 'Donation Tracker',
+    href: '/dashboard/donations',
+    icon: ListFilter,
+  },
+  {
+    label: 'Email Communication',
+    href: '/dashboard/email',
+    icon: Mail,
+  },
+  {
+    label: 'Admin Approval',
+    href: '/dashboard/approval',
+    icon: BadgeCheck,
+  },
+  {
+    label: 'Settings',
+    href: '/dashboard/settings',
+    icon: Settings,
+  },
+];
+
+type SidebarProps = {
+  activeItem?: string;
+  className?: string;
+};
+
+export default function Sidebar({ className }: SidebarProps) {
+  const { pathname } = useLocation();
+
+  return (
+    <aside
+      className={cn(
+        'flex w-[236px] flex-col border-r border-neutral-200 bg-neutral-50',
+        className,
+      )}
+    >
+      {/*Top Logo Section */}
+      <div className="flex h-[103px] w-full items-center gap-[11px] px-[22px] py-[9px]">
+        <img src={FCCLogo} alt="FCC Logo" className="w-[56px] shrink-0" />
+        <img
+          src={FCCText}
+          alt="Fenway Community Center"
+          className="w-[125px]"
+        />
+      </div>
+
+      {/*Navigation */}
+      <nav className="flex w-full flex-col gap-0.05 px-4 pt-8">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+
+          return (
+            <Link
+              key={item.label}
+              to={item.href}
+              className={cn(
+                'flex h-11 w-full items-center gap-3 rounded-md px-3 text-[14px] font-semibold leading-6 transition-colors',
+                isActive
+                  ? 'bg-emerald-700 text-white'
+                  : 'text-neutral-700 hover:bg-neutral-100',
+              )}
+            >
+              <item.icon className="h-4 w-4 shrink-0" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}

apps/frontend/src/containers/dashboard/sidebar/SidebarTester.tsx

@@ -0,0 +1,16 @@
+import Sidebar from './Sidebar';
+import Header from '../header/Header';
+
+export default function SidebarTester() {
+  return (
+    <div className="flex min-h-screen bg-white">
+      <Sidebar />
+      <div className="flex flex-1 flex-col">
+        <Header />
+        <main className="flex-1 p-8">
+          <h2 className="text-2xl font-semibold">Sidebar + Header Test Page</h2>
+        </main>
+      </div>
+    </div>
+  );
+}

package.json

@@ -68,7 +68,7 @@
     "react-dom": "^18.2.0",
     "react-is": "^19.2.4",
     "react-router-dom": "^6.15.0",
-    "recharts": "^3.7.0",
+    "recharts": "^3.8.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.0",
     "sqlite3": "^5.1.7",