Skip to main content

Shadcn Sidebar

Overview​

The application requires a modular sidebar implementation using shadcn UI components. The sidebar will support multiple services, each with its own set of module-specific menu items, along with common menu items that persist across all services.

Key Components​

1. Sidebar Header​

  • Contains service selector dropdown
  • Features:
    • Displays current service name and icon
    • Expandable/collapsible logo states
    • Dropdown position changes based on sidebar state:
      • Expanded state: Dropdown appears at bottom
      • Collapsed state: Dropdown appears to the side
    • Visual indicator for active service (checkmark)

2. Sidebar Content​

The content area consists of two main sections:

A. Service-Specific Menu Items​

  • Dynamically loaded based on selected service

  • Each module defines its own menu configuration

  • Supports nested menu items (up to multiple levels)

  • Examples:

    Amalgator Service:
    └── Machinery
        ├── Farming
        ├── Earth movers
        ├── Drones
        └── Operators
    └── Farms
        ├── Farm List
        └── Settings

    Agrocare Service:
    └── Seeds
    └── Fertilizer
    └── Pesticides
    └── Feed

B. Common Menu Items​

  • Appears below service-specific menus
  • Consistent across all services
  • Shared routes (e.g., /contacts, /policy)
  • Examples:
    • Contacts
    • Policy
    • Terms
    • Help

Technical Specifications​

1. State Management​

  • Service selection state
  • Sidebar collapse state
  • Menu expansion states:
    • Common menu states persist across service switches
    • Service-specific menu states reset on service switch

2. Routing​

  • Module-based routing without service prefixes
  • Examples:
    • /machinery/operators
    • /farms/settings
    • /contacts (common route)

Component Dependencies​

  • @shadcn/ui sidebar components
  • Radix UI for dropdowns
  • Lucide React for icons

Behavioral Requirements​

Service Switching​

  1. User selects new service from dropdown
  2. Service-specific menus smoothly transition
  3. Common menus remain unchanged
  4. Menu states:
    • Common menu expansion states preserved
    • Service-specific menus reset to default state
  1. Sidebar can be collapsed to icon-only view
  2. Service selector adapts to collapsed state
  3. Menu items show only icons in collapsed state
  4. Hover reveals full menu text

Error Handling​

  • Graceful fallback for missing module configurations
  • Error boundaries for menu rendering issues
  • Loading states for dynamic menu transitions