initial commit

src/styles/docs/nav/nav.css

@@ -0,0 +1,127 @@
+@import "./nav-tree.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;
+  }
+
+  & svg,
+  div {
+    height: max-content;
+    width: 100%;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .nav-items {
+    position: absolute;
+    z-index: 11;
+    overflow-y: scroll;
+    top: 2.5rem;
+    left: -1rem;
+    width: 0;
+    height: 0;
+    font-size: 0.745rem;
+    font-weight: 600;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    transition:
+      width 0.3s ease,
+      height 0.3s ease,
+      background-color 0.3s ease,
+      backdrop-filter 0.3s ease,
+      padding 0.3s ease;
+
+    &.shown {
+      padding: 0.3rem;
+      width: 100svw;
+      height: 50svh;
+      background-color: hsl(var(--bg-900) / 0.6);
+      backdrop-filter: blur(3px) saturate(180%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    & .navtree {
+      height: 100%;
+      width: 100%;
+      overflow: scroll;
+      padding: 6px;
+
+      & [data-part="item"] {
+        margin-left: unset;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding-right: 0;
+
+        & [data-part="item-content"] {
+          & [data-part="item-trigger"] {
+            width: 93%;
+            margin-left: 1em;
+
+            & p {
+              text-align: left;
+            }
+          }
+
+          & [data-part="item-content"] {
+            width: 80%;
+            margin-left: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .nav-wrapper-mobile {
+    display: none;
+  }
+
+  .nav-wrapper {
+    display: block;
+    width: 250px;
+    position: fixed;
+    top: 5rem;
+    left: 1.618rem;
+    flex-shrink: 0;
+    overflow: scroll;
+    max-height: 90svh;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    z-index: 10;
+  }
+
+  .navtree {
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+@media (min-width: 1280px) {
+  .nav-wrapper {
+    left: 10svw;
+  }
+}