Merge pull request #132 from acid-info/mobile-menu

[#125] fix menu navigation and style issues

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])

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>