added tons of features

components/shared/navbar/navbar-menu.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import {Menu as MenuIcon, X} from 'lucide-react'
+import Link from 'next/link'
+import {useState} from 'react'
+
+import {data} from '@/lib/data'
+import {Button} from '@/ui/button'
+
+export default function NavbarMenu() {
+	const bp = 'md'
+
+	const [menuOpened, setMenuOpened] = useState(false)
+
+	function ToggleNavbar() {
+		setMenuOpened(!menuOpened)
+	}
+
+	return (
+		<>
+			<div className={`hidden ${bp}:block w-full`}>
+				<div className='flex items-center justify-between'>
+					{data.headerMenus.map(item => (
+						<Link href={item.href + item.slug} className='' key={item.name}>
+							{item.name}
+						</Link>
+					))}
+				</div>
+			</div>
+			<div className={`flex items-center ${bp}:hidden`}>
+				<Button variant='ghost' onClick={ToggleNavbar}>
+					{menuOpened ? <X /> : <MenuIcon />}
+				</Button>
+			</div>
+			{menuOpened && (
+				<div className={`${bp}:hidden`}>
+					<div className='space-y-1 px-2 pb-3 pt-2'>
+						<Link href={'#'}>Hidden Menu</Link>
+					</div>
+				</div>
+			)}
+		</>
+	)
+}