quickshell-web/src/styles/docs/nav/nav.css

@import "./nav-tree.css";
@import "./search.css";

.nav-wrapper {
  display: none;
}

.nav-toggle {
  position: unset;
  height: 24px;
  font-size: 1.614rem;
  overflow-y: scroll;
  max-height: 500px;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &:hover {
    cursor: pointer;
  }

  & .nav-items {
    position: absolute;
    z-index: 11;
    overflow: hidden;
    top: 2.6rem;
    left: calc(-3rem + -80svw);
    height: calc(100svh - 2.5rem);
    scrollbar-width: none;
    font-size: 1.2rem;
    -ms-overflow-style: none;
    background-color: hsl(var(--overlay-bkg));
    border-right: solid hsl(var(--overlay-bkg-border)) 1px;

    &::-webkit-scrollbar {
      display: none;
    }

    transition:
      left 0.3s ease,
      padding 0.3s ease;

    &.shown {
      display: flex;
      flex-direction: column;
      left: -1rem;
    }

    & .navtree {
      /* lines up with non overlay nav */
      padding: 0.5rem 0.618rem;

      height: 100%;
      width: 80svw;
      box-sizing: content-box;
      overflow-y: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
      margin-bottom: 1rem;
      text-wrap: nowrap;

      & [data-part="item-indicator"] {
        margin-left: 1rem;
        margin-right: 0.8rem;
        height: 2rem;
        width: 2rem;

        & svg {
          height: max-content;
          width: 100%;
        }
      }

      & [data-part="item-trigger"] {
        min-height: 3em;
        font-size: 1.2rem;
      }

      & [data-part="item-content"] {
        margin-left: 3.7rem;
      }

      & [data-part="item"] {
        & [data-part="item-content"] > div {
            min-height: 3em;
            & > p { margin: auto 0; }
        }
      }
    }
  }
}

@media (min-width: 40rem) {
  .nav-toggle {
    .nav-items {
      font-size: 1rem;
      top: 2.5rem;
      left: -24rem;

      & .navtree {
        width: 21rem;
      }

      & .navtree {
        & [data-part="item-indicator"] {
          margin-left: 0.2rem;
          margin-right: 0rem;
          height: 1.5rem;
          width: 1.5rem;

          & svg {
            height: unset;
            width: unset;
          }
        }

        & [data-part="item-trigger"] {
          min-height: 2.2rem;
          font-size: 1rem;
        }

        & [data-part="item-content"] {
          margin-left: 1.6rem;
        }

        & [data-part="item"] {
          & [data-part="item-content"] > div {
            min-height: 2.2rem;
          }
        }
      }
    }
  }
}

@media (min-width: 85rem) {
  .nav-wrapper-mobile {
    display: none;
  }

  .nav-wrapper {
    display: block;
    width: 21rem;
    position: sticky;
    top: 3.5rem;
    flex-shrink: 0;
    overflow-y: scroll;
    max-height: calc(100svh - 4rem);
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 10;
  }

  .navtree {
    width: 100%;
    z-index: 1;
    margin: 0.5rem 0;
  }
}