fix(components): make navbar usable with javascript disabled

3 files changed, 3 insertions, 37 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}>