Elgato_dark/taxonomy
1
0
Fork 0
mirror of https://github.com/shadcn-ui/taxonomy synced 2026-05-24 09:48:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: fixes the issue regarding mobile navigation does not close on click

Browse source
This commit is contained in:
Koushik 2023-10-11 15:55:20 +05:30
parent 651f984e52
commit 022e8a2db8
1 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/main-nav.tsx
View file

@ -19,6 +19,24 @@ export function MainNav({ items, children }: MainNavProps) {
const segment = useSelectedLayoutSegment()
const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false)
const toggleMobileMenu = () => {
setShowMobileMenu(!showMobileMenu)
}
React.useEffect(() => {
const closeMobileMenuOnClickOutside = (event: MouseEvent) => {
if (showMobileMenu) {
setShowMobileMenu(false)
}
}
document.addEventListener("click", closeMobileMenuOnClickOutside)
return () => {
document.removeEventListener("click", closeMobileMenuOnClickOutside)
}
}, [showMobileMenu])
return (
<div className="flex gap-6 md:gap-10">
<Link href="/" className="hidden items-center space-x-2 md:flex">
@ -48,7 +66,7 @@ export function MainNav({ items, children }: MainNavProps) {
) : null}
<button
className="flex items-center space-x-2 md:hidden"
onClick={() => setShowMobileMenu(!showMobileMenu)}
onClick={toggleMobileMenu}
>
{showMobileMenu ? <Icons.close /> : <Icons.logo />}
<span className="font-bold">Menu</span>