From fc77c0a7e9c81f5bc1a69dee945ce71b9511b3cc Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 19 Dec 2023 15:57:42 +0100
Subject: fix(components): make navbar usable with javascript disabled

---
 .../navbar/navbar-item/navbar-item.module.scss     | 47 +++++++++++++---------
 .../organisms/navbar/navbar-item/navbar-item.tsx   |  5 ++-
 2 files changed, 33 insertions(+), 19 deletions(-)

(limited to 'src/components/organisms/navbar')

diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
index 2f23588..f8249ba 100644
--- a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
+++ b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
@@ -74,28 +74,35 @@
     }
   }
 
-  &:checked + .label {
-    --draw-border-color1: var(--color-primary-dark);
-    --draw-border-color2: var(--color-primary-light);
-
-    .icon--hamburger {
-      > span {
-        background: transparent;
-        border: transparent;
-
-        &::before {
-          top: 40%;
-          transform-origin: 50% 50%;
-          transform: rotate(-45deg);
-        }
+  &:checked {
+    + .label {
+      --draw-border-color1: var(--color-primary-dark);
+      --draw-border-color2: var(--color-primary-light);
+
+      .icon--hamburger {
+        > span {
+          background: transparent;
+          border: transparent;
+
+          &::before {
+            top: 40%;
+            transform-origin: 50% 50%;
+            transform: rotate(-45deg);
+          }
 
-        &::after {
-          bottom: 40%;
-          transform-origin: 50% 50%;
-          transform: rotate(45deg);
+          &::after {
+            bottom: 40%;
+            transform-origin: 50% 50%;
+            transform: rotate(45deg);
+          }
         }
       }
     }
+
+    ~ .overlay {
+      opacity: 1;
+      visibility: visible;
+    }
   }
 
   &:not(:checked) {
@@ -105,6 +112,10 @@
     }
 
     ~ .overlay {
+      opacity: 0;
+      overflow: hidden;
+      visibility: hidden;
+
       @include mix.media("screen") {
         @include mix.dimensions("sm") {
           overflow: visible;
diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.tsx b/src/components/organisms/navbar/navbar-item/navbar-item.tsx
index 993b613..367b871 100644
--- a/src/components/organisms/navbar/navbar-item/navbar-item.tsx
+++ b/src/components/organisms/navbar/navbar-item/navbar-item.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 import {
   type ReactNode,
   useCallback,
@@ -11,6 +12,7 @@ import {
   useOnRouteChange,
   type useOnClickOutsideHandler,
   useTimeout,
+  useScrollLock,
 } from '../../../../utils/hooks';
 import {
   Checkbox,
@@ -115,6 +117,7 @@ const NavbarItemWithRef: ForwardRefRenderFunction<
   const modalRef = useOnClickOutside<HTMLDivElement>(deactivateItem);
 
   useOnRouteChange(deactivate, 'end');
+  useScrollLock(isActive);
 
   const handleActivation = useCallback(() => {
     if (onActivation) onActivation(isActive);
@@ -165,7 +168,7 @@ const NavbarItemWithRef: ForwardRefRenderFunction<
           </Flip>
         )}
       </Label>
-      <Overlay className={styles.overlay} isVisible={isActive}>
+      <Overlay className={styles.overlay}>
         <Modal
           className={styles.modal}
           heading={
-- 
cgit v1.2.3