From f1e648ff0d94f4f7050edfd36560a5342bcf47bb Mon Sep 17 00:00:00 2001
From: Wes Appler <wes@lamemakes.com>
Date: Thu, 15 Aug 2024 20:47:47 -0400
Subject: [PATCH] Cleaned up mobile menu

---
 .../components/header/css/header.css          | 28 ++++++++++---------
 design-system/components/header/js/header.js  |  2 ++
 design-system/css/variables.css               |  1 +
 design-system/js/design-system.js             |  2 ++
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/design-system/components/header/css/header.css b/design-system/components/header/css/header.css
index c57fb5d..59afb81 100644
--- a/design-system/components/header/css/header.css
+++ b/design-system/components/header/css/header.css
@@ -68,7 +68,6 @@ header .logo {
   height: var(--size-logo);
   padding: calc(var(--spacing-medium) * 1.125) 0;
   line-height: var(--line-height-base);
-  display: flex;
   width: fit-content;
   position: relative;
   top: -1px;
@@ -111,7 +110,11 @@ nav.staged {
   display: none;
 }
 
-.open {
+header.open {
+  border-radius: var(--radius-header) var(--radius-header) 0 0 !important;
+}
+
+ul.open {
   display: initial !important;
 }
 
@@ -168,7 +171,7 @@ nav .badge {
 header.island {
   width: fit-content;
   margin: var(--spacing-base) auto 0 auto;
-  border-radius: var(--radius-round);
+  border-radius: var(--radius-header);
 }
 
 header.island .wrapper {
@@ -195,7 +198,7 @@ header.island nav ul li a.wrapper {
   @media (prefers-color-scheme: light) {
     header nav ul {
       box-shadow: var(--shadow-lm);
-      background-color: var(--color-light);
+      background-color: var(--color-light-translucent);
       border: var(--border-dark);
     }
 
@@ -207,9 +210,8 @@ header.island nav ul li a.wrapper {
   @media (prefers-color-scheme: dark) {
     header nav ul {
       box-shadow: var(--shadow-dm);
-      background-color: var(--color-shade-dm);
+      background-color: var(--color-dark-translucent);
       border: var(--border-light);
-
     }
 
     header nav ul li a:hover {
@@ -248,15 +250,15 @@ header.island nav ul li a.wrapper {
   }
 
  header.island nav ul {
-    flex-direction: column;
-    position: absolute;
-    top: 56px;
-    right: 0;
-    width: max-content;
+    position: fixed;
+    top: 60px;
+    right: -1px;
+    width: 100%;
     z-index: 1;
     padding: var(--spacing-small) 0;
-    align-items: flex-start;
-    border-radius: var(--radius-soft);
+    border-radius: 0 0 var(--radius-header) var(--radius-header);
+    backdrop-filter: blur(var(--spacing-base));
+    -webkit-backdrop-filter: blur(var(--spacing-base));
   }
 
   header nav ul li a.wrapper {
diff --git a/design-system/components/header/js/header.js b/design-system/components/header/js/header.js
index b29d349..cf6f52f 100644
--- a/design-system/components/header/js/header.js
+++ b/design-system/components/header/js/header.js
@@ -2,10 +2,12 @@ $(document).ready(function() {
 
   $('.btnIcon').on('click', function() {
     $('header nav ul').toggleClass('open');
+    $('header').toggleClass('open');
   });
 
   $('NAV li').on('click', function() {
     $('header nav ul').removeClass('open');
+    $('header').removeClass('open');
   });
 
 });
diff --git a/design-system/css/variables.css b/design-system/css/variables.css
index c230532..1800e7d 100644
--- a/design-system/css/variables.css
+++ b/design-system/css/variables.css
@@ -75,4 +75,5 @@
   --radius-soft: .25rem;
   --radius-softer: .5rem;
   --radius-round: 50vw;
+  --radius-header: 30px;
 }
diff --git a/design-system/js/design-system.js b/design-system/js/design-system.js
index 6122caa..0652f2c 100644
--- a/design-system/js/design-system.js
+++ b/design-system/js/design-system.js
@@ -12,6 +12,7 @@ $(document).ready(function() {
 
   $('.mobileNav').on('click', function() {
     $('header nav ul').toggleClass('open');
+    $('header').toggleClass('open');
     if ($('.mobileNav').attr('aria-expanded') == 'false') {
       $('.mobileNav').attr('aria-expanded', 'true');
     } else {
@@ -21,6 +22,7 @@ $(document).ready(function() {
 
   $('NAV li').on('click', function() {
     $('header nav ul').removeClass('open');
+    $('header').removeClass('open');
   });
 
   $('.bannerBtn').on('click', function() {