Nx

import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'; import { ArrowUpRightIcon, Bars4Icon, ChevronDownIcon, XMarkIcon, } from '@heroicons/react/24/outline'; import cx from 'classnames'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { Fragment, useEffect, useState } from 'react'; import { ButtonLink } from '../button'; import { eventItems, featuresItems, learnItems, plans, resourceMenuItems, solutionsMenuItems, } from './menu-items'; import { NxIcon } from '../nx-icon'; import { GitHubIcon } from '../github-icon'; import { MobileMenuItem } from './mobile-menu-item'; import { SectionsMenu } from './sections-menu'; import { TwoColumnsMenu } from './two-columns-menu'; import { AlgoliaSearch } from '@nx/nx-dev/feature-search'; import { NxCloudIcon } from '../nx-cloud-icon'; export function Header(): JSX.Element { let [isOpen, setIsOpen] = useState(false); const router = useRouter(); // We need to close the popover if the route changes or the window is resized to prevent the popover from being stuck open. const checkSizeAndClosePopover = () => { const breakpoint = 1024; // This is the standard Tailwind lg breakpoint value if (window.innerWidth < breakpoint) { setIsOpen(false); } }; useEffect(() => { window.addEventListener('resize', checkSizeAndClosePopover); return () => { window.removeEventListener('resize', checkSizeAndClosePopover); }; }, []); return (

{/*DESKTOP*/}

{/*PRIMARY NAVIGATION*/}

{/*LOGO*/} Nx

{/*SECONDARY NAVIGATION*/}

{/*MOBILE*/}

{/*LOGO*/} Nx

); }