Sidebar

The Sidebar.tsx file defines the main collapsible navigation sidebar for the Glint admin theme. It is designed to be dynamic, customizable, and developer-friendly. The sidebar supports multi-level menus, translations, responsive behavior, and integrates seamlessly with React Router.

Main Features

• 📂 Dynamic Menus: Menu structure is loaded from menu.json inside src/data/.
• 🌍 Multi-language Support: Menu labels are translated using react-i18next.
• 📱 Responsive Behavior: Sidebar auto-collapses on smaller screens.
• 📑 Nested Submenus: Supports expandable child menus.
• 🎨 Custom Scrollbar: Uses SimpleBar for smooth scrolling UI.
• 🧭 Active State Highlight: Current route is auto-highlighted via React Router’s useLocation.
• ⚡ Easy Toggle: Sidebar can be collapsed/expanded using a button or body class.

Managing the Menu

The menu items are defined in menu.json under src/data/. Each menu group can have a category (optional) and a list of items. Each item may have:

• label – The text of the menu item (translatable key).
• icon – The icon class (e.g., lni lni-dashboard).
• route – The path for navigation (React Router).
• children – (Optional) Submenu items with label and route.

        
          {
            "items": [
              {
                "label": "Dashboard",
                "icon": "lni lni-dashboard-square-1",
                "children": [
                  { "label": "E-Commerce", "route": "/" },
                  { "label": "CRM", "route": "/crm" },
                  { "label": "SAAS", "route": "/saas" },
                  { "label": "Academy", "route": "/academy" },
                  { "label": "Creator/Blogger", "route": "/creator" }
                ],
                "open": false
              }
            ]
          },
          {
            "category": "APPS & MODULES",
            "items": [
              { "label": "Email", "icon": "lni lni-envelope-1", "route": "/email" },
              { "label": "Chat", "icon": "lni lni-message-2", "route": "/chat" },
              { "label": "Calendar", "icon": "lni lni-calendar-days", "route": "/calendar" }
            ]
          },
        
      

Branding (Logo)

The logo section is inside Sidebar.tsx under .glint-brand. By default, it uses:

• /images/glint-logo-icon.png – Sidebar logo icon.
• /images/glint-text-logo.png – Text logo beside the icon.

To replace them, simply update these image files or point to your own assets.

Customization Notes

• To add or remove menu items, edit menu.json.
• To change the default open submenu, ensure the child route matches currentRoute.
• To update the logo, replace the files inside public/images.
• To customize the scrollbar, adjust SimpleBar options or styles in SCSS.