Improve top navbar and sidebar on mobile

Author: sanne-san

src/css/custom.css

@@ -120,6 +120,33 @@ html[data-theme='dark'] {
   color: var(--zinc-300) !important;
 }
 
+@media (max-width: 996px) {
+  .navbar__toggle {
+    margin-right: 1rem;
+  }
+  
+  .navbar__toggle svg {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .clean-btn.navbar-sidebar__close svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .clean-btn.navbar-sidebar__close svg path {
+    stroke-width: 1.5 !important;
+  }
+
+  .navbar-sidebar__back {
+    margin: 0.5rem 0 0 -0.5rem;
+    background-color: transparent;
+    padding: var(--ifm-menu-link-padding-vertical) calc(var(--ifm-menu-link-padding-horizontal) + 0.5rem);
+    font-weight: 600;
+  }
+}
+
 /* Sidebar */
 .menu__list .menu__list {
   position: relative;
@@ -183,6 +210,27 @@ html[data-theme='dark'] {
   background: var(--ifm-menu-link-sublist-icon) 50% / 1.3rem 1.3rem;
 }
 
+@media (max-width: 996px) {
+  .tocCollapsible_ETCw.tocMobile_ITEo {
+    background-color: var(--white);
+    border: 1px solid var(--zinc-300);
+  }
+  
+  .clean-btn.tocCollapsibleButton_TO0P {
+    padding: 0.8rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .tocCollapsibleContent_vkbj .table-of-contents li {
+    margin: 0.6rem 1rem;
+  }
+
+  .clean-btn.tocCollapsibleButton_TO0P::after {
+    width: 10px;
+    height: 10px;
+  }
+}
+
 /* Main canvas */
 .breadcrumbs__link,
 .table-of-contents__link {