From 97e4bc9bad34f7bb3437e09ba6503fbeba777038 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Thu, 6 Feb 2025 10:00:00 +0700
Subject: [PATCH] Refactor sidebar navigation menu item rendering and styling
 (#150)

- Improve sidebar menu item layout and responsiveness
- Extract and optimize classNames for link and span elements
- Remove conditional rendering of `renderAction`
- Enhance dynamic styling for collapsed and expanded sidebar states
---
 packages/ui/src/shadcn/sidebar.tsx | 45 +++++++++++++-----------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/packages/ui/src/shadcn/sidebar.tsx b/packages/ui/src/shadcn/sidebar.tsx
index 9ea913cb9..4df3be872 100644
--- a/packages/ui/src/shadcn/sidebar.tsx
+++ b/packages/ui/src/shadcn/sidebar.tsx
@@ -526,7 +526,7 @@ const SidebarMenuItem: React.FC<React.ComponentProps<'li'>> = ({
   <li
     data-sidebar="menu-item"
     className={cn(
-      'group/menu-item relative flex group-data-[collapsible=icon]:justify-center',
+      'group/menu-item relative group-data-[collapsible=icon]:justify-center',
       className,
     )}
     {...props}
@@ -940,22 +940,27 @@ export function SidebarNavigation({
                                       })}
                                     >
                                       {children.map((child) => {
-                                        if (child.renderAction) {
-                                          return (
-                                            <SidebarMenuSubItem
-                                              key={child.path}
-                                            >
-                                              {child.renderAction}
-                                            </SidebarMenuSubItem>
-                                          );
-                                        }
-
                                         const isActive = isRouteActive(
                                           child.path,
                                           currentPath,
                                           child.end,
                                         );
 
+                                        const linkClassName = cn(
+                                          'flex items-center',
+                                          {
+                                            'mx-auto w-full gap-0! [&>svg]:flex-1':
+                                              !open,
+                                          },
+                                        );
+
+                                        const spanClassName = cn(
+                                          'w-auto transition-opacity duration-300',
+                                          {
+                                            'w-0 opacity-0': !open,
+                                          },
+                                        );
+
                                         return (
                                           <SidebarMenuSubItem key={child.path}>
                                             <SidebarMenuSubButton
@@ -963,24 +968,12 @@ export function SidebarNavigation({
                                               asChild
                                             >
                                               <Link
-                                                className={cn(
-                                                  'flex items-center',
-                                                  {
-                                                    'mx-auto w-full gap-0! [&>svg]:flex-1':
-                                                      !open,
-                                                  },
-                                                )}
+                                                className={linkClassName}
                                                 href={child.path}
                                               >
                                                 {child.Icon}
-                                                <span
-                                                  className={cn(
-                                                    'w-auto transition-opacity duration-300',
-                                                    {
-                                                      'w-0 opacity-0': !open,
-                                                    },
-                                                  )}
-                                                >
+
+                                                <span className={spanClassName}>
                                                   <Trans
                                                     i18nKey={child.label}
                                                     defaults={child.label}