feat(nx-dev): increase section group items

Author: juristr

nx-dev/ui-common/src/lib/sidebar.tsx

@@ -96,6 +96,7 @@ function SidebarSection({
                     key={item.id + '-' + index}
                     item={item}
                     isNested={false}
+                    firstLevel={false} // Not needed at the top level
                     isInTechnologiesPath={isTechnologiesItem}
                   />
                 </div>
@@ -111,10 +112,12 @@ function SidebarSectionItems({
   item,
   isNested = false,
   isInTechnologiesPath = false,
+  firstLevel = false,
 }: {
   item: MenuItem;
   isNested?: boolean;
   isInTechnologiesPath?: boolean;
+  firstLevel?: boolean;
 }): JSX.Element {
   const router = useRouter();
   const [collapsed, setCollapsed] = useState(!item.disableCollapsible);
@@ -123,7 +126,8 @@ function SidebarSectionItems({
   const isTechnologiesItem = item.id === 'technologies';
 
   // If this is direct child of the Technologies item, show an icon
-  const isDirectTechnologyChild = isInTechnologiesPath;
+  const isDirectTechnologyChild =
+    isInTechnologiesPath && item.id !== 'technologies';
 
   // Get the icon key for this technology
   let iconKey = null;
@@ -152,10 +156,10 @@ function SidebarSectionItems({
         data-testid={`section-h5:${item.id}`}
         className={cx(
           'group flex items-center py-2',
-          isDirectTechnologyChild
-            ? '-ml-1 rounded-md px-1 hover:bg-slate-50 dark:hover:bg-slate-800/60'
-            : '',
-          'text-sm font-semibold text-slate-800 lg:text-sm dark:text-slate-200',
+          isDirectTechnologyChild ? '-ml-1 px-1 ' : '',
+          !isNested
+            ? 'text-base font-semibold text-slate-800 lg:text-base dark:text-slate-200'
+            : 'text-sm font-semibold text-slate-800 lg:text-sm dark:text-slate-200',
           item.disableCollapsible ? 'cursor-text' : 'cursor-pointer'
         )}
         onClick={handleCollapseToggle}
@@ -199,13 +203,17 @@ function SidebarSectionItems({
             handleCollapseToggle();
           }
 
+          // Skip pl-3 for first level items, apply it to deeper nested levels
+          const shouldApplyPadding = isNested && !firstLevel;
+
           return (
             <li
               key={subItem.id + '-' + index}
               data-testid={`section-li:${subItem.id}`}
               className={cx(
-                'relative pl-3',
-                !isNested && 'transition-colors duration-150',
+                'relative',
+                shouldApplyPadding && 'pl-3', // Only apply padding for deeply nested items, not first level
+                !isNested && 'pl-2 transition-colors duration-150', // Add pl-2 for padding between vertical bar and text
                 !isNested && 'border-l-2',
                 !isNested &&
                   (isActiveLink
@@ -217,6 +225,7 @@ function SidebarSectionItems({
                 <SidebarSectionItems
                   item={subItem}
                   isNested={true}
+                  firstLevel={!isNested} // Set firstLevel=true when coming from a top-level item
                   isInTechnologiesPath={isTechnologiesItem}
                 />
               ) : (