330 lines
15 KiB
TypeScript
330 lines
15 KiB
TypeScript
import { Popover, Transition } from '@headlessui/react';
|
|
import { Bars4Icon, ChevronDownIcon } from '@heroicons/react/24/outline';
|
|
import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
|
|
import { ThemeSwitcher } from '@nrwl/nx-dev/ui-theme';
|
|
import cx from 'classnames';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import { Fragment } from 'react';
|
|
|
|
export function Header(): JSX.Element {
|
|
const router = useRouter();
|
|
const flyoutMenu = [
|
|
{
|
|
name: 'Getting started',
|
|
description: 'Jump right in and start building!',
|
|
href: '/getting-started/intro',
|
|
},
|
|
{
|
|
name: 'Concepts',
|
|
description: 'What to know more about how Nx is working?',
|
|
href: '/concepts',
|
|
},
|
|
{
|
|
name: 'Core Features',
|
|
description:
|
|
'Learn the core features of Nx with in depth guides and explainers.',
|
|
href: '/core-features',
|
|
},
|
|
{
|
|
name: 'Distributed cache & task execution',
|
|
description:
|
|
'Executes tasks remotely on different agents in parallel. Enable remote cache in one command.',
|
|
href: '/nx-cloud/intro/what-is-nx-cloud',
|
|
},
|
|
{
|
|
name: 'Recipes',
|
|
description: 'Follow instructions to do common specific tasks.',
|
|
href: '/recipes',
|
|
},
|
|
{
|
|
name: 'Nx Console',
|
|
description:
|
|
'The official VSCode & JetBrains plugin bringing Nx to your editor.',
|
|
href: '/core-features/integrate-with-editors#vscode',
|
|
},
|
|
{
|
|
name: 'Packages',
|
|
description:
|
|
'Officials packages available for a better developer experience.',
|
|
href: '/packages',
|
|
},
|
|
{
|
|
name: 'Nx Cloud',
|
|
description:
|
|
'Learn everything about remote cache and distributed tasks configuration.',
|
|
href: '/nx-cloud/intro/what-is-nx-cloud',
|
|
},
|
|
];
|
|
const flyoutMobileMenu = [
|
|
{
|
|
name: 'Getting started',
|
|
description: 'Jump right in and start building!',
|
|
href: '/getting-started/intro',
|
|
},
|
|
{
|
|
name: 'Community',
|
|
description: "Check how to reach out and be part of Nx' community.",
|
|
href: '/getting-started/intro',
|
|
},
|
|
{
|
|
name: 'Plugins registry',
|
|
description: 'Add capabilities to your workspace with plugins.',
|
|
href: '/community#plugin-directory',
|
|
},
|
|
{
|
|
name: 'Nx Conf',
|
|
description: 'Be part of the next Nx conference!',
|
|
href: '/conf',
|
|
},
|
|
{
|
|
name: 'Nx Enterprise',
|
|
description: 'Need help?',
|
|
href: 'https://nx.app/enterprise?utm_source=nx.dev',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="relative flex print:hidden">
|
|
{/*DESKTOP*/}
|
|
<div className="mx-auto hidden w-full max-w-7xl items-center justify-between space-x-10 p-4 px-8 lg:flex">
|
|
{/*LOGO*/}
|
|
<div className="flex items-center">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center text-slate-900 dark:text-white"
|
|
>
|
|
<svg
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-8 w-8"
|
|
fill="currentColor"
|
|
>
|
|
<title>Nx</title>
|
|
<path d="m12 14.1-3.1 5-5.2-8.5v8.9H0v-15h3.7l5.2 8.9v-4l3 4.7zm.6-5.7V4.5H8.9v3.9h3.7zm5.6 4.1a2 2 0 0 0-2 1.3 2 2 0 0 1 2.4-.7c.4.2 1 .4 1.3.3a2.1 2.1 0 0 0-1.7-.9zm3.4 1c-.4 0-.8-.2-1.1-.6l-.2-.3a2.1 2.1 0 0 0-.5-.6 2 2 0 0 0-1.2-.3 2.5 2.5 0 0 0-2.3 1.5 2.3 2.3 0 0 1 4 .4.8.8 0 0 0 .9.3c.5 0 .4.4 1.2.5v-.1c0-.4-.3-.5-.8-.7zm2 1.3a.7.7 0 0 0 .4-.6c0-3-2.4-5.5-5.4-5.5a5.4 5.4 0 0 0-4.5 2.4l-1.5-2.4H8.9l3.5 5.4L9 19.5h3.6L14 17l1.6 2.4h3.5l-3.1-5a.7.7 0 0 1 0-.3 2.7 2.7 0 0 1 2.6-2.7c1.5 0 1.7.9 2 1.3.7.8 2 .5 2 1.5a.7.7 0 0 0 1 .6zm.4.2c-.2.3-.6.3-.8.6-.1.3.1.4.1.4s.4.2.6-.3V15z" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
{/*PRIMARY NAVIGATION*/}
|
|
<div className="flex-shrink-0 text-sm">
|
|
<nav
|
|
role="menu"
|
|
className="items-justified flex justify-center space-x-2 py-0.5"
|
|
>
|
|
<h2 className="sr-only">Main navigation</h2>
|
|
<Popover className="relative">
|
|
{({ open }) => (
|
|
<>
|
|
<Popover.Button
|
|
className={cx(
|
|
open ? 'text-blue-500 dark:text-sky-500' : '',
|
|
'text group inline-flex items-center px-3 py-2 font-medium leading-tight dark:text-slate-200'
|
|
)}
|
|
>
|
|
<span className="transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500">
|
|
Documentation
|
|
</span>
|
|
<ChevronDownIcon
|
|
className={cx(
|
|
open ? 'text-blue-500 dark:text-sky-500' : '',
|
|
'ml-2 h-5 w-5 transition duration-150 ease-in-out group-hover:text-blue-500 dark:group-hover:text-sky-500'
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
</Popover.Button>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform xl:max-w-3xl">
|
|
<div className="overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-slate-900 dark:ring-white/5">
|
|
<div className="relative grid gap-6 p-6 xl:grid-cols-2">
|
|
{flyoutMenu.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="-m-3 flex items-start rounded-lg p-3 transition duration-150 ease-in-out hover:bg-slate-50 dark:hover:bg-slate-800/60"
|
|
>
|
|
<div className="ml-4">
|
|
<p className="text-base font-medium text-slate-900 dark:text-slate-200">
|
|
{item.name}
|
|
</p>
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
<Link
|
|
href="https://nx.app/enterprise?utm_source=nx.dev"
|
|
title="Check Nx Enterprise"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
|
|
>
|
|
Enterprise
|
|
</Link>
|
|
<Link
|
|
href="/community"
|
|
title="Nx Community: Join us!"
|
|
className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
|
|
>
|
|
Community
|
|
</Link>
|
|
<Link
|
|
href="/community#plugin-directory"
|
|
title="Check Nx available plugins"
|
|
className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
|
|
>
|
|
Plugins registry
|
|
</Link>
|
|
<Link
|
|
href="/conf"
|
|
title="Check Nx conference"
|
|
className="relative hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
|
|
>
|
|
{/*<span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">*/}
|
|
{/* <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />*/}
|
|
{/* <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500 dark:bg-sky-500" />*/}
|
|
{/*</span>*/}Nx Conf
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
<div className="flex-shrink-0 text-sm">
|
|
<nav className="items-justified flex justify-center space-x-1">
|
|
<AlgoliaSearch tiny={true} />
|
|
<ThemeSwitcher />
|
|
<a
|
|
title="Nx is open source, check the code on GitHub"
|
|
href="https://github.com/nrwl/nx"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="px-3 py-2 opacity-60 hover:opacity-90"
|
|
>
|
|
<span className="sr-only">Nx on GitHub</span>
|
|
<div className="item-center flex">
|
|
<svg
|
|
className="h-5 w-5"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M8 0a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.42 7.42 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48l-.01 2.2c0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8a8 8 0 0 0-8-8z" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{/*MOBILE*/}
|
|
<div className="relative mx-auto flex w-full items-center justify-between p-4 lg:hidden">
|
|
<div className="flex flex-shrink-0">
|
|
{/*LOGO*/}
|
|
<a
|
|
href="/"
|
|
className="flex items-center text-slate-900 dark:text-white"
|
|
>
|
|
<svg
|
|
role="img"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-8 w-8"
|
|
fill="currentColor"
|
|
>
|
|
<title>Nx</title>
|
|
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
|
|
</svg>
|
|
</a>
|
|
{/*MENU*/}
|
|
<div className="ml-4 flex flex-shrink-0">
|
|
<Popover className="">
|
|
{({ open }) => (
|
|
<>
|
|
<Popover.Button
|
|
type="button"
|
|
className="inline-flex flex-shrink-0 items-center rounded-md border border-slate-200 bg-slate-50/60 px-3 py-2 text-sm text-sm font-semibold font-medium capitalize leading-4 shadow-sm transition hover:bg-slate-50 focus:outline-none dark:border-slate-700 dark:bg-slate-800/60 dark:hover:bg-slate-800"
|
|
>
|
|
<Bars4Icon
|
|
className="-ml-0.5 mr-2 h-4 w-4"
|
|
aria-hidden="true"
|
|
/>
|
|
{router.pathname === '/'
|
|
? 'Home'
|
|
: router.pathname.replace('/', '')}
|
|
</Popover.Button>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel className="absolute left-0 z-10 mt-3 w-screen px-2">
|
|
<div className="overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-slate-900 dark:ring-white/5">
|
|
<nav className="relative grid gap-8 p-8 md:grid-cols-2">
|
|
{flyoutMobileMenu.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="-m-3 flex items-start rounded-lg p-3 transition duration-150 ease-in-out hover:bg-slate-50 dark:hover:bg-slate-800/60"
|
|
>
|
|
<div className="ml-4">
|
|
<p className="text-base font-medium text-slate-900 dark:text-slate-200">
|
|
{item.name}
|
|
</p>
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
<div className="items-justified flex flex-shrink-0 justify-center space-x-1 text-sm">
|
|
<ThemeSwitcher />
|
|
<a
|
|
title="Nx is open source, check the code on GitHub"
|
|
href="https://github.com/nrwl/nx"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="px-3 py-2 opacity-60 hover:opacity-90"
|
|
>
|
|
<span className="sr-only">Nx on GitHub</span>
|
|
<div className="item-center flex">
|
|
<svg className="h-5 w-5" viewBox="0 0 16 16" fill="currentColor">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|