'use client'; import { useEffect, useRef, useState } from 'react'; import { RiArrowDownSLine, RiArrowRightUpLongLine, RiBookmarkLine, RiCloseFill, RiFlashlightFill, RiLayoutGridLine, RiMenuLine, RiMoonClearLine, RiPulseFill, RiTaskLine, } from '@remixicon/react'; import Image from './next-image-mock'; import Link from './next-link-mock'; import * as Button from './components/ui/button'; import * as LinkButton from './components/ui/link-button'; 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

); } const Logo = ({ className }: { className?: string }) => ( ); export default function Header05() { 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 handleClick = (event: MouseEvent) => { const target = event.target as Node; if (panelRef.current && panelRef.current.contains(target)) return; if (toggleRef.current && toggleRef.current.contains(target)) return; setIsMenuOpen(false); }; document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, [isMenuOpen]); return (

Create

{ if (e.target === e.currentTarget) setIsMenuOpen(false); }} className={`lg:shadow-complex ease absolute top-16 left-0 h-[calc(100dvh-64px)] w-full overflow-auto transition-all duration-500 lg:top-20.5 lg:left-1/2 lg:h-auto lg:w-fit lg:-translate-x-1/2 lg:overflow-hidden lg:rounded-3xl ${isMenuOpen ? 'visible opacity-100' : 'invisible opacity-0'}`} >

e.stopPropagation()}>

); }