feat: sidebar navigation component

[kevinrutledge]

What needs to be built?

A fixed sidebar navigation component for the authenticated layout. The sidebar displays navigation items (Home, Messages, Groups, Events, Settings) with icons and an active state indicator. It sits on the left side below the top bar.

Design reference

Figma — Paso Food Co-Op

Design system: Paso Brown #523019 for active indicator bar

Documentation

Existing patterns:

• src/config/navigation.ts — NavItem interface and NAV_CONFIG (tech lead will update routes; sidebar should hardcode items for now)
• src/lib/auth-types.ts — AuthState type
• src/hooks/use-mobile.ts — mobile detection hook
• src/components/ui/separator.tsx — shadcn Separator

Official docs:

• Next.js usePathname
• Next.js Link
• Lucide Icons — LayoutDashboard, MessageSquare, Users, Calendar, Settings

Technical notes

Create the component at src/components/layout/sidebar.tsx.

Nav items:

Label	Icon (lucide-react)	Route
Home	LayoutDashboard	/
Messages	MessageSquare	/messages
Groups	Users	/groups
Events	Calendar	/events
Settings	Settings	/settings

Hardcode these items directly in the component. The tech lead will refactor to pull from a config if needed.

Active state detection:

• Use usePathname() to get the current route
• Home is active only on exact match /
• Other items are active when the pathname starts with their route (e.g., /groups/123 makes Groups active)

Active item styling:

• Vertical accent bar on the left edge (Paso Brown #523019, ~3px wide, full height of the item)
• Bold label text
• Inactive items: regular weight, muted icon

Layout:

• White background
• Fixed width (~220px desktop)
• Full viewport height minus top bar height
• Vertical item stack with consistent padding (~12-16px vertical, ~16-20px horizontal)

interface SidebarProps {
  className?: string;
}

This is a client component (uses usePathname). Each nav item is a <Link> for client-side navigation.

Acceptance criteria

• Component created at src/components/layout/sidebar.tsx
• Displays 5 nav items: Home, Messages, Groups, Events, Settings
• Each item has a lucide-react icon and text label
• Active item determined by usePathname() — exact match for Home, prefix match for others
• Active item has left accent bar (Paso Brown #523019) and bold text
• Items are Next.js <Link> components for client-side navigation
• White background, fixed width (~220px)
• Consistent spacing between items
• Exported as named export
• npm run build passes