UI

libs/ui/src/lib/layout/AppSidebar.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import {
   AppShell,
   NavLink,
@@ -21,6 +22,7 @@ export interface NavItem {
   icon: Icon;
   to?: string;
   soon?: boolean;
+  section?: string;
 }
 
 interface AppSidebarProps {
@@ -97,9 +99,25 @@ export function AppSidebar({
       {/* Navigation items */}
       <AppShell.Section grow component={ScrollArea} p="md">
         <Stack gap={4}>
-          {navItems.map((item) => {
+          {navItems.map((item, index) => {
             const ItemIcon = item.icon;
             const active = activeNavItem(item);
+            const showHeader =
+              !collapsed && !!item.section && item.section !== navItems[index - 1]?.section;
+
+            const header = showHeader ? (
+              <Text
+                size="xs"
+                fw={700}
+                c="dimmed"
+                mt={index === 0 ? 0 : 12}
+                mb={2}
+                px={8}
+                style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
+              >
+                {item.section}
+              </Text>
+            ) : null;
 
             if (collapsed) {
               return (
@@ -124,15 +142,17 @@ export function AppSidebar({
             }
 
             return (
-              <NavLink
-                key={item.label}
-                active={active}
-                label={t(item.label)}
-                leftSection={<ItemIcon size={19} stroke={1.6} />}
-                onClick={() => onNavigate(item)}
-                variant="light"
-                styles={{ root: { borderRadius: rem(10) }, label: { fontWeight: 500 } }}
-              />
+              <Fragment key={item.label}>
+                {header}
+                <NavLink
+                  active={active}
+                  label={t(item.label)}
+                  leftSection={<ItemIcon size={19} stroke={1.6} />}
+                  onClick={() => onNavigate(item)}
+                  variant="light"
+                  styles={{ root: { borderRadius: rem(10) }, label: { fontWeight: 500 } }}
+                />
+              </Fragment>
             );
           })}
         </Stack>