client: stop scroll on open navbar

client/src/components/Navbar.jsx

@@ -1,14 +1,17 @@
+import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
+import useWindowDimension from '../utils/useWindowDimension'
 import { navData } from '../utils/navbar'
 import { useAuthStore } from '../store/useAuthStore'
 import { useAnimStore } from '../store/useAnimStore'
 import Skeleton from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 export const Navbar = () => {
+ const { width } = useWindowDimension();
  const { verifyLoading, verifySuccess, user } = useAuthStore()
- const { mobileMenu, setMobileMenu, closeMenu, openMenu, toggleDisable } =
- useAnimStore()
+ const { menuPopup, mobileMenu, setMobileMenu, closeMenu, openMenu, toggleDisable } = useAnimStore()
+
  function handleToggle() {
  if (mobileMenu) {
  closeMenu()
@@ -17,6 +20,18 @@ export const Navbar = () => {
  }
  setMobileMenu(!mobileMenu)
  }
+
+ useEffect(() => {
+ if (width <= 640) {
+ if (menuPopup) document.body.style.overflow = "hidden";
+ else document.body.style.overflow = "";
+ }
+ else {
+ document.body.style.overflow = "";
+ closeMenu();
+ }
+ }, [width, menuPopup]);
+
  return (
  <div className='Navbar-container'>
  <div className='Navbar-flex-container'>

client/src/store/useAnimStore.js

@@ -1,17 +1,16 @@
 import { create } from 'zustand'
-import { toast } from 'sonner'
 
 export const useAnimStore = create(set => ({
- mobileMenu: false,
- menuPopup: false,
  toggleDisable: false,
+ mobileMenu: false,
  setMobileMenu: verifyState => {
  set({ mobileMenu: verifyState })
  set({ toggleDisable: true })
  setTimeout(() => {
  set({ toggleDisable: false })
  }, 1000)
  },
+ menuPopup: false,
  openMenu: () => {
  set({ menuPopup: true })
  set({ mobileMenu: true })

client/src/utils/useWindowHeight.js → client/src/utils/useWindowDimension.js

@@ -1,22 +1,23 @@
 import { useEffect, useState } from 'react';
 
-const useWindowHeight = () => {
- const [height, setHeight] = useState(undefined);
+const useWindowDimension = () => {
+ const [width, setWidth] = useState(window.innerWidth);
+ const [height, setHeight] = useState(window.innerHeight);
  const [isReady, setIsReady] = useState(false);
 
  useEffect(() => {
  const handleResize = () => {
+ setWidth(window.innerWidth);
  setHeight(window.innerHeight);
  setIsReady(true);
  };
 
  window.addEventListener('resize', handleResize);
- handleResize();
 
  return () => window.removeEventListener('resize', handleResize);
  }, []);
 
- return { height, isReady };
+ return { width, height, isReady };
 };
 
-export default useWindowHeight;
+export default useWindowDimension;