initial commit

src/styles/docs/toc/intro-toc.css

@@ -0,0 +1,29 @@
+.toc-wrapper-mobile .toc-content {
+  & .toc_a {
+    transition: color 0.33s;
+    color: hsl(var(--green) 72 40);
+  }
+
+  & ul {
+    margin: 0;
+  }
+
+  & li {
+    list-style: none;
+
+    &.active {
+      & > .toc_a {
+        color: hsl(var(--green) 72 60);
+      }
+    }
+  }
+
+  & .toc_heading {
+    margin: 0;
+    margin-block: 0.618rem;
+
+    & * {
+      margin-left: 0.348rem;
+    }
+  }
+}

src/styles/docs/toc/toc.css

@@ -0,0 +1,125 @@
+@import "./types-toc.css";
+@import "./intro-toc.css";
+
+.toc-wrapper {
+  display: none;
+}
+
+.toc-wrapper-mobile {
+  display: block;
+}
+
+.toc-toggle {
+  --width: 100svw;
+  display: block;
+  position: unset;
+  height: 24px;
+  font-size: 1.614rem;
+  max-height: 500px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > svg {
+    height: 100%;
+    width: 24px;
+  }
+
+  & div {
+    width: 100%;
+    height: max-content;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .toc-mobile {
+    position: absolute;
+    overflow-y: scroll;
+    top: 2.6rem;
+    right: -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: var(--width);
+      height: 50svh;
+      background-color: hsl(var(--bg-900) / 0.6);
+      backdrop-filter: blur(3px) saturate(180%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+
+@media (max-width: 1280px) {
+  .toc-toggle {
+    --width: 70svw;
+  }
+}
+
+@media (min-width: 1280px) {
+  .toc-wrapper-mobile {
+    display: none;
+  }
+
+  .toc-wrapper {
+    display: block;
+    position: fixed;
+    top: 5rem;
+    right: 10svw;
+    width: 250px;
+    max-height: 90svh;
+    overflow-y: scroll;
+    z-index: 10;
+
+    & .toc_a {
+      transition: color 0.33s;
+      color: hsl(var(--green) 72 40);
+    }
+
+    & ul {
+      margin: 0;
+    }
+
+    & li {
+      list-style: none;
+
+      &.active {
+        & > .toc_a {
+          color: hsl(var(--green) 72 60);
+        }
+      }
+    }
+
+    & .toc_heading {
+      margin: 0;
+      margin-block: 0.618rem;
+
+      & * {
+        margin-left: 0.348rem;
+      }
+    }
+  }
+}

src/styles/docs/toc/types-toc.css

@@ -0,0 +1,63 @@
+.toc-content {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+  padding: 6px;
+
+  & .props-list {
+    color: hsl(var(--prop-color));
+
+    & a {
+      color: hsl(var(--prop-link-color));
+    }
+  }
+
+  & .funcs-list {
+    color: hsl(var(--func-color));
+
+    & a {
+      color: hsl(var(--func-link-color));
+    }
+  }
+
+  & .signals-list {
+    color: hsl(var(--signal-color));
+
+    & a {
+      color: hsl(var(--signal-link-color));
+    }
+  }
+
+  & .vars-list {
+    color: hsl(var(--var-color));
+
+    & a {
+      color: hsl(var(--var-link-color));
+    }
+  }
+}
+
+.types-list {
+  list-style: none;
+  z-index: 21;
+
+  & .types-item {
+    margin-block: 10px;
+    display: flex;
+    align-items: center;
+    gap: 0.478rem;
+
+    & svg {
+      opacity: 0.6;
+      width: 24px;
+      height: 24px;
+      transition: opacity 0.5s;
+    }
+
+    &:hover {
+      & svg {
+        opacity: 1;
+      }
+    }
+  }
+}