style: sidebar improvmetn

apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx

@@ -92,7 +92,9 @@ const FreightSidebar = ({
         walk(item.children, key);
       });
     };
-    sections.forEach((section) => walk(section.items, section.title));
+    sections.forEach((section, i) =>
+      walk(section.items, section?.title ?? "" + i++),
+    );
     return acc;
   }, [sections, isHrefActive, branchActive]);
 
@@ -126,6 +128,7 @@ const FreightSidebar = ({
             opened={isOpen}
             classNames={navClassNames(active)}
             onClick={() => toggle(key)}
+            childrenOffset="sm"
             rightSection={
               <Box
                 component="span"
@@ -142,7 +145,7 @@ const FreightSidebar = ({
                   size={16}
                   className="text-edr-muted transition-transform duration-200"
                   style={{
-                    transform: isOpen ? "rotate(-180deg)" : "rotate(180deg)",
+                    transform: isOpen ? "rotate(-180deg)" : "rotate(0deg)",
                   }}
                 />
               </Box>
@@ -166,6 +169,7 @@ const FreightSidebar = ({
           active={active}
           component={Link}
           classNames={navClassNames(active)}
+          onClick={onClose}
           to={item.href!}
         />
       );
@@ -177,19 +181,21 @@ const FreightSidebar = ({
     () =>
       sections.map((section) => (
         <Box key={section.title}>
-          <Text
-            size="xs"
-            tt="uppercase"
-            px="sm"
-            mb={6}
-            className={"text-edr-muted!"}
-            style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }}
-          >
-            {section.title}
-          </Text>
+          {section.title && (
+            <Text
+              size="xs"
+              tt="uppercase"
+              px="sm"
+              mb={6}
+              className={"text-edr-muted!"}
+              style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }}
+            >
+              {section.title}
+            </Text>
+          )}
           <Stack gap={2}>
             {section.items.map((item, i) =>
-              renderItem(item, itemKey(section.title, item, i)),
+              renderItem(item, itemKey(section.title ?? "" + i, item, i)),
             )}
           </Stack>
         </Box>
@@ -257,7 +263,7 @@ const FreightSidebar = ({
         px="sm"
         pb="md"
       >
-        <Stack gap="lg">{renderedSections}</Stack>
+        <Stack gap="md">{renderedSections}</Stack>
       </AppShell.Section>
     </AppShell.Navbar>
   );

apps/edr-freight-web/backoffice/src/components/layout/types.ts

@@ -12,7 +12,7 @@ export interface SidebarItem {
 
 export interface SidebarSection {
   /** Section label shown above a group of nav items (e.g. "Main menu"). */
-  title: string;
+  title?: string;
   items: SidebarItem[];
   /** When true, section title uses muted grey instead of dark text. */
   mutedTitle?: boolean;