COMPONENT: Header/Top Nav Component

[nayan458]

Task: Header/Top Nav Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface TopbarProps {
  title:          string;
  searchSlot?:    ReactNode;     // Input component with search config
  actionsSlot?:   ReactNode;     // right side — avatar, notification bell
  onMenuToggle?:  () => void;    // hamburger tap on mobile — opens drawer
  className?:     string;
}

Variants / States

State	Description
Desktop	Title left, search center, actions right. No hamburger.
Mobile	Hamburger left, title center, avatar right. Search hidden.
With search	Search box renders in center slot — desktop only
Without search	Title expands to fill available space

Acceptance Criteria

• Hamburger icon renders only on mobile (< 768px), hidden on desktop
• onMenuToggle fires when hamburger is tapped — AdminLayout controls the drawer state, not Topbar
• searchSlot hidden on mobile — search accessed via dedicated screen or bottom sheet
• actionsSlot renders right-aligned, accepts any ReactNode (Avatar, notification bell, theme picker)
• Sticky positioned — stays at top of viewport on scroll
• Bottom border using --border-tertiary
• Background --bg-primary with correct z-index above content
• Zero hardcoded hex values
• Storybook stories: desktop with search, desktop without search, mobile view (use 375px viewport preset)
• No TypeScript errors

Notes

• Topbar lives inside AdminLayout — it is not a page-level component and should not be used outside the admin shell
• actionsSlot in the admin layout will receive <Avatar name="AdminMod" size="sm" /> — wire this up in AdminLayout, not here

[nayan458]

complete 52#