breadcrumb-the-shire/web/css/layout/app-aside-icon-bar.css

@layer layout {
  aside.aside-icon-bar {
    --app-icon-bar-item-padding: 0.6875rem 0.5rem;
    --app-icon-bar-item-size: 18px;
    --app-icon-bar-border-width: 3px;
    --app-icon-bar-hover-bg: var(--app-accordion-border-color);
    --app-icon-bar-border: 1px solid var(--app-border);
    --app-icon-bar-mobile-safe-space: calc(
      3.5rem + env(safe-area-inset-bottom)
    );
    display: none;
  }

  aside.aside-icon-bar nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
  }

  aside.aside-icon-bar .aside-icon-footer {
    display: grid;
  }

  aside.aside-icon-bar ul,
  aside.aside-icon-bar li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  aside.aside-icon-bar ul {
    display: grid;
    gap: 0;
  }

  aside.aside-icon-bar li a,
  aside.aside-icon-bar li button {
    margin: 0;
    padding: var(--app-icon-bar-item-padding);
    font-size: var(--app-icon-bar-item-size);
    text-align: center;
    color: var(--app-muted-color);
    border-radius: 0;
    background: transparent;
    border: 0;
    border-left: var(--app-icon-bar-border-width) solid transparent;
    display: block;
    width: 100%;
    cursor: pointer;
  }

  aside.aside-icon-bar li a:hover,
  aside.aside-icon-bar li a.active,
  aside.aside-icon-bar li button:hover,
  aside.aside-icon-bar li button.active {
    border-left: var(--app-icon-bar-border-width) solid var(--app-primary);
    color: var(--app-primary);
    background: var(--app-icon-bar-hover-bg);
  }

  aside.aside-icon-bar li a:focus-visible,
  aside.aside-icon-bar li button:focus-visible {
    outline: 2px solid var(--app-primary-focus);
    outline-offset: -2px;
    border-left-color: transparent;
    color: var(--app-contrast);
  }

  /* ── Outline/fill icon swap ── */
  [data-icon-swap] [data-icon="fill"] {
    display: none;
  }

  [data-icon-swap]:hover [data-icon="outline"],
  [data-icon-swap].active [data-icon="outline"] {
    display: none;
  }

  [data-icon-swap]:hover [data-icon="fill"],
  [data-icon-swap].active [data-icon="fill"] {
    display: inline;
  }

  @media (min-width: 768px) {
    aside.aside-icon-bar {
      border-right: var(--app-icon-bar-border);
      display: block;
      position: sticky;
      top: var(--app-topbar-height);
      align-self: start;
      height: calc(100dvh - var(--app-topbar-height));
      z-index: 11;
    }

    aside.aside-icon-bar nav {
      height: 100%;
    }

    .is-sidebar-collapsed aside.aside-icon-bar {
      border-right: 0;
    }
  }

  /* Mobile drawer — the icon-bar slides in from the left alongside the sidebar,
     staying vertical like desktop so menu switching works identically.
     The two asides form one visual unit; both use the same slide transition. */
  @media (max-width: 767px) {
    aside.aside-icon-bar {
      display: block;
      position: fixed;
      top: var(--app-topbar-height);
      bottom: 0;
      left: 0;
      width: 52px;
      z-index: var(--z-drawer);
      border-right: 1px solid var(--app-border);
      background: var(--app-sidebar-background-color);
      transform: translateX(-100%);
      transition: transform 300ms ease;
    }

    .drawer-open aside.aside-icon-bar {
      transform: translateX(0);
    }

    /* Constrain nav to the aside height (the global 100vh rule breaks under
       iOS Safari's dynamic address bar) and give the first icon breathing room
       from the topbar edge. */
    aside.aside-icon-bar nav {
      height: 100%;
      padding-block: calc(var(--app-spacing) * 1.25);
    }
  }
}