joker

.history/components/Navigation_20220709224300.tsx

@@ -0,0 +1,96 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline'
+import { Transition } from "@headlessui/react";
+
+const navigation = [
+  { name: 'Главная', href: '/', current: true },
+  { name: 'Правила', href: '/posts/[slug]', as:'/posts/regulations', current: false },
+  { name: 'Регистрация', href: '/registration', current: false },
+  { name: 'Расписание', href: '/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);
+  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;

components/Navigation.tsx

@@ -12,14 +12,10 @@ const navigation = [
   { name: 'О нас', href: '/about', current: false },
 ]
 
-
-
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
-
-
 const Navigation = (): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   return (