Krasnikov.pro
3 years ago
parent
67fdba7eaf
commit
71e5dec0b4
@ -0,0 +1,46 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { MetaProps } from '../types/layout'; |
||||||
|
import Head from './Head'; |
||||||
|
import Navigation from './Navigation'; |
||||||
|
import ThemeSwitch from './ThemeSwitch'; |
||||||
|
|
||||||
|
type LayoutProps = { |
||||||
|
children: React.ReactNode; |
||||||
|
customMeta?: MetaProps; |
||||||
|
}; |
||||||
|
|
||||||
|
export const WEBSITE_HOST_URL = 'https://nextjs-typescript-mdx-blog.vercel.app'; |
||||||
|
|
||||||
|
const Layout = ({ children, customMeta }: LayoutProps): JSX.Element => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Head customMeta={customMeta} /> |
||||||
|
<header> |
||||||
|
<div className="max-w-5xl px-8 mx-auto max-w"> |
||||||
|
<div className="flex items-center justify-between py-6"> |
||||||
|
<Navigation /> |
||||||
|
<ThemeSwitch /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<div className="max-w-5xl px-8 py-4 mx-auto max-w"> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
<footer className="py-8"> |
||||||
|
<div className="max-w-5xl px-8 mx-auto max-w"> |
||||||
|
Разработано {' '} |
||||||
|
<a |
||||||
|
className="text-gray-900 dark:text-white" |
||||||
|
href="https://krasnikov.pro" |
||||||
|
> |
||||||
|
Krasnikov.pro {(new Date()).getFullYear()} |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Layout; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { MetaProps } from '../types/layout'; |
||||||
|
import Head from './Head'; |
||||||
|
import Navigation from './Navigation'; |
||||||
|
import ThemeSwitch from './ThemeSwitch'; |
||||||
|
|
||||||
|
type LayoutProps = { |
||||||
|
children: React.ReactNode; |
||||||
|
customMeta?: MetaProps; |
||||||
|
}; |
||||||
|
|
||||||
|
export const WEBSITE_HOST_URL = 'https://nextjs-typescript-mdx-blog.vercel.app'; |
||||||
|
|
||||||
|
const Layout = ({ children, customMeta }: LayoutProps): JSX.Element => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Head customMeta={customMeta} /> |
||||||
|
<header> |
||||||
|
<div className="max-w-5xl px-8 mx-auto max-w"> |
||||||
|
<div className="flex items-center justify-between py-6"> |
||||||
|
<Navigation /> |
||||||
|
<ThemeSwitch /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<div className="max-w-5xl px-8 py-4 mx-auto max-w"> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
<footer className="py-8"> |
||||||
|
<div className="max-w-5xl px-8 mx-auto max-w"> |
||||||
|
Разработано {' '} |
||||||
|
<a |
||||||
|
className="text-gray-900 dark:text-white" |
||||||
|
href="https://krasnikov.pro" |
||||||
|
> |
||||||
|
Krasnikov.pro {(new Date()).getFullYear()} год |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Layout; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { MetaProps } from '../types/layout'; |
||||||
|
import Head from './Head'; |
||||||
|
import Navigation from './Navigation'; |
||||||
|
import ThemeSwitch from './ThemeSwitch'; |
||||||
|
|
||||||
|
type LayoutProps = { |
||||||
|
children: React.ReactNode; |
||||||
|
customMeta?: MetaProps; |
||||||
|
}; |
||||||
|
|
||||||
|
export const WEBSITE_HOST_URL = 'https://nextjs-typescript-mdx-blog.vercel.app'; |
||||||
|
|
||||||
|
const Layout = ({ children, customMeta }: LayoutProps): JSX.Element => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Head customMeta={customMeta} /> |
||||||
|
<header> |
||||||
|
<div className="max-w-5xl px-8 mx-auto max-w"> |
||||||
|
<div className="flex items-center justify-between py-6"> |
||||||
|
<Navigation /> |
||||||
|
<ThemeSwitch /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<div className="max-w-5xl px-8 py-4 mx-auto max-w"> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
<footer className="py-8"> |
||||||
|
<div className="max-w-5xl px-8 mx-auto max-w"> |
||||||
|
Разработано {' '} |
||||||
|
<a |
||||||
|
className="text-gray-900 dark:text-white" |
||||||
|
href="https://krasnikov.pro" |
||||||
|
> |
||||||
|
Krasnikov.pro - {(new Date()).getFullYear()} год |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Layout; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import router from 'next/router'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(router.asPath); |
||||||
|
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" |
||||||
|
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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import router from 'next/router'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(item.href); |
||||||
|
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" |
||||||
|
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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import router from 'next/router'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(); |
||||||
|
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" |
||||||
|
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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import router from 'next/router'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import router from 'next/router'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import { useLocation } from 'react-router-dom'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(useLocation()); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,98 @@ |
|||||||
|
import Link from 'next/link'; |
||||||
|
import React, { useState } from 'react'; |
||||||
|
import { MenuIcon, XIcon } from '@heroicons/react/outline' |
||||||
|
import { Transition } from "@headlessui/react"; |
||||||
|
import { useLocation } from 'react-router-dom'; |
||||||
|
|
||||||
|
const navigation = [ |
||||||
|
{ name: 'Главная', href: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
console.log(useLocation()); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: true }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href === router.pathname ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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.href === router.pathname ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href === router.pathname ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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.href == router.pathname ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href === router.pathname ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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, count) => ( |
||||||
|
<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' : 'true'} |
||||||
|
onClick={(e) => setNavigation([{...navigation, navigation[count].current= true}])} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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, count) => ( |
||||||
|
<Link as={item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router); |
||||||
|
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, count) => ( |
||||||
|
<Link as={item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query); |
||||||
|
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, count) => ( |
||||||
|
<Link as={item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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, count) => ( |
||||||
|
<Link as={item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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={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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'/posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'/posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? '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 ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname || item.as == router.query.slug? '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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? item.as == router.query.slug ? 'bg-gray-900 text-white' : 'text-gray-900 hover:bg-gray-700 hover:text-white' : 'bg-gray-900 text-white', |
||||||
|
'px-3 py-2 rounded-md text-sm font-medium' |
||||||
|
)} |
||||||
|
aria-current={item.href == router.pathname || item.as == router.query.slug ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? item.as == router.query.slug ? 'bg-gray-900 text-white' : '' : 'bg-gray-900 text-white', |
||||||
|
'px-3 py-2 rounded-md text-sm font-medium' |
||||||
|
)} |
||||||
|
aria-current={item.href == router.pathname || item.as == router.query.slug ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? item.as == router.query.slug ? 'bg-gray-900 text-white' : 'text-gray-900 hover:bg-gray-700 hover:text-white' : 'bg-gray-900 text-white', |
||||||
|
'px-3 py-2 rounded-md text-sm font-medium' |
||||||
|
)} |
||||||
|
aria-current={item.href == router.pathname || item.as == router.query.slug ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? item.as == router.query.slug ? '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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? item.as == router.query.slug ? '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' |
||||||
|
)} |
||||||
|
|
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.href == router.pathname ? item.as == router.query.slug ? 'bg-gray-900 text-white' : 'text-gray-900 hover:bg-gray-700 hover:text-white' : item.as == router.query.slug ? '' : '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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
item.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : 'text-gray-900 hover:bg-gray-700 hover:text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
'', |
||||||
|
'px-3 py-2 rounded-md text-sm font-medium' |
||||||
|
)} |
||||||
|
aria-current={item.href == router.pathname || item.as == router.query.slug ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
' : |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
'' : |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as == router.query.slug? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as === router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as != router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as !== router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const [navigation, setNavigation] = useState([ |
||||||
|
{ name: 'Главная', href: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'/posts/festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'/posts/task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
]); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{item.as} |
||||||
|
</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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'post/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'/posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'/posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as != router.query.slug ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'/posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as == 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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 {item.as != 'undefined' ? as={'/posts/'+item.as} : ''} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as == 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={'/posts/'+item.as} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as == 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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={''} href={item.href} key={item.name}> |
||||||
|
<a |
||||||
|
className={classNames( |
||||||
|
item.as == router.query.slug ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as == 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as == 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.query.slug); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as === 'undefined' ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
'', |
||||||
|
'px-3 py-2 rounded-md text-sm font-medium' |
||||||
|
)} |
||||||
|
aria-current={item.href == router.pathname || item.as == router.query.slug ? 'page' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 ? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as === 'undefined' ? |
||||||
|
'' : |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 !== 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: '/', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: 'true', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: 'true', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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? |
||||||
|
'bg-gray-900 text-white' : |
||||||
|
item.href == router.pathname && item.as === 'undefined' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
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: 'true', current: false }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations', current: true }, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true', current: false }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule', current: false }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples', current: false }, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true', current: false }, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
return classes.filter(Boolean).join(' ') |
||||||
|
} |
||||||
|
|
||||||
|
const Navigation = (): JSX.Element => { |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
const router = useRouter() |
||||||
|
console.log(router.pathname); |
||||||
|
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 === 'true' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
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: 'true' }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations'}, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true' }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule' }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples'}, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true'}, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
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 === 'true' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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.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.href ? 'page' : undefined} |
||||||
|
> |
||||||
|
{item.name} |
||||||
|
</a> |
||||||
|
</Link> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Transition> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Navigation; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
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: 'true' }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations'}, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true' }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule' }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples'}, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true'}, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
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 === 'true' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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-700 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; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
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: 'true' }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations'}, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true' }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule' }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples'}, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true'}, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
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 === 'true' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
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: 'true' }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations'}, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true' }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule' }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples'}, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true'}, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
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 === 'true' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
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: 'true' }, |
||||||
|
{ name: 'Правила', href: '/posts/[slug]', as:'regulations'}, |
||||||
|
{ name: 'Регистрация', href: '/registration', as: 'true' }, |
||||||
|
{ name: 'Расписание', href: '/posts/[slug]', as:'festival-schedule' }, |
||||||
|
{ name: 'Примеры', href: '/posts/[slug]', as:'task-completion-examples'}, |
||||||
|
{ name: 'О нас', href: '/about', as: 'true'}, |
||||||
|
] |
||||||
|
|
||||||
|
function classNames(...classes) { |
||||||
|
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 === 'true' ? |
||||||
|
'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' : 'true'} |
||||||
|
> |
||||||
|
{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">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" |
||||||
|
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; |
||||||
@ -0,0 +1,249 @@ |
|||||||
|
import React,{useRef} from 'react'; |
||||||
|
import { useForm, SubmitHandler } from "react-hook-form"; |
||||||
|
|
||||||
|
interface IFormInputs { |
||||||
|
firstName: string |
||||||
|
lastName: string |
||||||
|
coach_telefon_number: string |
||||||
|
body: string[] |
||||||
|
} |
||||||
|
|
||||||
|
const alerError = (props) => { |
||||||
|
return <p className="mt-2 text-sm text-red-600 dark:text-red-500 font-medium">{props}</p> |
||||||
|
} |
||||||
|
|
||||||
|
export const RegistrationForm = (props): JSX.Element => { |
||||||
|
const form = useRef(null); |
||||||
|
const { register, handleSubmit, reset, formState: { errors } } = useForm(); |
||||||
|
|
||||||
|
const onSubmit: SubmitHandler<IFormInputs> = data => { |
||||||
|
fetch('/api/registration', { method: 'POST', body: JSON.stringify(Object.values(data)) }) |
||||||
|
.then(props.updateData(2)) |
||||||
|
reset(); |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="mt-10 sm:mt-0"> |
||||||
|
<div className="md:grid md:grid-cols-3 md:gap-6"> |
||||||
|
<div className="md:col-span-1"> |
||||||
|
<div className="px-4 sm:px-0"> |
||||||
|
<h3 className="text-lg font-medium leading-6">Регистрация команды</h3> |
||||||
|
<p className="mt-1 text-sm">Введите актуальные данные команды</p> |
||||||
|
<p className="mt-1 text-sm">От каждого учебного заведения может быть зарегистрированно неограниченое количеставо команд</p> |
||||||
|
<p className="mt-1 text-sm"> Подписывайтесь на наш<a href="https://t.me/robotop_competition" className="text-blue-600 dark:text-blue-500 hover:underline"> Telegram канал </a>, что-бы быть в курсе новосте про соревнование </p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mt-5 md:mt-0 md:col-span-2"> |
||||||
|
<form ref={form} onSubmit={handleSubmit(onSubmit)}> |
||||||
|
<div className="shadow overflow-hidden sm:rounded-md"> |
||||||
|
<div className="px-4 py-5 bg-white sm:p-6"> |
||||||
|
<div className="grid grid-cols-6 gap-6"> |
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="first-name" className="block text-sm font-medium text-gray-700"> |
||||||
|
ФИО тренера команды |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("name_team_coach",{ required: true, maxLength: 80 })} |
||||||
|
name="name_team_coach" |
||||||
|
placeholder="Иванов Иван Иванович" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{errors.name_team_coach && alerError('Введите ФИО тренера команды') } |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="last-name" className="block text-sm font-medium text-gray-700"> |
||||||
|
Номер теленона тренера |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("coach_telefon_number",{ required: true, valueAsNumber: true })} |
||||||
|
name="coach_telefon_number" |
||||||
|
placeholder="+79181234567" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{errors.coach_telefon_number && alerError('Введите номер телефона')} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="email-address" className="block text-sm font-medium text-gray-700"> |
||||||
|
Email тренера |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("trainer_mail",{ required: true, maxLength: 80, pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ })} |
||||||
|
placeholder="you@example.com" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{errors.trainer_mail && alerError('Введите коректный Email адресс') |
||||||
|
} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="email-address" className="block text-sm font-medium text-gray-700"> |
||||||
|
Город команда |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("city_team",{ required: true, maxLength: 80 })} |
||||||
|
name="city_team" |
||||||
|
placeholder="Краснодар" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{ errors.city_team && alerError('Введите город команды') } |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-3"> |
||||||
|
<label htmlFor="street-address" className="block text-sm font-medium text-gray-700"> |
||||||
|
Учебное заведение команды |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("training_institution_team",{ required: true, maxLength: 150 })} |
||||||
|
name="training_institution_team" |
||||||
|
placeholder="МАОУ СОШ 103" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{errors.training_institution_team && alerError('Введите название учебного заведения') } |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-3"> |
||||||
|
<label htmlFor="region" className="block text-sm font-medium text-gray-700"> |
||||||
|
Название команды |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("team_name",{ required: true, maxLength: 150 })} |
||||||
|
name="team_name" |
||||||
|
placeholder="Фиксики" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{errors.team_name && alerError('Введите название команды') } |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="city" className="block text-sm font-medium text-gray-700"> |
||||||
|
ФИО первого участника |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("name_first_participant",{ required: true, maxLength: 150 })} |
||||||
|
name="name_first_participant" |
||||||
|
placeholder="Иванов Иван Иванович" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
{errors.name_first_participant && alerError('Введите ФИО участника') } |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="country" className="block text-sm font-medium text-gray-700"> |
||||||
|
Класс участника |
||||||
|
</label> |
||||||
|
<select |
||||||
|
{...register("first_partial_class")} |
||||||
|
name="first_partial_class" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
> |
||||||
|
<option selected>-- Выбрать --</option> |
||||||
|
<option>1</option> |
||||||
|
<option>2</option> |
||||||
|
<option>3</option> |
||||||
|
<option>4</option> |
||||||
|
<option>5</option> |
||||||
|
<option>6</option> |
||||||
|
<option>7</option> |
||||||
|
<option>8</option> |
||||||
|
<option>9</option> |
||||||
|
<option>10</option> |
||||||
|
<option>11</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="city" className="block text-sm font-medium text-gray-700"> |
||||||
|
ФИО второго участника |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("name_second_participant",{ maxLength: 150 })} |
||||||
|
name="name_second_participant" |
||||||
|
defaultValue='нет' |
||||||
|
placeholder="Иванов Петр Иванович / нет" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="country" className="block text-sm font-medium text-gray-700"> |
||||||
|
Класс участника |
||||||
|
</label> |
||||||
|
<select |
||||||
|
{...register("second_class")} |
||||||
|
name="second_class" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
> |
||||||
|
<option selected>-- Выбрать --</option> |
||||||
|
<option>1</option> |
||||||
|
<option>2</option> |
||||||
|
<option>3</option> |
||||||
|
<option>4</option> |
||||||
|
<option>5</option> |
||||||
|
<option>6</option> |
||||||
|
<option>7</option> |
||||||
|
<option>8</option> |
||||||
|
<option>9</option> |
||||||
|
<option>10</option> |
||||||
|
<option>11</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="city" className="block text-sm font-medium text-gray-700"> |
||||||
|
ФИО третьего участника |
||||||
|
</label> |
||||||
|
<input |
||||||
|
{...register("name_third_party",{ maxLength: 150 })} |
||||||
|
name="name_third_party" |
||||||
|
defaultValue='нет' |
||||||
|
placeholder="Иванов Дмитрий Иванович / нет" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-span-6 sm:col-span-3"> |
||||||
|
<label htmlFor="country" className="block text-sm font-medium text-gray-700"> |
||||||
|
Класс участника |
||||||
|
</label> |
||||||
|
<select |
||||||
|
{...register("third_part_class")} |
||||||
|
name="third_part_class" |
||||||
|
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||||
|
> |
||||||
|
<option selected>-- Выбрать --</option> |
||||||
|
<option>1</option> |
||||||
|
<option>2</option> |
||||||
|
<option>3</option> |
||||||
|
<option>4</option> |
||||||
|
<option>5</option> |
||||||
|
<option>6</option> |
||||||
|
<option>7</option> |
||||||
|
<option>8</option> |
||||||
|
<option>9</option> |
||||||
|
<option>10</option> |
||||||
|
<option>11</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6"> |
||||||
|
<button |
||||||
|
type="submit" |
||||||
|
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" |
||||||
|
> |
||||||
|
Зарегистрировать команду |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default RegistrationForm; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'dark'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'light'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'dark'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'dark'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'dark' : 'light' )} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'dark'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'light'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
import { useTheme } from 'next-themes'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Based off of gatsby-theme-novela |
||||||
|
* https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
|
||||||
|
*/ |
||||||
|
|
||||||
|
const ThemeSwitch = (): JSX.Element => { |
||||||
|
const [mounted, setMounted] = React.useState(false); |
||||||
|
const { theme, setTheme } = useTheme(); |
||||||
|
|
||||||
|
// After mounting, we have access to the theme
|
||||||
|
React.useEffect(() => setMounted(true), []); |
||||||
|
|
||||||
|
if (!mounted) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isDark = theme === 'dark'; |
||||||
|
const color = isDark ? '#fff' : '#000'; |
||||||
|
const maskColor = isDark ? '#000' : '#fff'; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="theme-button" |
||||||
|
type="button" |
||||||
|
aria-label="Toggle Dark Mode" |
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} |
||||||
|
> |
||||||
|
<div className="moon-or-sun" /> |
||||||
|
<div className="moon-mask" /> |
||||||
|
<style jsx>{` |
||||||
|
.theme-button { |
||||||
|
opacity: 0.5; |
||||||
|
position: relative; |
||||||
|
border-radius: 5px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
} |
||||||
|
.theme-button:hover { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.moon-or-sun { |
||||||
|
position: relative; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: ${isDark ? '4px' : '2px'} solid; |
||||||
|
border-color: ${color}; |
||||||
|
background: ${color}; |
||||||
|
transform: scale(${isDark ? 0.5 : 1}); |
||||||
|
transition: all 0.45s ease; |
||||||
|
overflow: ${isDark ? 'visible' : 'hidden'}; |
||||||
|
} |
||||||
|
.moon-or-sun::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
right: -9px; |
||||||
|
top: -9px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border: 2px solid; |
||||||
|
border-color: ${color}; |
||||||
|
border-radius: 50%; |
||||||
|
transform: translate(${isDark ? '14px, -14px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
.moon-or-sun::after { |
||||||
|
content: ''; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
margin: -4px 0 0 -4px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
box-shadow: 0 -23px 0 ${color}, 0 23px 0 ${color}, 23px 0 0 ${color}, |
||||||
|
-23px 0 0 ${color}, 15px 15px 0 ${color}, -15px 15px 0 ${color}, |
||||||
|
15px -15px 0 ${color}, -15px -15px 0 ${color}; |
||||||
|
transform: scale(${isDark ? 1 : 0}); |
||||||
|
transition: all 0.35s ease; |
||||||
|
} |
||||||
|
.moon-mask { |
||||||
|
position: absolute; |
||||||
|
right: 4px; |
||||||
|
top: 4px; |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 0; |
||||||
|
background: ${maskColor}; |
||||||
|
transform: translate(${isDark ? '4px, -4px' : '0, 0'}); |
||||||
|
opacity: ${isDark ? 0 : 1}; |
||||||
|
transition: transform 0.45s ease; |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ThemeSwitch; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { ThemeProvider } from 'next-themes'; |
||||||
|
import type { AppProps } from 'next/app'; |
||||||
|
import React from 'react'; |
||||||
|
import { Provider } from 'react-redux'; |
||||||
|
import '../styles/globals.css'; |
||||||
|
import { store } from '../redux/store'; |
||||||
|
|
||||||
|
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => { |
||||||
|
return ( |
||||||
|
<ThemeProvider attribute="class" enableSystem={false} defaultTheme="light"> |
||||||
|
<Provider store={store}> |
||||||
|
<Component {...pageProps} /> |
||||||
|
</Provider> |
||||||
|
</ThemeProvider> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default MyApp; |
||||||
Loading…
Reference in new issue