Added sidebar, z-index hell

8 months ago · 959ca48643
parent ed248a88e5
commit 959ca48643
8 changed files with 178 additions and 24 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -26,6 +26,9 @@ importers:
      react-dom:
        specifier: ^19.0.0
        version: 19.1.0(react@19.1.0)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@19.1.0)
      tailwind-merge:
        specifier: ^3.2.0
        version: 3.2.0
@ -48,14 +51,20 @@ importers:
      '@types/react-dom':
        specifier: ^19
        version: 19.1.2(@types/react@19.1.2)
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.3)
      eslint:
        specifier: ^9
        version: 9.24.0(jiti@2.4.2)
      eslint-config-next:
        specifier: 15.3.0
        version: 15.3.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)
+      postcss:
+        specifier: ^8.5.3
+        version: 8.5.3
      tailwindcss:
-        specifier: ^4
+        specifier: ^4.1.4
        version: 4.1.4
      typescript:
        specifier: ^5
@ -634,6 +643,13 @@ packages:
    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
    engines: {node: '>= 0.4'}

+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
  available-typed-arrays@1.0.7:
    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
    engines: {node: '>= 0.4'}
@ -659,6 +675,11 @@ packages:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}

+  browserslist@4.24.4:
+    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
  busboy@1.6.0:
    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
    engines: {node: '>=10.16.0'}
@ -775,6 +796,9 @@ packages:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}

+  electron-to-chromium@1.5.144:
+    resolution: {integrity: sha512-eJIaMRKeAzxfBSxtjYnoIAw/tdD6VIH6tHBZepZnAbE3Gyqqs5mGN87DvcldPUbVkIljTK8pY0CMcUljP64lfQ==}
+
  emoji-regex@9.2.2:
    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}

@ -814,6 +838,10 @@ packages:
    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
    engines: {node: '>= 0.4'}

+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
  escape-string-regexp@4.0.0:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}
@ -985,6 +1013,9 @@ packages:
    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
    engines: {node: '>= 0.4'}

+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}

@ -1367,6 +1398,13 @@ packages:
      sass:
        optional: true

+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
  object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
@ -1445,6 +1483,9 @@ packages:
    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
    engines: {node: '>= 0.4'}

+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
  postcss@8.4.31:
    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
    engines: {node: ^10 || ^12 || >=14}
@ -1472,6 +1513,11 @@ packages:
    peerDependencies:
      react: ^19.1.0

+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
  react-is@16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

@ -1708,6 +1754,12 @@ packages:
  unrs-resolver@1.5.0:
    resolution: {integrity: sha512-6aia3Oy7SEe0MuUGQm2nsyob0L2+g57w178K5SE/3pvSGAIp28BB2O921fKx424Ahc/gQ6v0DXFbhcpyhGZdOA==}

+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

@ -2266,6 +2318,16 @@ snapshots:

  async-function@1.0.0: {}

+  autoprefixer@10.4.21(postcss@8.5.3):
+    dependencies:
+      browserslist: 4.24.4
+      caniuse-lite: 1.0.30001714
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+
  available-typed-arrays@1.0.7:
    dependencies:
      possible-typed-array-names: 1.1.0
@ -2289,6 +2351,13 @@ snapshots:
    dependencies:
      fill-range: 7.1.1

+  browserslist@4.24.4:
+    dependencies:
+      caniuse-lite: 1.0.30001714
+      electron-to-chromium: 1.5.144
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.24.4)
+
  busboy@1.6.0:
    dependencies:
      streamsearch: 1.1.0
@ -2409,6 +2478,8 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.2.0

+  electron-to-chromium@1.5.144: {}
+
  emoji-regex@9.2.2: {}

  enhanced-resolve@5.18.1:
@ -2514,6 +2585,8 @@ snapshots:
      is-date-object: 1.1.0
      is-symbol: 1.1.1

+  escalade@3.2.0: {}
+
  escape-string-regexp@4.0.0: {}

  eslint-config-next@15.3.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3):
@ -2767,6 +2840,8 @@ snapshots:
    dependencies:
      is-callable: 1.2.7

