'use client'; import { ModeToggle } from '@konobangu/design-system/components/mode-toggle'; import { Button } from '@konobangu/design-system/components/ui/button'; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from '@konobangu/design-system/components/ui/navigation-menu'; import { env } from '@konobangu/env'; import { Menu, MoveRight, X } from 'lucide-react'; import Link from 'next/link'; import { useState } from 'react'; import Image from 'next/image'; import Logo from './logo.svg'; export const Header = () => { const navigationItems = [ { title: 'Home', href: '/', description: '', }, { title: 'Product', description: 'Managing a small business today is already tough.', items: [ { title: 'Pricing', href: '/pricing', }, { title: 'Pricing', href: '/pricing', }, { title: 'Pricing', href: '/pricing', }, { title: 'Pricing', href: '/pricing', }, ], }, { title: 'Blog', href: '/blog', description: '', }, ]; if (env.NEXT_PUBLIC_DOCS_URL) { navigationItems.push({ title: 'Docs', href: env.NEXT_PUBLIC_DOCS_URL, description: '', }); } const [isOpen, setOpen] = useState(false); return (
{navigationItems.map((item) => ( {item.href ? ( <> ) : ( <> {item.title}

{item.title}

{item.description}

{item.items?.map((subItem, idx) => ( {subItem.title} ))}
)}
))}
Logo

next-forge

{isOpen && (
{navigationItems.map((item) => (
{item.href ? ( {item.title} ) : (

{item.title}

)} {item.items?.map((subItem) => ( {subItem.title} ))}
))}
)}
); };