From 1b2ec2e43648ace6bbb0a3fa2e31b865b5981a1f Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 1 Sep 2023 03:26:10 +0800
Subject: [PATCH] Navbar menu to change selected tab

---
 components/navbar.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 281cc54..ec8bf9a 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -31,7 +31,7 @@ import { Icon } from '@iconify/react'
 import NewBookmarkForm from '@/components/newBookmarkForm'
 import { usePathname, useRouter } from 'next/navigation'
 import { BookmarkCategory, User } from '@/types'
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 import { BookmarkCategoryContext } from '@/app/providers'
 
 export const Navbar = ({
@@ -43,6 +43,7 @@ export const Navbar = ({
 }) => {
 	const pathname = usePathname()
 	const { setSelectedCategory } = useContext(BookmarkCategoryContext)
+	const [menuOpen, setMenuOpen] = useState(false)
 
 	if (pathname.startsWith('/login') || pathname.startsWith('/signup')) {
 		return <></>
@@ -51,7 +52,9 @@ export const Navbar = ({
 	return (
 		<NextUINavbar
 			maxWidth='xl'
-			position='sticky'>
+			position='sticky'
+			isMenuOpen={menuOpen}
+			onMenuOpenChange={(isOpen) => setMenuOpen(isOpen ?? menuOpen)}>
 			<NavbarContent
 				className='basis-1/5 sm:basis-full'
 				justify='start'>
@@ -152,6 +155,18 @@ export const Navbar = ({
 							</Link>
 						</NavbarMenuItem>
 					))}
+					{pathname.startsWith('/dashboard') &&
+						categories.length > 0 &&
+						categories.map((category) => (
+							<NavbarMenuItem
+								key={category.name}
+								onClick={() => {
+									setMenuOpen(false)
+									setSelectedCategory(category.id.toString())
+								}}>
+								{category.name}
+							</NavbarMenuItem>
+						))}
 				</div>
 			</NavbarMenu>
 		</NextUINavbar>