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.
104 lines
3.9 KiB
104 lines
3.9 KiB
import Link from 'next/link';
|
|
import React, { useState } from 'react';
|
|
import { MenuIcon, XIcon } from '@heroicons/react/outline'
|
|
import { Transition } from "@headlessui/react";
|
|
import { useRouter } from 'next/router'
|
|
|
|
const navigation = [
|
|
{ name: 'Главная', href: '/', as: false },
|
|
{ name: 'Робототехника', href: '/posts/[slug]', as:'regulations'},
|
|
{ name: 'Программирование', href: '/registration', as: false }
|
|
]
|
|
|
|
function classNames(...classes: string[]) {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
const Navigation = (): JSX.Element => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
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 ? '/posts/'+item.as : ''} href={item.href} key={item.name}>
|
|
<a
|
|
className={classNames(
|
|
item.as == router.query.slug && router.query.slug !== 'undefined'?
|
|
'bg-gray-900 text-white' :
|
|
item.href == router.pathname && item.as === false ?
|
|
'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.href == router.pathname || item.as == router.query.slug ? 'page' : 'false'}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="-mr-2 flex md:hidden">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
type="button"
|
|
aria-controls="mobile-menu"
|
|
aria-expanded="false"
|
|
>
|
|
<span className="sr-only">Открыть главное меню</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"
|
|
className="absolute bg-gray-100 z-50"
|
|
>
|
|
{(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={'/posts/'+item.as} href={item.href} key={item.name}>
|
|
<a
|
|
className={classNames(
|
|
item.as == router.query.slug && router.query.slug !== 'undefined'?
|
|
'bg-gray-900 text-white' :
|
|
item.href == router.pathname && item.as === 'true' ?
|
|
'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.href ? 'page' : undefined}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|
|
|