initial commit

src/styles/docs/nav/nav-tree.css

@@ -0,0 +1,171 @@
+[data-scope="accordion"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+
+  & [data-part="item"] {
+    padding: 6px;
+
+    & [data-part="item"] {
+      padding-right: 0;
+
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-trigger"] {
+  background-color: hsl(var(--bg-900));
+  position: relative;
+  border: unset;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  height: 36px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.15em;
+
+  & p:has(a) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-inline: 4px;
+    border-radius: 20px;
+
+    &:hover {
+      position: relative;
+      width: max-content;
+      padding: 4px;
+      overflow: scroll;
+      z-index: 101;
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    border-radius: 6px;
+    z-index: -1;
+    inset: -1px;
+    background-color: hsla(var(--green) 80 70 / 0.3);
+    transition: background-color 0.3s;
+  }
+
+  &:hover {
+    &::before {
+      background-color: hsla(var(--green) 80 70 / 0.6);
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-indicator"] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-left: 3px;
+
+  &:hover {
+    background-color: hsl(var(--blue) 30 30);
+  }
+
+}
+
+[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
+  animation: rotateIn 250ms ease-in-out forwards;
+}
+
+[data-scope="accordion"][data-part="item-indicator"][data-state="closed"] {
+  animation: rotateOut 250ms ease-in-out;
+}
+
+[data-scope="accordion"][data-part="item-content"] {
+  --height: 709;
+  margin-block: 0.175rem;
+
+  &>.arktree-item,
+  [data-part="item"] {
+    margin-left: 21px;
+    margin-block: 0.117rem;
+  }
+
+  & .arktree-item,
+  [data-part="item-content"]>div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15em;
+    margin-left: 24px;
+    margin-top: 0.224em;
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+          hsla(var(--accent-400) / 0.5) var(--percent),
+          hsla(var(--accent-400) / 0) 75%);
+      animation: percentToZero 250ms ease-in-out forwards;
+      width: 0;
+      transition: width 0.25s;
+    }
+
+    &:hover::before {
+      width: 100%;
+      animation: percentToFifty 250ms ease-in-out forwards;
+    }
+
+
+    &>a {
+      padding-top: 1em;
+      width: 100%;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="open"] {
+  animation: slideDown 250ms ease-in-out;
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
+  animation: slideUp 200ms ease-in-out;
+}
+
+.__current-type-doc {
+  color: hsl(var(--blue) 100 70);
+
+  & [data-part="item-trigger"] a {
+    color: hsl(var(--blue) 100 70) !important;
+
+  }
+
+  &>a {
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+          hsla(var(--accent-400) / 0.5) var(--percent),
+          hsla(var(--accent-400) / 0) 100%);
+      animation: percentToZero 250ms ease-in-out forwards;
+      width: 100%;
+
+    }
+
+    &:hover::before {
+      animation: percentToFifty 250ms ease-in-out forwards;
+    }
+
+  }
+}

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;
+  }
+}