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