Add dimming overlay when nav menu is opened in mobile version

src/components/header/Header.tsx

@@ -88,7 +88,10 @@ function Header() {
           </div>
         </div>
       </div>
+
+      <div className={`page-overlay ${isMobileMenuOpen ? 'active' : ''}`} onClick={toggleMobileMenu}></div>
     </header>
+
   );
 }
 

src/styles/global.css

@@ -15,6 +15,7 @@
   --color-primary-01: #0a205a;
   --color-primary-01-50: rgb(10 32 90 / 50%);
   --color-primary-01-10: rgb(10 32 90 / 10%);
+  --color-primary-01-20: rgb(10 32 90 / 20%);
   --color-primary-02: #f6ced5;
   --color-primary-02-50: rgb(246 206 213 / 50%);
   --color-primary-02-20: rgb(246 206 213 / 20%);

src/styles/header.css

@@ -153,6 +153,25 @@ a.subheading {
     text-align: center;
 }
 
+/* Dimming Overlay */
+.page-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--color-primary-01-20);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 999;
+}
+
+/* Active Overlay State */
+.page-overlay.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -194,4 +213,8 @@ a.subheading {
     .hamburger-button {
         display: none !important;
     }
+
+    .page-overlay {
+        display: none !important;
+    }
 }