feat: multi-level sidebar

chore: support multiple search elements

chore: sidebar display toc on mobile view

chore: add hamburger menu to navbar on mobile

chore: add markdown link hook

for opening external link in new window

chore: add sidebar footer

- put search under params.type
- make navbar link aware of external link

assets/css/components/navbar.css

@@ -0,0 +1,47 @@
+nav {
+  .search-wrapper {
+    @apply hidden md:inline-block;
+  }
+}
+
+.hamburger-menu svg {
+  g {
+    @apply origin-center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  path {
+    opacity: 1;
+    transition:
+      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      opacity 0.2s ease 0.2s;
+  }
+
+  &.open {
+    path {
+      transition:
+        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0s ease 0.2s;
+    }
+    g {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+    }
+  }
+
+  &.open > {
+    path {
+      @apply opacity-0;
+    }
+    g:nth-of-type(1) {
+      @apply rotate-45;
+      path {
+        transform: translate3d(0, 6px, 0);
+      }
+    }
+    g:nth-of-type(2) {
+      @apply -rotate-45;
+      path {
+        transform: translate3d(0, -6px, 0);
+      }
+    }
+  }
+}

assets/css/components/sidebar.css

@@ -1,7 +1,7 @@
 @media (max-width: 767px) {
   .sidebar-container {
     @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
-    /* transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); */
+    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
     backface-visibility: hidden;

assets/css/styles.css

@@ -8,6 +8,7 @@
 @import "components/steps.css";
 @import "components/search.css";
 @import "components/sidebar.css";
+@import "components/navbar.css";
 
 html {
   @apply text-base antialiased;
@@ -22,6 +23,7 @@ body {
 :root {
   --primary-hue: 212deg;
   --navbar-height: 4rem;
+  --menu-height: 3.75rem;
 }
 
 .dark {