feat(nav): collapsible sidebar nav

packages/styles/dist/gitlab-ui.css

@@ -7365,6 +7365,136 @@
   .gl-sub-nav-button.gl-nav-item-has-start-slot {
     padding-left: var(--gl-spacing-scale-7);
   }
+  .gl-collapsible-nav {
+    --gl-collapsible-nav-expanded-width: 15rem;
+    --gl-collapsible-nav-collapsed-width: 3.5rem;
+    flex-shrink: 0;
+    width: var(--gl-collapsible-nav-expanded-width);
+    transition: width 200ms ease, transform 200ms ease, visibility 0s;
+  }
+  .gl-collapsible-nav .gl-nav-item {
+    transition: width 200ms ease;
+  }
+  .gl-collapsible-nav > .gl-nav-list > .gl-nav-list-item > .gl-nav-item-has-start-slot {
+    padding-inline-start: var(--gl-spacing-scale-1);
+  }
+  .gl-collapsible-nav .gl-nav-item-label, .gl-collapsible-nav .gl-nav-item-addon, .gl-collapsible-nav .gl-nav-item-chevron {
+    transition: opacity 150ms ease-out, transform 150ms ease-out, max-width 150ms ease-out;
+  }
+  .gl-collapsible-nav .gl-nav-item-label {
+    min-width: 0;
+    max-width: calc(var(--gl-collapsible-nav-expanded-width) - 4rem);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .gl-collapsible-nav .gl-nav-item-addon, .gl-collapsible-nav .gl-nav-item-chevron {
+    max-width: 1.5rem;
+  }
+  .gl-collapsible-nav-portal-host, .gl-collapsible-nav-portal, .gl-collapsible-nav-dialog {
+    display: contents;
+  }
+  .gl-collapsible-nav-toggle-icon:dir(rtl) {
+    transform: scaleX(-1);
+  }
+  .gl-collapsible-nav-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1029;
+    background-color: rgb(0 0 0 / 0.5);
+    opacity: 1;
+    transition: opacity 250ms ease-out;
+  }
+  .gl-collapsible-nav-backdrop[data-starting-style], .gl-collapsible-nav-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  .gl-collapsible-nav-flyout {
+    min-width: 12rem;
+  }
+  .gl-collapsible-nav-flyout.fade[data-ending-style] {
+    transition-duration: 0s;
+  }
+  .gl-collapsible-nav-flyout .gl-sub-nav {
+    margin-top: var(--gl-spacing-scale-0);
+  }
+  @media (min-width: 1200px) {
+    .gl-collapsible-nav[data-open="false"] {
+      width: var(--gl-collapsible-nav-collapsed-width);
+    }
+    .gl-collapsible-nav[data-open="false"] .gl-nav-item-is-icon-only {
+      gap: var(--gl-spacing-scale-0);
+      width: 1.75rem;
+      height: 1.75rem;
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+    }
+    .gl-collapsible-nav[data-open="false"] .gl-nav-item-label, .gl-collapsible-nav[data-open="false"] .gl-nav-item-addon, .gl-collapsible-nav[data-open="false"] .gl-nav-item-chevron {
+      flex-grow: 0;
+      max-width: 0;
+      overflow: hidden;
+      opacity: 0;
+      transform: translateX(-0.25rem);
+    }
+    .gl-collapsible-nav[data-open="false"] .gl-nav-item-addon, .gl-collapsible-nav[data-open="false"] .gl-nav-item-chevron {
+      width: 0;
+    }
+  }
+  @media (max-width: 1199px) {
+    .gl-collapsible-nav[data-viewport-ready="false"] {
+      display: none;
+    }
+    .gl-collapsible-nav-dialog {
+      display: flex;
+      position: fixed;
+      inset-block: 0;
+      inset-inline-start: 0;
+      z-index: 1030;
+      width: max-content;
+      max-width: 100vw;
+      transform: translateX(0);
+      transition: transform 200ms ease;
+    }
+    .gl-collapsible-nav-dialog[data-closed], .gl-collapsible-nav-dialog[data-starting-style], .gl-collapsible-nav-dialog[data-ending-style] {
+      transform: translateX(-100%);
+    }
+    .gl-collapsible-nav-dialog:dir(rtl)[data-closed], .gl-collapsible-nav-dialog:dir(rtl)[data-starting-style], .gl-collapsible-nav-dialog:dir(rtl)[data-ending-style] {
+      transform: translateX(100%);
+    }
+    .gl-collapsible-nav {
+      background-color: var(--gl-background-color-overlap);
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      overflow-y: auto;
+      --tw-shadow: var(--gl-shadow-lg);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      font-size: var(--gl-font-size-base);
+      --tw-leading: 1rem;
+      line-height: 1rem;
+      position: static;
+      width: var(--gl-collapsible-nav-expanded-width);
+      max-width: calc(100vw - 3rem);
+      border-start-end-radius: var(--gl-drawer-border-radius);
+      border-end-end-radius: var(--gl-drawer-border-radius);
+    }
+    .gl-collapsible-nav > .gl-nav-list {
+      flex-grow: 1;
+      padding: var(--gl-spacing-scale-5);
+      padding-inline-start: var(--gl-spacing-scale-3);
+    }
+    .gl-collapsible-nav:dir(rtl) .gl-nav-item-indicator-left.selected::before {
+      left: auto;
+      right: calc(var(--gl-spacing-scale-3) * -1);
+      border-top-left-radius: var(--gl-border-radius-default);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: var(--gl-border-radius-default);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gl-collapsible-nav, .gl-collapsible-nav .gl-nav-item, .gl-collapsible-nav .gl-nav-item-label, .gl-collapsible-nav .gl-nav-item-addon, .gl-collapsible-nav .gl-nav-item-chevron, .gl-collapsible-nav-dialog, .gl-collapsible-nav-backdrop {
+      transition-duration: 0s;
+    }
+  }
   .gl-pagination {
     font-size: var(--gl-font-size-base);
     text-wrap: nowrap;