feat: new design for koodiklinikka.fi

Co-authored-by: Aarni Koskela <akx@iki.fi>
2026-03-16 11:04:34 +00:00 · 2024-05-30 15:25:21 +03:00
parent 2791108118
commit 33f35b4a5a
98 changed files with 2519 additions and 3843 deletions
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import Wrapper from './Wrapper';
+import { useEffect, useRef, useState } from 'react';
+
+export default function Nav() {
+  const [navOpen, setNavOpen] = useState(false);
+  const navRef = useRef<HTMLDivElement | null>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (navRef.current && !navRef.current.contains(event.target as Node)) {
+      setNavOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, []);
+
+  return (
+    <nav className="fixed left-0 top-0 z-50 h-32 w-full bg-gradient-to-b from-black/40 to-fuchsia-950/0">
+      <Wrapper>
+        <div className="relative flex items-center justify-between px-6 py-5 md:px-12">
+          <div className="shrink-0">
+            <Image src="/koodiklinikka.svg" alt="Koodiklinikka" width="179" height="34" className="w-40" priority />
+          </div>
+          <div ref={navRef}>
+            <button
+              type="button"
+              className="-mr-2 rounded bg-black/0 p-2 hover:bg-black/20 lg:hidden"
+              onMouseDown={() => setNavOpen(!navOpen)}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
+                stroke="currentColor"
+                className="size-6"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            </button>
+            <div
+              className={`${navOpen ? 'flex' : 'hidden'} text-shadow absolute right-6 top-16 flex-col gap-5 rounded-lg bg-black/80 p-5 text-xs uppercase tracking-widest text-pink-100 backdrop-blur-md lg:static lg:flex lg:flex-row lg:bg-transparent lg:backdrop-blur-none`}
+            >
+              <Link className="underline-offset-4 hover:underline" href="https://github.com/koodiklinikka">
+                GitHub
+              </Link>
+              <NavSeparator />
+              <Link className="underline-offset-4 hover:underline" href="https://koodiklinikka.slack.com">
+                Slack
+              </Link>
+              <NavSeparator />
+              <Link className="underline-offset-4 hover:underline" href="https://resources.koodiklinikka.fi">
+                Resources
+              </Link>
+              <NavSeparator />
+              <Link className="underline-offset-4 hover:underline" href="https://koodiklinikka.myspreadshop.fi/">
+                Shop
+              </Link>
+              <NavSeparator />
+              <Link
+                className="underline-offset-4 hover:underline"
+                href="https://github.com/koodiklinikka/code-of-conduct"
+              >
+                Code of Conduct
+              </Link>
+            </div>
+          </div>
+        </div>
+      </Wrapper>
+    </nav>
+  );
+}
+
+const NavSeparator = () => <div className="hidden opacity-20 lg:block">|</div>;