+  fraction.js@4.3.7: {}
+
  function-bind@1.1.2: {}

  function.prototype.name@1.1.8:
@ -3140,6 +3215,10 @@ snapshots:
      - '@babel/core'
      - babel-plugin-macros

+  node-releases@2.0.19: {}
+
+  normalize-range@0.1.2: {}
+
  object-assign@4.1.1: {}

  object-inspect@1.13.4: {}
@ -3223,6 +3302,8 @@ snapshots:

  possible-typed-array-names@1.1.0: {}

+  postcss-value-parser@4.2.0: {}
+
  postcss@8.4.31:
    dependencies:
      nanoid: 3.3.11
@ -3252,6 +3333,10 @@ snapshots:
      react: 19.1.0
      scheduler: 0.26.0

+  react-icons@5.5.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
  react-is@16.13.1: {}

  react@19.1.0: {}
@ -3580,6 +3665,12 @@ snapshots:
      '@unrs/resolver-binding-win32-ia32-msvc': 1.5.0
      '@unrs/resolver-binding-win32-x64-msvc': 1.5.0

+  update-browserslist-db@1.1.3(browserslist@4.24.4):
+    dependencies:
+      browserslist: 4.24.4
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,5 +1,5 @@
 // Head metadata
-import type { Metadata } from "next";
+// import type { Metadata } from "next";

 // Fonts
 import { Work_Sans } from "next/font/google";
@ -33,17 +33,19 @@ export const vipnagorgialla = localFont({
 });

 import "./globals.css";
-import Header from "@/components/Header";
+import SidebarParent from "@/components/SidebarParent";
 import Footer from "@/components/Footer";

 const workSans = Work_Sans({
  subsets: ["latin"],
 });

