From 9828aa2b2fbc36e9f047c757d0b259225fd9ecb1 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 30 Mar 2022 12:57:44 +0300
Subject: [PATCH] fix: navbar resize issue

---
 src/Components/Navbar/Navbar.tsx     | 28 ++++++++++++++--------------
 src/utils/hooks/useResizeListener.ts |  1 +
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index af0591e..20283aa 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -1,7 +1,7 @@
 import NavMobile from "./NavMobile";
 import { MdHomeFilled, MdLocalFireDepartment } from "react-icons/md";
 import { IoExtensionPuzzle } from "react-icons/io5";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "src/utils/hooks";
 import { openModal } from "src/redux/features/modals.slice";
 import { setNavHeight } from "src/redux/features/ui.slice";
@@ -54,21 +54,21 @@ export default function Navbar() {
   };
 
 
+  useEffect(() => {
+    const nav = document.querySelector("nav");
 
-  const resizeCb = useCallback(
-    () => {
-      const nav = document.querySelector("nav");
-      if (nav) {
-        const navStyles = getComputedStyle(nav);
-        if (navStyles.display !== "none") {
-          dispatch(setNavHeight(nav.clientHeight));
-          document.body.style.paddingTop = `${nav.clientHeight}px`;
-        }
+    if (nav) {
+      const navStyles = getComputedStyle(nav);
+      if (navStyles.display !== "none") {
+        dispatch(setNavHeight(nav.clientHeight));
+        document.body.style.paddingTop = `${nav.clientHeight}px`;
       }
-    },
-    [dispatch],
-  )
-  useResizeListener(resizeCb);
+    }
+
+
+  }, [dispatch, isMobileScreen, isLargeScreen])
+
+
 
 
   return (
diff --git a/src/utils/hooks/useResizeListener.ts b/src/utils/hooks/useResizeListener.ts
index d6e0a70..b043a12 100644
--- a/src/utils/hooks/useResizeListener.ts
+++ b/src/utils/hooks/useResizeListener.ts
@@ -11,6 +11,7 @@ export const useResizeListener = (
     func();
 
     window.addEventListener("resize", listener);
+
     return () => {
       window.removeEventListener("resize", listener);
     };