From ee335e63bac52d30b4b83426e0f3a4ea687f670a Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Sat, 4 Jul 2026 08:39:16 +0000
Subject: [PATCH] style: sidebar ui

---
 .../src/components/layout/FreightSidebar.tsx  | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
index 59efe49a7..391a8157d 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
@@ -18,6 +18,7 @@ import {
 } from "react";
 
 import type { SidebarItem, SidebarSection } from "./types";
+import { Link } from "react-router-dom";
 
 export interface FreightSidebarProps {
   sections: SidebarSection[];
@@ -35,15 +36,15 @@ const BRAND_LOGO = "/assets/logo.svg";
 const navClassNames = (active: boolean) =>
   active
     ? {
-        root: "rounded-md transition-all duration-150 bg-edr-soft! ring-1 ring-inset ring-edr-primary/40 [&_svg]:size-[16px]",
-        label: "text-edr-primary-dark! font-medium! text-sm!",
-        section: "text-edr-primary-dark!",
-      }
+      root: "rounded-md transition-all py-1.5! duration-150 bg-edr-soft! ring-1 ring-inset ring-edr-primary/40 [&_svg]:size-[16px]",
+      label: "text-edr-primary-dark! font-medium! text-sm!",
+      section: "text-edr-primary-dark!",
+    }
     : {
-        root: "rounded-md transition-all duration-150 hover:bg-[#EEF2F6]! [&_svg]:size-4",
-        label: "text-edr-text! font-medium! text-sm! hover:text-edr-ink!",
-        section: "text-edr-text!",
-      };
+      root: "rounded-md transition-all py-1.5! duration-150 hover:bg-[#EEF2F6]! [&_svg]:size-4",
+      label: "text-edr-text! font-medium! text-sm! hover:text-edr-ink!",
+      section: "text-edr-text!",
+    };
 
 const itemKey = (parentKey: string, item: SidebarItem, index: number) =>
   `${parentKey}/${item.href ?? item.label}/${index}`;
@@ -65,7 +66,9 @@ const FreightSidebar = ({
   const isHrefActive = useCallback(
     (href: string) => {
       const normalized = href.toLowerCase();
-      return activePath === normalized || activePath.startsWith(`${normalized}/`);
+      return (
+        activePath === normalized || activePath.startsWith(`${normalized}/`)
+      );
     },
     [activePath],
   );
@@ -109,9 +112,7 @@ const FreightSidebar = ({
 
       if (hasChildren) {
         const isLink = !!item.href;
-        const active =
-          (isLink ? isHrefActive(item.href!) : false) ||
-          branchActive(item.children!);
+        const active = isLink ? isHrefActive(item.href!) : false;
         const isOpen = openMap[key] ?? false;
 
         return (
@@ -124,7 +125,7 @@ const FreightSidebar = ({
             active={active}
             opened={isOpen}
             classNames={navClassNames(active)}
-            onClick={ () => toggle(key)}
+            onClick={() => toggle(key)}
             rightSection={
               <Box
                 component="span"
@@ -140,7 +141,9 @@ const FreightSidebar = ({
                 <ChevronDown
                   size={16}
                   className="text-edr-muted transition-transform duration-200"
-                  style={{ transform: isOpen ? "rotate(-180deg)" : "rotate(180deg)" }}
+                  style={{
+                    transform: isOpen ? "rotate(-180deg)" : "rotate(180deg)",
+                  }}
                 />
               </Box>
             }
@@ -161,8 +164,9 @@ const FreightSidebar = ({
           label={item.label}
           leftSection={item.icon}
           active={active}
+          component={Link}
           classNames={navClassNames(active)}
-          onClick={() => onNavigate?.(item.href!)}
+          to={item.href!}
         />
       );
     },
@@ -178,7 +182,7 @@ const FreightSidebar = ({
             tt="uppercase"
             px="sm"
             mb={6}
-            className={ "text-edr-muted!" }
+            className={"text-edr-muted!"}
             style={{ fontWeight: 500, fontSize: 10, letterSpacing: "0.05em" }}
           >
             {section.title}
@@ -232,14 +236,24 @@ const FreightSidebar = ({
           </Box>
         </Group>
         {onClose && (
-          <UnstyledButton onClick={onClose} hiddenFrom="sm" aria-label="Close sidebar">
+          <UnstyledButton
+            onClick={onClose}
+            hiddenFrom="sm"
+            aria-label="Close sidebar"
+          >
             <X size={18} className="text-edr-muted" strokeWidth={1.8} />
           </UnstyledButton>
         )}
       </Box>
 
       {/* Nav */}
-      <AppShell.Section grow component={ScrollArea} type="never" px="sm" pb="md">
+      <AppShell.Section
+        grow
+        component={ScrollArea}
+        type="never"
+        px="sm"
+        pb="md"
+      >
         <Stack gap="lg">{renderedSections}</Stack>
       </AppShell.Section>
     </AppShell.Navbar>