'use client'; import { useEffect, useRef, useState } from 'react'; import { RiArrowRightUpLongLine, RiCloseFill, RiFlashlightFill, RiLayoutGridLine, RiMenu3Fill, RiNotification3Line, RiPulseFill, RiSearchLine, RiTaskLine, } from '@remixicon/react'; import Link from './next-link-mock'; import * as Button from './components/ui/button'; import * as LinkButton from './components/ui/link-button'; import { cn } from './utils/cn'; 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 Header03Props = { announcement?: boolean; }; export default function Header03({ announcement = false }: Header03Props) { const [isMenuOpen, setIsMenuOpen] = useState(false); const toggleRef = useRef(null); const panelRef = useRef(null); useEffect(() => { document.body.style.overflow = isMenuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [isMenuOpen]); const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; useEffect(() => { if (!isMenuOpen) return; const handleDocumentClick = (event: MouseEvent) => { const targetNode = event.target as Node; if (panelRef.current && panelRef.current.contains(targetNode)) return; if (toggleRef.current && toggleRef.current.contains(targetNode)) return; setIsMenuOpen(false); }; document.addEventListener('mousedown', handleDocumentClick); return () => document.removeEventListener('mousedown', handleDocumentClick); }, [isMenuOpen]); return (

Get started

{ if (e.target === e.currentTarget) setIsMenuOpen(false); }} className={cn( 'ease absolute top-16 left-0 w-full overflow-auto transition-all duration-500 lg:top-18 lg:h-auto lg:overflow-visible', announcement ? 'h-[calc(100dvh-189px)]' : 'h-[calc(100dvh-149px)]', isMenuOpen ? 'visible opacity-100' : 'invisible opacity-0', )} >

e.stopPropagation()}>

); }