Skip to main content

Sidebar

The primary navigation hub for your dashboard.

Preview​

Sidebar Toggle Button Example

Overview​

The LibreApps Desktop Sidebar is a highly flexible and responsive navigation component. It supports nested menus, collapsible sections, and dynamic updates via the rebrand engine.

Key Features​

  • Collapsible: Users can collapse the sidebar to maximize their workspace.
  • Nested Menus: Support for multi-level navigation structures.
  • Dynamic Labels: Labels and icons can be updated via settings.md.
  • Active State: Automatically highlights the current route.
  • Mobile Friendly: Transitions to a slide-out drawer on smaller screens.

Configuration​

The sidebar structure is typically defined in src/configs/sidebar.ts. This file contains an array of navigation items:

export const sidebarConfig = [
  {
    title: "Dashboards",
    items: [
      { title: "Analytics", href: "/analytics", icon: BarChart },
      { title: "CRM", href: "/crm", icon: Users },
    ],
  },
  // ...
];

Integration with Rebrand Engine​

The scripts/rebrand-nav-logic.js script reads your settings.md and updates the sidebarConfig accordingly. This allows you to rename, reorder, or disable navigation items without touching the code.

Best Practices​

  • ✅ Do this: Group related pages into logical sections.
  • ✅ Do this: Use clear and concise labels for navigation items.
  • ❌ Don't do this: Add too many top-level items to the sidebar; use nested menus for better organization.