'use client'; import { useEffect, useRef, useState } from 'react'; import { RiArrowDownSLine, RiArrowRightUpLongLine, RiCloseFill, RiFlashlightFill, RiLayoutGridLine, RiMenu3Fill, RiPulseFill, RiTaskLine, } from '@remixicon/react'; import Link from '../../next-link-mock'; import * as Button from '../ui/button'; import * as LinkButton from '../ui/link-button'; import { cn } from '../../utils/cn'; const nav: Array<{ label: string; href?: string; isnew?: boolean; navMenu?: boolean; }> = [ { label: 'Products', href: '/' }, { label: 'Services', href: '/', isnew: true }, { label: 'Solutions', navMenu: true }, { label: 'Pricing', href: '/' }, { label: 'Contact', href: '/' }, ]; function NavDropdownMenu() { return (

QUICK ACCESS HUB

Quick access hub

Manage projects in one unified workspace.

Overview Workflow Checklists

v.1.5.69 · Apex Tech™

TOOLS

Centralized workspace Real-time sync Smart alerts Fast lookups

SUPPORTS

Help center Getting started Community forum

featured

Your wallet, anywhere

Securely manage money on the go

Get the app

); } const Logo = ({ className }: { className?: string }) => ( ); type Header01Props = { announcement?: boolean; }; export default function Header01({ announcement = false }: Header01Props) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [activeNavMenu, setActiveNavMenu] = useState(null); const navContentRef = useRef(null); const [navHeight, setNavHeight] = useState(0); useEffect(() => { if (navContentRef.current) { setNavHeight(navContentRef.current.scrollHeight); } }, [activeNavMenu]); useEffect(() => { document.body.style.overflow = isMenuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [isMenuOpen]); const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; const toggleNavMenu = (label: string) => { setActiveNavMenu(activeNavMenu === label ? null : label); }; return (

{nav.map((item) => (

{item.navMenu ? ( ) : ( {item.label} {item.isnew && ( NEW )} )} {item.navMenu && (

)}

))}

); }