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,7 +84,13 @@ const CollapseMenu = ({
       onOpenChange={setOpen}
       titleClassName='p-0!'
     >
-      <Menu className={cn('py-0.5', paddingLeftDepth)}>
+      <Menu>
+        <div
+          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;
 
@@ -112,6 +117,7 @@ const CollapseMenu = ({
               />
             );
           })}
+        </div>
       </Menu>
     </Collapse>
   );