--wip-- [skip ci]

Author: gregaubert

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

@@ -99,7 +99,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

@@ -163,41 +163,40 @@ const AccordionItem = styled.button`
 AccordionItem.displayName = 'AccordionItem';
 
 const AccordionItemPanel = styled.section`
-  margin-left: ${cssVar('dimension-space-300')};
+  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')};
 
   // The children SidebarNavigationItems rely on this css property to set their display value, falling
   // back to flex if not inside an accordion
   --sidebar-navigation-accordion-children-display: flex;
-  --sidebar-navigation-accordion-children-gap: ${cssVar('dimension-space-50')};
+  --sidebar-navigation-accordion-children-visibility: visible;
 
-  // 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).
+  // The rule 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')};
   }
 
+  // This rule changes the way the SidebarNavigationItems looks like when the accordion is open but the sidebar is collapsed
   [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')};
+    --sidebar-navigation-accordion-children-visibility: hidden;
   }
 `;
 
 AccordionItemPanel.displayName = 'AccordionItemPanel';
 
-export const AccordionItemsList = styled.ul`
+const AccordionItemsList = styled.ul`
   all: unset;
 
   display: flex;
   flex-direction: column;
-  gap: var(--sidebar-navigation-accordion-children-gap);
+  gap: ${cssVar('dimension-space-50')};
+
+  [data-sidebar-docked='false'] nav:not(:hover, :focus-within) & {
+    margin-left: calc(-1 * ${cssVar('dimension-space-300')});
+    width: ${cssVar('dimension-width-400')};
+  }
 `;
 
 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>
@@ -87,12 +90,24 @@ 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'] &,
+  [data-sidebar-docked='false'] nav:is(:hover, :focus-within) & {
+    display: none;
+  }
+`;
+SidebarNavigationGroupLabelDivider.displayName = 'SidebarNavigationGroupLabelDivider';
 
 export const SidebarNavigationGroupList = styled.ul`
   all: unset;

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

@@ -139,11 +139,14 @@ const NavigationItem = styled(NavLinkBase)`
   // This css property is set by the SidebarNavigationAccordionItem component
   // Fallback to flex if not inside an accordion
   display: var(--sidebar-navigation-accordion-children-display, flex);
+  visibility: var(--sidebar-navigation-accordion-children-visibility, visible);
 
   &:active,
   &.active {
     // Always display the item when active even if behind a closed accordion, this overrides the previously set display value from the css property
     display: flex;
+    visibility: visible;
+    outline: ${cssVar('color-support-white')} solid ${cssVar('focus-border-width-default')};
 
     background-color: ${cssVar('sidebar-navigation-item-colors-background-active')};
     color: ${cssVar('color-text-accent')};