Fix/update sidebar [run-chromatic][skip-cd] (#774)

Author: th-94

src/components/Sidebar/sgds-sidebar-item.ts

@@ -26,6 +26,7 @@ export class SgdsSidebarItem extends SidebarElement {
         class=${classMap({
           "sidebar-item": true,
           "sidebar-item--collapsed": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,
+          "sidebar-item-leaf": this._childLevel > 2,
           active: this._selected
         })}
         @click=${() => this._handleClick()}

src/components/Sidebar/sgds-sidebar-section.ts

@@ -95,12 +95,15 @@ export class SgdsSidebarSection extends SidebarElement {
       >
         ${this.title !== ""
           ? html`<div
-              class="sidebar-section-label"
+              class=${classMap({
+                "sidebar-section-label": true,
+                "sidebar-section-label--collapsible": this.collapsible
+              })}
               role="button"
               @click=${this._handleClick}
               aria-expanded=${!this.collapsed}
               aria-disabled=${!this.collapsible}
-              tabindex="0"
+              tabindex=${this.collapsible ? 0 : -1}
             >
               <span>${this.title}</span>
               ${this.collapsible

src/components/Sidebar/sidebar-item.css

@@ -6,11 +6,11 @@
 }
 
 .sidebar-item.active,
-.sidebar-item:hover {
+.sidebar-item:hover,
+.sidebar-item:focus-visible {
   background-color: var(--sgds-bg-translucent-subtle);
 }
 
-.sidebar-item:focus,
 .sidebar-item:focus-visible {
   outline: var(--sgds-outline-focus);
   outline-offset: var(--sgds-outline-offset-focus);
@@ -39,9 +39,22 @@
 }
 
 .sidebar-item-label.offset {
+  color: var(--sgds-color-subtle);
   margin-left: var(--sgds-margin-2-xl);
 }
 
+.sidebar-item-leaf.active .sidebar-item-label.offset,
+.sidebar-item-leaf:hover .sidebar-item-label.offset,
+.sidebar-item-leaf:focus-visible .sidebar-item-label.offset {
+  color: var(--sgds-color-default);
+}
+
+.sidebar-item-leaf.active,
+.sidebar-item-leaf:hover,
+.sidebar-item-leaf:focus-visible {
+  background-color: var(--sgds-bg-translucent-subtle);
+}
+
 .sidebar-item-label-wrapper .sidebar-item.active {
   background-color: var(--sgds-surface-raised);
   color: var(--sgds-primary-color-default);

src/components/Sidebar/sidebar-section.css

@@ -7,20 +7,23 @@
   display: flex;
   align-items: center;
   gap: var(--sgds-gap-2-xs);
-  cursor: pointer;
   font-size: var(--sgds-font-size-0);
   line-height: var(--sgds-line-height-20);
   color: var(--sgds-label-color-subtle);
   padding: var(--sgds-padding-xs) var(--sgds-padding-sm);
   border-radius: var(--sgds-border-radius-md);
 }
 
-.sidebar-section-label:hover {
+.sidebar-section-label--collapsible {
+  cursor: pointer;
+}
+
+.sidebar-section-label--collapsible:hover,
+.sidebar-section-label--collapsible:focus-visible {
   color: var(--sgds-label-color-default);
 }
 
-.sidebar-section-label:focus,
-.sidebar-section-label:focus-visible {
+.sidebar-section-label--collapsible:focus-visible {
   outline: var(--sgds-outline-focus);
   outline-offset: var(--sgds-outline-offset-focus);
 }

src/components/Sidebar/sidebar.css

@@ -6,8 +6,8 @@
   z-index: var(--sgds-z-index-sticky);
   width: var(--sgds-dimension-288);
   transition: width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);
-
 }
+
 .sidebar:not(.overlay).sidebar--collapsed {
   width: var(--sgds-dimension-72);
 }
@@ -71,6 +71,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--sgds-gap-md);
+  margin-top: var(--sgds-margin-lg);
+}
+
+slot[name="lower"]::slotted(*) {
+  margin-top: var(--sgds-margin-lg);
 }
 
 .sidebar-nested-overlay {