ECHOES-1032 Align icons in sidebar collapsed mode

Author: david-cho-lerat-sonarsource

src/components/layout/sidebar-navigation/SidebarNavigation.tsx

@@ -100,7 +100,7 @@ const SidebarNavigationWrapper = styled.nav`
 
   --sidebar-navigation-width: ${cssVar('layout-sidebar-navigation-sizes-width-open')};
 
-  // hover and focus-within pilotes the open state of the sidebar
+  // hover and focus-within pilots the open state of the sidebar
   [data-sidebar-docked='false'] &:not(:hover, :focus-within) {
     --sidebar-navigation-width: ${cssVar('layout-sidebar-navigation-sizes-width-closed')};
   }

src/components/layout/sidebar-navigation/SidebarNavigationAccordionItem.tsx

@@ -164,6 +164,11 @@ AccordionItem.displayName = 'AccordionItem';
 
 const AccordionItemPanel = styled.section`
   margin-left: ${cssVar('dimension-space-300')};
+
+  [data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
+    margin-left: ${cssVar('dimension-space-200')};
+  }
+
   padding-left: ${cssVar('dimension-space-100')};
   padding-right: ${cssVar('dimension-space-100')};
   border-left: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
@@ -173,21 +178,11 @@ const AccordionItemPanel = styled.section`
   --sidebar-navigation-accordion-children-display: flex;
   --sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-50')};
 
-  // The next two rules hide the child SidebarNavigationItems when the accordion is closed, and also
-  // when the sidebar is neither docked nor open (hovered or focused).
+  // Hide the child SidebarNavigationItems when the accordion is closed
   &[data-accordion-open='false'] {
     --sidebar-navigation-accordion-children-display: none;
     --sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-0')};
   }
-
-  [data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
-    margin: 0;
-    padding: 0;
-    border-left: none;
-
-    --sidebar-navigation-accordion-children-display: none;
-    --sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-0')};
-  }
 `;
 
 AccordionItemPanel.displayName = 'AccordionItemPanel';
@@ -198,6 +193,10 @@ export const AccordionItemsList = styled.ul`
   display: flex;
   flex-direction: column;
   gap: var(--sidebar-navigation-accordion-children-gap);
+
+  [data-sidebar-docked='false'] nav:not(:hover, :focus-within) & > li {
+    visibility: hidden;
+  }
 `;
 
 AccordionItemsList.displayName = 'AccordionItemsList';

src/components/layout/sidebar-navigation/SidebarNavigationBody.tsx

@@ -82,7 +82,7 @@ SidebarNavigationBodyInner.displayName = 'SidebarNavigationBodyInner';
 
 const SidebarNavigationBottomShadowScroll = styled(BottomShadowScroll)`
   [data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
-    display: none;
+    opacity: 0.5;
   }
 `;
 SidebarNavigationBottomShadowScroll.displayName = 'SidebarNavigationBottomShadowScroll';

src/components/layout/sidebar-navigation/SidebarNavigationGroup.tsx

@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
 import { forwardRef, PropsWithChildren, useId } from 'react';
 import { TextNode } from '~types/utils';
 import { cssVar } from '~utils/design-tokens';
+import { Divider } from '../../divider';
 import { Text } from '../../typography';
 import { UnstyledListItem } from './SidebarNavigationItemStyles';
 
@@ -52,9 +53,11 @@ export const SidebarNavigationGroup = forwardRef<
         role="group"
         {...radixProps}>
         <SidebarNavigationGroupLabel id={id}>
-          <Text isSubtle size="small">
+          <SidebarNavigationGroupLabelText isSubtle size="small">
             {label}
-          </Text>
+          </SidebarNavigationGroupLabelText>
+
+          <SidebarNavigationGroupLabelDivider />
         </SidebarNavigationGroupLabel>
         <SidebarNavigationGroupList>{children}</SidebarNavigationGroupList>
       </SidebarNavigationGroupContainer>
@@ -76,12 +79,25 @@ const SidebarNavigationGroupLabel = styled.label`
   align-items: center;
   height: ${cssVar('dimension-height-800')};
   padding: 0 ${cssVar('dimension-space-100')};
+  white-space: nowrap;
+`;
+SidebarNavigationGroupLabel.displayName = 'SidebarNavigationGroupLabel';
 
+const SidebarNavigationGroupLabelText = styled(Text)`
   [data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
     display: none;
   }
 `;
-SidebarNavigationGroupLabel.displayName = 'SidebarNavigationGroupLabel';
+SidebarNavigationGroupLabelText.displayName = 'SidebarNavigationGroupLabelText';
+
+const SidebarNavigationGroupLabelDivider = styled(Divider)`
+  [data-sidebar-docked='true'] &,
+  nav:hover &,
+  nav:focus-within & {
+    display: none;
+  }
+`;
+SidebarNavigationGroupLabelDivider.displayName = 'SidebarNavigationGroupLabelDivider';
 
 export const SidebarNavigationGroupList = styled.ul`
   all: unset;