Manager Navigation

The Manager role has a different navigation experience optimized for administrative tasks.

Overview

Managers access the app through specialized navigation that provides quick access to administrative features:

• Dashboard: Overview and welcome screen
• Users: User management with pagination, suspend/re-enable functionality
• Sessions: Session management (placeholder for future implementation)
• Profile: Full profile management (view/edit info, avatar upload, password change)
• Settings: App configuration (placeholder for future implementation)

Platform-Specific Navigation

Web (Desktop)

Managers see a top navigation bar with:

• App branding on the left
• Navigation links: Dashboard, Users, Sessions, Profile, Settings
• User email and logout button on the right

Located in: frontend/src/navigation/web/WebRouter.tsx

Native (iOS/Android/iPad)

Managers see a sidebar navigation with:

• Fixed 280px left panel (collapsible)
• Toggle button (PanelRight icon) in top-left corner
• App name and user email in header
• Vertical menu with icons and labels
• Active state highlighting (blue color, left border)
• Main content area on the right

Located in: frontend/src/components/ManagerSidebar.tsx

Implementation Details

ManagerSidebar Component

The sidebar is implemented using native React Native components:

// Pure component with local state
const [activeScreen, setActiveScreen] = useState('dashboard');
const [sidebarVisible, setSidebarVisible] = useState(true);

// Menu items configuration
const menuItems = [
  { id: 'dashboard', title: 'Dashboard', icon: LayoutDashboard, component: AdminDashboardScreen },
  { id: 'users', title: 'Users', icon: Users, component: AdminUsersScreen },
  { id: 'sessions', title: 'Sessions', icon: Calendar, component: AdminSessionsScreen },
  { id: 'profile', title: 'Profile', icon: User, component: ProfileScreen },
  { id: 'settings', title: 'Settings', icon: Settings, component: AdminSettingsScreen },
];

Component Structure

SafeAreaView (wrapper)
├── Sidebar (280px, conditional)
│   ├── Header
│   │   ├── App Name
│   │   └── User Email
│   └── Menu (scrollable)
│       └── Menu Items (5)
│           ├── Icon
│           └── Label
└── Content Area (flex: 1)
    ├── Toggle Button (floating)
    │   └── PanelRight Icon
    └── Content Inner (padded)
        └── Active Screen Component

Styling Features

• Active State: Blue color (#007AFF) and 3px left border
• Inactive State: Gray color (#8E8E93)
• Typography: Uses Jost font family (400/500/600/7
• Toggle Button: Floating circular button with shadow, top-left position
• Collapsible: Sidebar can be hidden to maximize content area00 weights)
• Layout: Flexbox with horizontal direction
• Responsive: Sidebar fixed, content area flexible

Navigation Flow

graph TD
    A[Manager Login] --> B{Platform?}
    B -->|Web| C[WebRouter]
    B -->|Native| D[ManagerSidebar]
    C --> E[Top Navbar]
    D --> F[Left Sidebar]
    E --> G[React Router Routes]
    F --> H[Local State Navigation]
    G --> I[Dashboard/Users/Sessions/Profile/Settings]
    H --> I

User Experience

Web

1. Manager logs in
2. Redirected to /admin (Dashboard)
3. Top navbar always visible
4. Click menu items to navigate between routes
5. Browser back/forward works

Sidebar visible by default 5. Tap toggle button (PanelRight icon) to hide/show sidebar 6. Tap menu items to switch screens 7. Manager logs in 2. ManagerSidebar component loads 3. Dashboard screen shown by default 4. Tap menu items to switch screens 5. Active item highlighted with blue color and border

Testing

Tests located in: frontend/src/components/ManagerSidebar.test.tsx

Coverage includes:

• ✅ Renders all menu items (Dashboard, Users, Sessions, Profile, Settings)
• ✅ Shows sidebar by default
• ✅ Toggles sidebar visibility with button
• ✅ Highlights Dashboard by default
• ✅ Switches active screen on click
• ✅ Auto-closes sidebar when menu item selected
• ✅ Displays user email
• ✅ Allows navigation between screens
• ✅ Profile screen includes full functionality (edit, avatar, password)

Run tests:

cd frontend
yarn test ManagerSidebar

Future Enhancements

• Persist active screen selection
• Add keyboard shortcuts (web)
• Expandable/collapsible sidebar
• Badge notifications on menu items
• Quick actions menu
• Theme customization

Related Files

• frontend/src/components/ManagerSidebar.tsx - Main sidebar component
• frontend/src/components/ManagerSidebar.test.tsx - Tests
• frontend/src/navigation/native/NativeNavigator.tsx - Native navigation setup
• frontend/src/navigation/web/WebRouter.tsx - Web navigation setup
• frontend/src/screens/index.tsx - Admin screen components