chore(FE-40): update CollapseMenu styling

src/components/MainDrawer.tsx

@@ -48,14 +48,15 @@ const CollapseMenu = ({
   depth = 0,
 }: CollapseMenuProps) => {
   const pathname = usePathname();
-  const [open, setOpen] = useState(isCollapseActive(pathname, link));
+  const isActive = isCollapseActive(pathname, link);
+  const [open, setOpen] = useState(isActive);
 
   const menuCollapseTitle = (
     <div
       className={cn(
-        'w-full px-3 py-2 rounded-md text-base font-semibold transition-colors flex flex-row justify-between items-center gap-2 hover:bg-primary/10',
+        'w-full px-3 py-2 rounded-md text-base font-semibold transition-colors flex flex-row justify-between items-center gap-2 hover:bg-primary/10 opacity-40',
         {
-          'bg-primary/10': open,
+          'bg-primary/10 opacity-100': open || isActive,
         }
       )}
     >
@@ -76,8 +77,6 @@ const CollapseMenu = ({
     </div>
   );
 
-  const paddingLeftDepth = `pl-${4 * (depth + 1)}`;
-
   return (
     <Collapse
       open={open}
@@ -85,33 +84,40 @@ const CollapseMenu = ({
       onOpenChange={setOpen}
       titleClassName='p-0!'
     >
-      <Menu className={cn('py-0.5', paddingLeftDepth)}>
+      <Menu>
-        {submenu?.map((item, idx) => {
+        <div
-          const hasSubmenu = item.submenu && item.submenu.length > 0;
+          className='w-full py-0.5 flex flex-col gap-0.5'
+          style={{
+            paddingLeft: `${0.5 * (depth + 1)}rem`,
+          }}
+        >
+          {submenu?.map((item, idx) => {
+            const hasSubmenu = item.submenu && item.submenu.length > 0;
+
+            if (!hasSubmenu) {
+              return (
+                <MenuItem
+                  key={idx}
+                  title={item.title}
+                  href={item.link}
+                  icon={item.icon}
+                  active={isPathActive(pathname, item.link)}
+                />
+              );
+            }
 
-          if (!hasSubmenu) {
             return (
-              <MenuItem
+              <CollapseMenu
                 key={idx}
                 title={item.title}
-                href={item.link}
+                link={item.link}
                 icon={item.icon}
-                active={isPathActive(pathname, item.link)}
+                submenu={item.submenu}
+                depth={depth + 1}
               />
             );
-          }
+          })}
-
+        </div>
-          return (
-            <CollapseMenu
-              key={idx}
-              title={item.title}
-              link={item.link}
-              icon={item.icon}
-              submenu={item.submenu}
-              depth={depth + 1}
-            />
-          );
-        })}
       </Menu>
     </Collapse>
   );