From b8552ed7e7dde6cce93502bffa112e5149c14380 Mon Sep 17 00:00:00 2001
From: amirhouieh <amir@status.im>
Date: Mon, 28 Aug 2023 13:09:17 +0200
Subject: [PATCH] [#125] fix menu navigation and style issues

---
 src/components/NavBar/NavBar.tsx            |  6 ++++--
 src/components/NavBar/Navbar.MobileMenu.tsx | 10 ++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 313d60e..dc32639 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -29,9 +29,7 @@ export default function NavBar({ defaultState }: NavBarProps) {
   const state = useNavbarState(defaultState)
   const themeState = useThemeState()
   const { pathname } = useRouter()
-  const isSearchPage = pathname === '/search'
   const [hide, setHide] = useState(false)
-  const scrollDirection = useScrollDirection()
   const [showMobileMenu, setShowMobileMenu] = useState(false)
 
   const className = pathname.split('/')[1] + '_page'
@@ -40,6 +38,10 @@ export default function NavBar({ defaultState }: NavBarProps) {
     setShowMobileMenu(!showMobileMenu)
   }
 
+  useEffect(() => {
+    setShowMobileMenu(false)
+  }, [pathname])
+
   useEffect(() => {
     defaultState && state.state.set((value) => ({ ...value, ...defaultState }))
   }, [defaultState])
diff --git a/src/components/NavBar/Navbar.MobileMenu.tsx b/src/components/NavBar/Navbar.MobileMenu.tsx
index 352a062..13c295f 100644
--- a/src/components/NavBar/Navbar.MobileMenu.tsx
+++ b/src/components/NavBar/Navbar.MobileMenu.tsx
@@ -5,11 +5,21 @@ import { uiConfigs } from '@/configs/ui.configs'
 import { FooterOrgPanel } from '@/components/Footer/Footer.OrgPanel'
 import { useThemeState } from '@/states/themeState'
 import { ThemeSwitchWithLabel } from '@/components/ThemeSwitch/ThemeSwitch'
+import { useEffect } from 'react'
 
 interface Props {}
 
 export const NavbarMobileMenu = (props: Props) => {
   const themeState = useThemeState()
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    document.documentElement.style.overflow = 'hidden'
+    return () => {
+      document.documentElement.style.overflow = 'auto'
+    }
+  }, [])
+
   return (
     <NavbarMobileMenuContainer>
       <InnerContainer>