Navigation
Navigation components live in components/navigation/ and adapt based on the user's active role (employer or job seeker).
Navbar
File: components/navigation/Navbar.tsx
The top navigation bar displayed on all authenticated pages. Contains:
- Logo and app title
- Notification bell with unread badge count
- User profile dropdown menu
- Company/role context indicator
Sidebars
The application uses role-specific sidebars:
| Component | File | Audience |
|---|---|---|
| CompanySidebar | CompanySidebar.tsx | Employer users |
| JobSeekerSidebar | JobSeekerSidebar.tsx | Job seeker users |
Each sidebar renders menu items specific to the active role.
Menu Data
Menu item definitions live in components/navigation/menuItemsData/:
| File | Content |
|---|---|
| MenuCompany.tsx | Company menu structure: Team, Profile, Settings, Developer Tools, Sign Out |
| MenuJobSeeker.tsx | Job seeker menu structure: Saved Jobs, Profile, Settings, Sign Out |
Notification Center
File: components/navigation/Notification.tsx
The notification panel accessible from the navbar bell icon. Opens a dropdown/panel showing recent notifications. Works with NotificationContext which polls unread counts every 30 seconds.
User Profile Dropdown
File: components/navigation/UserProfile.tsx
Dropdown menu for the authenticated user showing:
- User avatar and name
- Role / company context
- Quick links (profile, settings)
- Sign out action
News
File: components/navigation/News.tsx
News/updates section displayed in the navigation area for platform announcements.
Support Portal Sidebar
Files: components/support/layout/SupportPortalSidebar.tsx, SupportPortalLayout.tsx
Dedicated sidebar for the support agent portal (/support-portal/*). Follows the same mobile drawer pattern as AdminSidebar.
Nav items: Dashboard, Client Tickets, My Tickets, Internal Tickets, FAQs, Settings (super admin only). Footer links: Admin Panel (super admin), Back to App.
Responsive behavior:
- Desktop (>=
md): Staticw-60sidebar - Mobile (<
md): Hidden; hamburger button in mobile top bar opens a slide-in drawer (w-64,z-50) with backdrop overlay
Access: Gated by SupportPortalGuard — requires user.isSupportAgent or user.isSuperAdmin.
Route-Based Navigation
Navigation items are determined by the active route group and user role. The lib/config/navigation.ts file defines the navigation structure, and lib/config/routes.ts defines route constants used across the app.