From c7d142c331ca8046c35ea5e05c6ee07329fe9a72 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Tue, 10 Dec 2024 23:19:37 +0900
Subject: [PATCH] fix mobile menu highlight issue

---
 assets/shared-bundle.js                      | 37 ++++++++++++--------
 assets/tailwind-output.css                   | 23 +++++++++---
 src/modules/side-nav/MobileMenuNavModule.tsx | 12 +++++--
 style.css                                    | 28 +++++++--------
 styles/main.css                              | 10 +++---
 5 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
index 12dd66879..92643f55f 100644
--- a/assets/shared-bundle.js
+++ b/assets/shared-bundle.js
@@ -34215,20 +34215,29 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 
 var callBind$3 = { exports: {} };
 
-var GetIntrinsic$3 = getIntrinsic;
+var esDefineProperty;
+var hasRequiredEsDefineProperty;
 
-/** @type {import('.')} */
-var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false;
-if ($defineProperty$2) {
-  try {
-    $defineProperty$2({}, 'a', { value: 1 });
-  } catch (e) {
-    // IE 8 has a broken defineProperty
-    $defineProperty$2 = false;
+function requireEsDefineProperty() {
+  if (hasRequiredEsDefineProperty) return esDefineProperty;
+  hasRequiredEsDefineProperty = 1;
+
+  var GetIntrinsic = getIntrinsic;
+
+  /** @type {import('.')} */
+  var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false;
+  if ($defineProperty) {
+    try {
+      $defineProperty({}, 'a', { value: 1 });
+    } catch (e) {
+      // IE 8 has a broken defineProperty
+      $defineProperty = false;
+    }
   }
-}
 
-var esDefineProperty = $defineProperty$2;
+  esDefineProperty = $defineProperty;
+  return esDefineProperty;
+}
 
 var GetIntrinsic$2 = getIntrinsic;
 
@@ -34245,7 +34254,7 @@ if ($gOPD$1) {
 
 var gopd$1 = $gOPD$1;
 
-var $defineProperty$1 = esDefineProperty;
+var $defineProperty$1 = requireEsDefineProperty();
 
 var $SyntaxError = syntax;
 var $TypeError$3 = type;
@@ -34298,7 +34307,7 @@ var defineDataProperty$1 = function defineDataProperty(obj, property, value) {
   }
 };
 
-var $defineProperty = esDefineProperty;
+var $defineProperty = requireEsDefineProperty();
 
 var hasPropertyDescriptors = function hasPropertyDescriptors() {
   return !!$defineProperty;
@@ -34377,7 +34386,7 @@ callBind$3.exports;
   var $call = GetIntrinsic('%Function.prototype.call%');
   var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply);
 
-  var $defineProperty = esDefineProperty;
+  var $defineProperty = requireEsDefineProperty();
   var $max = GetIntrinsic('%Math.max%');
 
   module.exports = function callBind(originalFunction) {
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index e7b0de0e1..742860ea3 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1201,14 +1201,14 @@ video {
   max-width: 25rem;
 }
 
-.max-w-\[43\.375rem\] {
-  max-width: 43.375rem;
-}
-
 .max-w-\[56\.75rem\] {
   max-width: 56.75rem;
 }
 
+.max-w-\[43\.375rem\] {
+  max-width: 43.375rem;
+}
+
 .flex-shrink {
   flex-shrink: 1;
 }
@@ -2503,6 +2503,9 @@ video {
     h2 {
       margin-bottom: 1.25rem;
     }
+    h2 {
+      text-align: left;
+    }
     h2 {
       font-family: var(--font-basel-grotesk);
       font-size: 2.25rem;
@@ -2521,6 +2524,9 @@ video {
     h3 {
       margin-bottom: 1.25rem;
     }
+    h3 {
+      text-align: left;
+    }
     h3 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.5rem;
@@ -2540,6 +2546,9 @@ video {
     h4 {
       margin-bottom: 1.25rem;
     }
+    h4 {
+      text-align: left;
+    }
     h4 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.25rem;
@@ -2559,6 +2568,9 @@ video {
     h5 {
       margin-bottom: 1.25rem;
     }
+    h5 {
+      text-align: left;
+    }
     h5 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.125rem;
@@ -2577,6 +2589,9 @@ video {
     h6 {
       margin-bottom: 1.25rem;
     }
+    h6 {
+      text-align: left;
+    }
     h6 {
       font-family: var(--font-basel-grotesk);
       font-size: 1rem;
diff --git a/src/modules/side-nav/MobileMenuNavModule.tsx b/src/modules/side-nav/MobileMenuNavModule.tsx
index b20f76ec7..42c417e85 100644
--- a/src/modules/side-nav/MobileMenuNavModule.tsx
+++ b/src/modules/side-nav/MobileMenuNavModule.tsx
@@ -96,6 +96,7 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
           <ul className="accordion-body">
             {selectedCategory &&
               selectedCategory.sections.map((section) => {
+                console.log(section, navState.category, selectedCategory.id);
                 return (
                   <li key={section.id} className="mt-4 first:mt-5">
                     <button
@@ -104,7 +105,13 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
                     >
                       <span
                         className={cn(
-                          'transition body-2 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1'
+                          'transition body-2 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1',
+                          {
+                            'text-light-accent-1 dark:text-dark-accent-1':
+                              navState.section === section.id,
+                            'text-light-neutral-1 dark:text-dark-neutral-1':
+                              navState.section !== section.id,
+                          }
                         )}
                       >
                         {section.name}
@@ -197,8 +204,7 @@ const ChevronDown: FC<{
         clip-rule="evenodd"
         d="M3.52876 5.52827C3.78911 5.26792 4.21122 5.26792 4.47157 5.52827L8.00016 9.05687L11.5288 5.52827C11.7891 5.26792 12.2112 5.26792 12.4716 5.52827C12.7319 5.78862 12.7319 6.21073 12.4716 6.47108L8.47157 10.4711C8.21122 10.7314 7.78911 10.7314 7.52876 10.4711L3.52876 6.47108C3.26841 6.21073 3.26841 5.78862 3.52876 5.52827Z"
         className={cn({
-          'transition fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover:fill-light-accent-1 group-hover:dark:fill-dark-accent-1':
-            color === 'neutral-2',
+          'transition fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
         })}
       />
     </svg>
diff --git a/style.css b/style.css
index 00fe4a1a3..66b6f244d 100644
--- a/style.css
+++ b/style.css
@@ -197,47 +197,47 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(1) {
-  animation-duration: 6s;
-  animation-delay: 2s;
-}
-
-.avatar-wrapper g:nth-of-type(2) {
-  animation-duration: 6s;
+  animation-duration: 5s;
   animation-delay: 1s;
 }
 
-.avatar-wrapper g:nth-of-type(3) {
+.avatar-wrapper g:nth-of-type(2) {
   animation-duration: 5s;
   animation-delay: 2s;
 }
 
-.avatar-wrapper g:nth-of-type(4) {
+.avatar-wrapper g:nth-of-type(3) {
   animation-duration: 4s;
   animation-delay: 1s;
 }
 
+.avatar-wrapper g:nth-of-type(4) {
+  animation-duration: 6s;
+  animation-delay: 2s;
+}
+
 .avatar-wrapper g:nth-of-type(5) {
-  animation-duration: 5s;
-  animation-delay: 1s;
+  animation-duration: 6s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 6s;
+  animation-duration: 4s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
   animation-duration: 5s;
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
-  animation-duration: 4s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
-  animation-duration: 5s;
+  animation-duration: 4s;
   animation-delay: 2s;
 }
 
diff --git a/styles/main.css b/styles/main.css
index 2d5035750..3161c65ec 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -25,23 +25,23 @@
     @apply text-light-neutral-1 dark:text-dark-neutral-1;
 
     h2 {
-      @apply heading-2 mt-margin-mobile first:mt-0 mb-5;
+      @apply heading-2 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h3 {
-      @apply heading-3 mt-margin-mobile first:mt-0 mb-5;
+      @apply heading-3 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h4 {
-      @apply heading-4 mt-margin-mobile first:mt-0 mb-5;
+      @apply heading-4 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h5 {
-      @apply subheading-1 mt-margin-mobile first:mt-0 mb-5;
+      @apply subheading-1 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h6 {
-      @apply subheading-2 mt-margin-mobile first:mt-0 mb-5;
+      @apply subheading-2 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     p {