From fbfdad192cba24c007874f985012c0a228505379 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.im>
Date: Thu, 10 Aug 2023 17:02:36 -0400
Subject: [PATCH] feat: improve mobile nav consistency

---
 docusaurus/src/css/custom.css | 127 +++++++++++++++++++---------------
 1 file changed, 71 insertions(+), 56 deletions(-)

diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css
index 20ae6d6..7494c16 100644
--- a/docusaurus/src/css/custom.css
+++ b/docusaurus/src/css/custom.css
@@ -38,53 +38,7 @@
   --ifm-navbar-item-padding-vertical: 0rem;
   --ifm-navbar-item-padding-horizontal: 0rem;
   --ifm-code-border-radius: 1rem;
-}
-
-/* navigation */
-.navbar {
-  height: 70px;
-  padding: 0 2.5rem;
-}
-
-.navbar__items {
-  gap: 1rem;
-}
-
-.navbar__item.dropdown .navbar__link {
-  background-color: #2a3645;
-  color: #9ed5ff;
-  padding: 10px 16px;
-
-  &:hover {
-    background-color: #2a3645;
-    color: #9ed5ff;
-  }
-}
-
-.navbar__link {
-  font-weight: 400;
-  font-size: 0.9rem;
-  letter-spacing: 0.02rem;
-  color: #acc1d2;
-  border-radius: 10px;
-  padding: 10px 16px;
-  transition: 0.3s background-color var(--bezier-one);
-
-  &:hover {
-    border-color: hsl(221, 17%, 26%) !important;
-    background-color: #252b31;
-    color: #acc1d2;
-  }
-}
-
-.navbar__link--active {
-  background-color: #2a3645;
-  color: #9ed5ff;
-
-  &:hover {
-    background-color: #2a3645;
-    color: #9ed5ff;
-  }
+  --ifm-navbar-sidebar-width: 20rem;
 }
 
 .card {
@@ -95,6 +49,7 @@
   }
 }
 
+
 .dropdown__menu {
   padding: 0.5rem 0 !important;
   box-shadow: var(--drop-shadow-one);
@@ -154,22 +109,77 @@
   filter: brightness(125%);
 }
 
+.menu__list-item-collapsible--active,
+.menu__list-item-collapsible--active:hover {
+  background-color: var(--accent-low-opacity);
+}
+
+/* navigation */
+.navbar {
+  height: 70px;
+  padding: 0 2.5rem;
+}
+
+.navbar__items {
+  gap: 1rem;
+}
+
+.navbar__item.dropdown .navbar__link {
+  background-color: #2a3645;
+  color: #9ed5ff;
+  padding: 10px 16px;
+
+  &:hover {
+    background-color: #2a3645;
+    color: #9ed5ff;
+  }
+}
+
+.navbar__link {
+  font-weight: 400;
+  font-size: 0.9rem;
+  letter-spacing: 0.02rem;
+  color: #acc1d2;
+  border-radius: 10px;
+  padding: 10px 16px;
+  transition: 0.3s background-color var(--bezier-one);
+
+  &:hover {
+    border-color: hsl(221, 17%, 26%) !important;
+    background-color: #252b31;
+    color: #acc1d2;
+  }
+}
+
+.navbar__link--active {
+  background-color: #2a3645;
+  color: #9ed5ff;
+
+  &:hover {
+    background-color: #2a3645;
+    color: #9ed5ff;
+  }
+}
+
 /* mobile nav menu */
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 996px) {
   .navbar-sidebar__item {
     padding: 1rem;
   }
 
   .navbar-sidebar {
     border-radius: 0 24px 24px 0;
-    width: 20rem !important;
   }
 
   .menu__list-item {
     margin-top: 0.5rem !important;
   }
 
-  .menu__list {
+  .menu__list-item-collapsible:hover {
+    background-color: var(--grey-one);
+  }
+
+  .menu__list{
     margin-top: 1.5rem;
   }
 
@@ -187,6 +197,7 @@
     background: var(--ifm-menu-link-sublist-icon) 50% 50% / 1.5rem 1.5rem no-repeat;
   }
 
+
   /* custom hamburger menu */
   .navbar-sidebar .navbar__logo {
     display: none;
@@ -226,7 +237,7 @@
     width: 24px;
     height: 2px;
     background: var(--grey-five);
-    transition: all 0.3s var(--bezier-one);
+    transition: transform 0.3s var(--bezier-one), background-color 0.3s var(--bezier-one);
   }
 
   .navbar__toggle::before,
@@ -243,18 +254,22 @@
     transform: translateY(6.5px);
   }
 
-  /* ANIMATION */
-  .menu-btn.open .menu-btn__burger {
+  /* hamburger animation */
+  [aria-expanded="true"].navbar__toggle {
     transform: translateX(-10px);
-    background: transparent;
+  }
+
+  [aria-expanded="true"].navbar__toggle svg {
+    transform: translateX(-10px);
+    background-color: transparent;
     box-shadow: none;
   }
 
-  .menu-btn.open .menu-btn__burger::before {
+  [aria-expanded="true"].navbar__toggle::before {
     transform: rotate(45deg) translate(10px, -10px);
   }
 
-  .menu-btn.open .menu-btn__burger::after {
+  [aria-expanded="true"].navbar__toggle::after {
     transform: rotate(-45deg) translate(10px, 10px);
   }
 }