Components
Documentation for all shared frontend components — AppSidebar, TopNav, ThemeToggle, ThemeProvider, and the Shadcn UI component library.
Components
All reusable components live in frontend/src/components/. The directory is split into custom application components and the ui/ subdirectory containing Shadcn UI primitives.
Custom Components
1. AppSidebar
File: components/app-sidebar.tsx
Type: Client Component ("use client")
A role-aware navigation sidebar that dynamically renders different menu items based on the user's role.
Props
| Prop | Type | Description |
|---|---|---|
role | "admin" | "student" | "staff" | "librarian" | undefined | Determines which navigation items to render |
Role-Specific Navigation Items
Admin (7 items): Overview, Circulation, Inventory, Catalogue Mgmt, Users, Notifications, Profile
Librarian (6 items): Desk Overview, Circulation, Inventory, Catalogue, Notifications, Profile
Student (7 items): Overview, My Loans, Reservations, Fines, Catalogue, Notifications, Profile
Staff (6 items): Overview, My Loans, Reservations, Catalogue, Notifications, Profile
Features
- Active state detection using
usePathname()— highlights the current route - Icon mapping — each item has a Lucide React icon
- Branded header — SL logo with "Smart Library" text, links to home
- Portal label — Shows "{role} Portal" as the group heading
Shadcn UI Dependencies
Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarHeader
2. TopNav
File: components/top-nav.tsx
Type: Server Component
A sticky top navigation bar used inside authenticated portal layouts.
Features
- Sticky positioning (
sticky top-0 z-50) - Contains
SidebarTrigger(hamburger menu for mobile) - Contains
ThemeTogglebutton - Consistent height (
h-14) matching the sidebar header
3. ThemeToggle
File: components/theme-toggle.tsx
Type: Client Component ("use client")
A button that toggles between light and dark themes.
Features
- Uses
useTheme()fromnext-themes - Sun icon visible in light mode, rotates out in dark mode
- Moon icon visible in dark mode, rotates in from light mode
- CSS transitions for smooth icon switching
- Accessible
sr-onlylabel: "Toggle theme"
4. ThemeProvider
File: components/theme-provider.tsx
Type: Client Component ("use client")
A thin wrapper around next-themes's ThemeProvider, re-exporting it as a client component for use in the server-rendered root layout.
Configuration (set in root layout)
attribute="class"— Applies theme via CSS class on<html>defaultTheme="system"— Follows OS preference by defaultenableSystem— Listens for OS theme changesdisableTransitionOnChange— Prevents flash during theme switch
Shadcn UI Component Library
Location: components/ui/
13 pre-built accessible UI components from the Shadcn UI ecosystem:
| Component | File | Description |
|---|---|---|
| Button | button.tsx | Multi-variant button (default, outline, ghost, destructive, link) |
| Card | card.tsx | Card container with Header, Title, Description, Content, Footer |
| Dialog | dialog.tsx | Modal dialog with overlay, header, footer, close button |
| Input | input.tsx | Styled text input field |
| Label | label.tsx | Accessible form label |
| Select | select.tsx | Dropdown select with trigger, content, items |
| Separator | separator.tsx | Horizontal/vertical divider line |
| Sheet | sheet.tsx | Slide-out panel (used for mobile sidebar) |
| Sidebar | sidebar.tsx | Full sidebar component system (21KB — the largest component) |
| Skeleton | skeleton.tsx | Loading placeholder animation |
| Sonner | sonner.tsx | Toast notification integration wrapper |
| Table | table.tsx | Data table with Header, Body, Row, Head, Cell components |
| Tooltip | tooltip.tsx | Hover tooltip with trigger and content |
Component Architecture
All Shadcn components follow the same pattern:
- Built on Radix UI primitives for accessibility
- Styled with Tailwind CSS and
class-variance-authorityfor variant management - Use the
cn()utility fromlib/utils.tsfor conditional class merging - Exported as named exports for tree-shaking