fix(components): make navbar usable with javascript disabled

5 files changed, 36 insertions, 56 deletions

diff --git a/src/components/atoms/overlay/overlay.module.scss b/src/components/atoms/overlay/overlay.module.scss
index edbc4ae..360bbde 100644
--- a/src/components/atoms/overlay/overlay.module.scss
+++ b/src/components/atoms/overlay/overlay.module.scss
@@ -4,15 +4,4 @@
   z-index: 100;
   background: hsla(0, 0%, 0%, 0.6);
   transition: all 0.3s linear 0s;
-
-  &--hidden {
-    opacity: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  &--visible {
-    opacity: 1;
-    visibility: visible;
-  }
 }
diff --git a/src/components/atoms/overlay/overlay.test.tsx b/src/components/atoms/overlay/overlay.test.tsx
index fcc694f..1d31e9c 100644
--- a/src/components/atoms/overlay/overlay.test.tsx
+++ b/src/components/atoms/overlay/overlay.test.tsx
@@ -8,14 +8,6 @@ describe('overlay', () => {
 
     render(<Overlay>{body}</Overlay>);
 
-    expect(screenTL.getByText(body)).toHaveClass('overlay--visible');
-  });
-
-  it('can be hidden', () => {
-    const body = 'vel aspernatur mollitia';
-
-    render(<Overlay isVisible={false}>{body}</Overlay>);
-
-    expect(screenTL.getByText(body)).toHaveClass('overlay--hidden');
+    expect(screenTL.getByText(body)).toBeInTheDocument();
   });
 });
diff --git a/src/components/atoms/overlay/overlay.tsx b/src/components/atoms/overlay/overlay.tsx
index 7dd7446..e8945a8 100644
--- a/src/components/atoms/overlay/overlay.tsx
+++ b/src/components/atoms/overlay/overlay.tsx
@@ -4,7 +4,6 @@ import {
   type HTMLAttributes,
   type ReactNode,
 } from 'react';
-import { useScrollLock } from '../../../utils/hooks';
 import styles from './overlay.module.scss';
 
 export type OverlayProps = HTMLAttributes<HTMLDivElement> & {
@@ -12,27 +11,13 @@ export type OverlayProps = HTMLAttributes<HTMLDivElement> & {
    * The elements to display in front of the overlay.
    */
   children: ReactNode;
-  /**
-   * Should the overlay be visible?
-   *
-   * Use it if you want an animated overlay instead of mounting/demounting it.
-   *
-   * @default true
-   */
-  isVisible?: boolean;
 };
 
 const OverlayWithRef: ForwardRefRenderFunction<HTMLDivElement, OverlayProps> = (
-  { children, className = '', isVisible = true, ...props },
+  { children, className = '', ...props },
   ref
 ) => {
-  const overlayClass = [
-    styles.overlay,
-    styles[isVisible ? 'overlay--visible' : 'overlay--hidden'],
-    className,
-  ].join(' ');
-
-  useScrollLock(isVisible);
+  const overlayClass = [styles.overlay, className].join(' ');
 
   return (
     <div {...props} className={overlayClass} ref={ref}>
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={