Sidebar & Navigation

The platform uses a collapsible sidebar built with shadcn/ui as the primary navigation element. It adapts its content based on the user's role and provides quick access to all major sections.

Component Structure

AppSidebar
  ├─ TeamSwitcher          (workspace/project selector)
  ├─ NavMain               (primary navigation items)
  ├─ NavProjects            (project-level links)
  └─ NavUser               (user profile & logout)

AppSidebar

File: src/components/app-sidebar.tsx

The root sidebar component. It assembles all navigation sections and manages the collapsed/expanded state. Uses the shadcn/ui Sidebar primitive with responsive behavior — collapses to icons on mobile via the use-mobile hook.

NavMain

File: src/components/nav-main.tsx

Renders the primary navigation menu items. Each item can have nested sub-items that expand on click.

Navigation structure by role:

Section	Route	Admin	HSEQ	User
Dashboard	/dashboard	Yes	Yes	Yes
MOC Tracking	/dashboard/Moc	Yes	Yes	Yes
MOC Archive	/dashboard/Moc/list	Yes	Yes	Yes
PCR Tracking	/dashboard/pcr	Yes	Yes	Yes
Create MOC	/dashboard/Moc/create	Yes	Yes	Yes
Create PCR	/dashboard/pcr/create	Yes	Yes	Yes
Analytics	/dashboard/analytics	Yes	Yes	No
User Management	/dashboard/users	Yes	No	No
Notifications	/dashboard/notifications	Yes	Yes	Yes
Year-End Review	/dashboard/year-end	Yes	Yes	No

NavUser

File: src/components/nav-user.tsx

Displays the current user's avatar, name, and role at the bottom of the sidebar. Includes a dropdown menu with:

• Profile settings
• Logout action

TeamSwitcher

File: src/components/team-switcher.tsx

Displays the platform branding at the top of the sidebar. In the current configuration, this shows the Bahri logo and platform name.

Mobile Responsiveness

Hook: src/hooks/use-mobile.tsx

The sidebar uses a custom hook to detect mobile viewports. On mobile:

• Sidebar collapses to an icon-only rail
• A hamburger menu button appears in the top navigation
• Tapping the hamburger opens the full sidebar as an overlay

Top Navigation Bar

File: src/features/mainTopNav/

The top navigation bar spans the full width above the content area and includes:

Element	Purpose
Breadcrumbs	Shows current location (Dashboard → MOC → Serial #)
Search	Quick search across MOCs and PCRs
Notifications bell	Shows unread notification count, opens notification panel
User avatar	Quick access to profile dropdown

Notification Bell

The notification bell in the top nav integrates with the notification system:

• Displays unread count as a badge
• Polls every 30 seconds for new notifications (via src/features/notification_system/)
• Clicking opens either a dropdown preview or navigates to the full notifications page

Chat Floating Box

File: src/features/chatFloatingBox/

A floating chat widget that appears in the bottom-right corner of the dashboard. Allows users to communicate within the context of a specific MOC without leaving the current page.

Route Layout

The dashboard layout wraps all authenticated pages:

File: src/app/dashboard/layout.tsx

Dashboard Layout
  ├─ AppSidebar (left)
  ├─ TopNav (top)
  └─ Content Area (center)
       └─ {children} (page content)

Related Files

Purpose	Path
App sidebar	src/components/app-sidebar.tsx
Main navigation	src/components/nav-main.tsx
User navigation	src/components/nav-user.tsx
Team switcher	src/components/team-switcher.tsx
Mobile hook	src/hooks/use-mobile.tsx
Top navigation	src/features/mainTopNav/
Chat widget	src/features/chatFloatingBox/
Notification system	src/features/notification_system/
Dashboard layout	src/app/dashboard/layout.tsx