You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.5 KiB
100 lines
3.5 KiB
import Link from 'next/link';
|
|
import React, { useState } from 'react';
|
|
import { Disclosure} from '@headlessui/react'
|
|
import { MenuIcon, XIcon } from '@heroicons/react/outline'
|
|
import { Transition } from "@headlessui/react";
|
|
|
|
const navigation = [
|
|
{ name: 'Главная', href: '/', current: true },
|
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false },
|
|
{ name: 'Регистрация', href: '/registration', current: false },
|
|
{ name: 'О нас', href: '/about', current: false },
|
|
]
|
|
|
|
|
|
|
|
function classNames(...classes) {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
|
|
|
|
const Navigation = (): JSX.Element => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
return (
|
|
<nav className="">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="flex items-center">
|
|
<div className="hidden md:block">
|
|
<div className="ml-10 flex items-baseline space-x-4">
|
|
{navigation.map((item) => (
|
|
<Link as={item.as} href={item.href} key={item.name}>
|
|
<a
|
|
className={classNames(
|
|
item.current ? 'bg-gray-900 text-white' : 'text-gray-900 hover:bg-gray-700 hover:text-white',
|
|
'px-3 py-2 rounded-md text-sm font-medium'
|
|
)}
|
|
aria-current={item.current ? 'page' : undefined}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="-mr-2 flex md:hidden">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
type="button"
|
|
className="bg-gray-900 inline-flex items-center justify-center p-2
|
|
rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white"
|
|
aria-controls="mobile-menu"
|
|
aria-expanded="false"
|
|
>
|
|
<span className="sr-only">Open main menu</span>
|
|
{!isOpen ? (
|
|
<MenuIcon className="block h-6 w-6" aria-hidden="false" />
|
|
) : (
|
|
<XIcon className="block h-6 w-6" aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Transition
|
|
show={isOpen}
|
|
enter="transition ease-out duration-100 transform"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="transition ease-in duration-75 transform"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
{(ref) => (
|
|
<div className="md:hidden" id="mobile-menu">
|
|
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
{navigation.map((item) => (
|
|
<Link as={item.as} href={item.href} key={item.name}>
|
|
<a
|
|
className={classNames(
|
|
item.current ? 'bg-gray-900 text-white' : 'text-gray-900 hover:bg-gray-900 hover:text-white',
|
|
'block px-3 py-2 rounded-md text-base font-medium'
|
|
)}
|
|
aria-current={item.current ? 'page' : undefined}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|
|
|