-export const metadata: Metadata = {
-  title: "Tipilan",
-  description: "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.",
-};
+// Commented out for now, because it doesn't work having client components in the layout file
+
+// export const metadata: Metadata = {
+//   title: "Tipilan",
+//   description: "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.",
+// };

 export default function RootLayout({
  children,
@ -55,7 +57,7 @@ export default function RootLayout({
      <body
        className={`${workSans} antialiased bg-[#EEE5E5]`}
      >
-        <Header />
+        <SidebarParent />
        {children}
        <Footer />
      </body>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -6,7 +6,7 @@ export default function Home() {
  return (
    <div>
      {/* Title */}
-      <div className="border-b-3 border-[#007CAB] flex items-center justify-between">
+      <div className="border-b-3 border-[#007CAB] flex items-center justify-between pt-18">
        <img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64"/>
        <div className="pr-12 hidden 2xl:block">
          <h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F]`}>Auhinnafond</h3>
@ -15,13 +15,13 @@ export default function Home() {
      </div>
      {/* Grid of buttons */}
      <div className="grid grid-cols-1 xl:grid-cols-3 border-[#007CAB] min-h-[33vh]">
-        <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all">
+        <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
          <Link href="/timetable" prefetch={true}>
            <div className="cursor-pointer flex flex-row justify-between">
              <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
                Ajakava
              </h2>
-              <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+              <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
            </div>
          </Link>
          <div>
@ -32,12 +32,12 @@ export default function Home() {
          </div>
        </div>

-        <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all">
+        <div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
          <div className="cursor-pointer flex flex-row justify-between">
            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
              Turniirid
            </h2>
-            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
          </div>
          <div>
            <MdEmojiEvents size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
@ -52,7 +52,7 @@ export default function Home() {
            <h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
              Messiala
            </h2>
-            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+            <MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
          </div>
          <div>
            <MdWeekend size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
@ -63,21 +63,19 @@ export default function Home() {
        </div>
      </div>
      {/* Date */}
-      <div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition-all`}>
+      <div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition`}>
        <Link href="/tickets" prefetch={true}>
          <div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start">
            <h3 className="text-5xl text-[#2A2C3F] group-hover:text-black pb-8">
              Broneeri oma koht juba täna!
            </h3>
-            <MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
+            <MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
          </div>
        </Link>
        <h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]">
          24.-26. okt.
        </h2>
      </div>
-      {/* Footer */}
-
    </div>
  );
 }
--- a/src/app/tickets/page.tsx
+++ b/src/app/tickets/page.tsx
@ -3,7 +3,7 @@ import Link from 'next/link';

 export default function Tickets() {
    return (
-        <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12">
+        <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
            <h1 className={`text-6xl ${vipnagorgialla.className} font-bold text-[#2A2C3F] mt-8 pb-8`}>Piletid ja registreerimine</h1>
            <div className="flex justify-center items-center flex-row gap-16 flex-grow">
                <div className="bg-[#007CAB] -skew-x-5 text-white px-12 py-16 w-72 hover:scale-105 transition-all">   
--- a/src/app/timetable/page.tsx
+++ b/src/app/timetable/page.tsx
@ -2,9 +2,9 @@ import { vipnagorgialla } from "../layout";

 export default function Timetable() {
    return (
-        <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12">
+        <div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
            <h1 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mt-8 mb-4`}>Ajakava</h1>
-            <p className="text-xl  text-[#2A2C3F]">Ajakava on tegemisel.</p>
+            <p className="text-2xl text-[#2A2C3F]">Lisame ajakava lähiajal.</p>
        </div>
    );
 }
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -4,9 +4,9 @@ import { Menu } from "lucide-react";
 // Fonts
 import { vipnagorgialla } from "@/app/layout";

-const Header = () => (
-    <header className="h-16 flex items-center border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
-        <button>
+const Header = ({ toggleSidebar }: { toggleSidebar: () => void }) => (
+    <header className="h-16 flex items-center bg-[#EEE5E5] border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
+        <button onClick={toggleSidebar}>
            <Menu className="h-12 w-12 text-[#2A2C3F]" />
        </button>
        <p className={`text-3xl ${vipnagorgialla.className} font-bold italic`}>ENG</p>
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -0,0 +1,41 @@
+'use client';
+
+// Fonts
+import { vipnagorgialla } from '@/app/layout';
+
+// Use effect to handle route changes and close the sidebar if it's open
+// usePathName to listen to route changes in Next.js
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+const Sidebar = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => {
+    const pathname = usePathname();
+
+    useEffect(() => {
+        if (isOpen) {
+            toggleSidebar();
+        }
+    }, [pathname]);
+
+    return (
+        <>
+            <div
+                className="fixed inset-0 backdrop-blur mt-16 z-20"
+                style={{ display: isOpen ? 'block' : 'none' }}
+                onClick={toggleSidebar} // Close sidebar when clicking outside
+            ></div>
+            <div
+                className={`text-5xl ${vipnagorgialla.className} font-bold italic fixed flex items-center flex-col gap-8 pt-16 top-0 left-0 h-[99vh] mt-16 -skew-x-5 border-r-3 border-[#007CAB] w-128 bg-[#EEE5E5] text-[#2A2C3F] transition-transform transform z-20`}
+                style={{ transform: isOpen ? 'translateX(-10%) skewX(calc(5deg * -1)' : 'translateX(-150%) skewX(calc(5deg * -1)' }}
+            >
+                <Link href="/" prefetch={true} onClick={toggleSidebar}>Avaleht</Link>
+                <Link href="/timetable" prefetch={true} onClick={toggleSidebar}>Ajakava</Link>
+                <Link href="/" prefetch={true} onClick={toggleSidebar}>Turniirid</Link>
+                <Link href="/" prefetch={true} onClick={toggleSidebar}>Messiala</Link>
+            </div>
+        </>
+    );
+};
+
+export default Sidebar;
--- a/src/components/SidebarParent.tsx
+++ b/src/components/SidebarParent.tsx
@ -0,0 +1,22 @@
+'use client';
+
+import { useState } from "react";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+
+const SidebarParent = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleSidebar = () => setIsOpen(!isOpen);
+    
+    return (
+        <div className="fixed w-screen">
+            <Header toggleSidebar={toggleSidebar} />
+            <Sidebar isOpen={isOpen} toggleSidebar={toggleSidebar}/>
+        </div>
+    );
+};
+
+// This component is responsible for rendering the sidebar and header together. 
+// It manages the state of the sidebar (open/closed) and passes the necessary props to both the Header and Sidebar components.
+
+export default SidebarParent;