✨

src/components/TreeSelector/index.module.css

@@ -0,0 +1,89 @@
+.toggler {
+  border: none;
+  color: white;
+  background-color: rgba(21, 144, 251, 0.8);
+  padding: 5px 10px;
+  font-size: 1em;
+
+  &:hover {
+    color: white;
+    background-color: rgba(19, 105, 210, 0.8);
+  }
+  i {
+    transition: transform 0.2s ease;
+  }
+  .show {
+    transform: rotate(-180deg);
+  }
+}
+
+.content {
+  position: absolute;
+  width: 100%;
+  padding: 10px;
+  background-color: white;
+  box-shadow: 0 0 5px var(--border-color);
+  overflow-y: auto;
+  visibility: visible;
+  height: 100vh;
+  transition: all 0.1s ease-in-out;
+
+  &.hidden {
+    height: 0;
+    visibility: hidden;
+  }
+
+  .path {
+    padding: 5px 10px;
+    border-top: solid var(--border-color) 1px;
+    border-bottom: solid var(--border-color) 1px;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    background-color: white;
+
+    ol {
+      list-style: none;
+
+      li {
+        display: inline-block;
+
+        a {
+          padding: 5px 10px;
+          font-size: 1em;
+        }
+      }
+    }
+  }
+
+  .list {
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      li {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        a {
+          flex: 1;
+          text-align: center;
+          font-size: 2em;
+
+          &.pager {
+            flex: 2;
+            font-size: 4em;
+            color: #aaa;
+          }
+
+          &.pager:hover {
+            color: var(--hover-color);
+          }
+        }
+      }
+    }
+  }
+}