feat: implement collapsible sidebar

chore: basic sidebar toggle button
chore: update compiled css

assets/css/compiled/main.css

@@ -265,11 +265,11 @@
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-  .content .not-prose ul, .content ol {
+  .content .not-prose ul, .content .not-prose ol {
   margin: 0px;
   list-style-type: none;
 }
-  .content .not-prose ul li, .content ol li {
+  .content .not-prose ul li, .content .not-prose ol li {
   margin: 0px;
 }
   .content kbd {
@@ -290,6 +290,32 @@
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
+  .content pre:not(.code-block pre).mermaid {
+  border-radius: 0px;
+  background-color: transparent;
+}
+  :is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) {
+  background-color: transparent;
+}
+  .content img {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 0.375rem;
+}
+  .content figure figcaption {
+  margin-top: 0.5rem;
+  display: block;
+  text-align: center;
+  font-size: .875rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+  :is(html[class~="dark"] .content figure figcaption) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 
 .subheading-anchor {
   opacity: 0;
@@ -1119,8 +1145,9 @@ article details > summary::before {
   padding-bottom: 1rem;
 }
 
-.chroma .lnt,
-  .chroma .ln {
+.chroma .ln,
+  .chroma .lnt:not(.hl > .lnt),
+  .chroma .hl {
   min-width: 2.6rem;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1128,8 +1155,9 @@ article details > summary::before {
   color: rgb(82 82 82 / var(--tw-text-opacity));
 }
 
-:is(html[class~="dark"] .chroma .lnt),:is(html[class~="dark"] 
-  .chroma .ln) {
+:is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] 
+  .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] 
+  .chroma .hl) {
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity));
 }
@@ -1378,6 +1406,19 @@ article details > summary::before {
   }
 }
 
+.sidebar-container li > div {
+  height: 0px;
+}
+
+.sidebar-container li.open > div {
+  height: auto;
+}
+
+.sidebar-container li.open > a > span > svg > path {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 nav .search-wrapper {
   display: none;
 }
@@ -2177,6 +2218,10 @@ video {
   height: 1.75rem;
 }
 
+.h-\[18px\] {
+  height: 18px;
+}
+
 .h-full {
   height: 100%;
 }
@@ -2237,6 +2282,10 @@ video {
   min-width: 0px;
 }
 
+.min-w-\[18px\] {
+  min-width: 18px;
+}
+
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -2269,6 +2318,10 @@ video {
   flex-grow: 1;
 }
 
+.origin-center {
+  transform-origin: center;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -2391,6 +2444,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -2500,6 +2557,14 @@ video {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
+.p-0 {
+  padding: 0px;
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2640,6 +2705,10 @@ video {
   text-align: center;
 }
 
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -2880,10 +2949,20 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .\[-webkit-tap-highlight-color\:transparent\] {
   -webkit-tap-highlight-color: transparent;
 }
@@ -3000,6 +3079,10 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-800\/5:hover {
+  background-color: rgb(31 41 55 / 0.05);
+}
+
 .hover\:bg-primary-50:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity));
@@ -3221,6 +3304,11 @@ body {
   margin-right: auto;
 }
 
+:is([dir="rtl"] .rtl\:-rotate-180) {
+  --tw-rotate: -180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 :is([dir="rtl"] .rtl\:pl-2) {
   padding-left: 0.5rem;
 }
@@ -3503,6 +3591,10 @@ body {
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
 }
 
+:is(html[class~="dark"] .dark\:hover\:bg-gray-100\/5:hover) {
+  background-color: rgb(243 244 246 / 0.05);
+}
+
 :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));