Added sidebar, z-index hell

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

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 = {
+// Commented out for now, because it doesn't work having client components in the layout file
-  title: "Tipilan",
+
-  description: "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.",
+// 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>

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>
   );
 }

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">   

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>
     );
 }

src/components/Header.tsx

@@ -4,9 +4,9 @@ import { Menu } from "lucide-react";
 // Fonts
 import { vipnagorgialla } from "@/app/layout";
 
-const Header = () => (
+const Header = ({ toggleSidebar }: { toggleSidebar: () => void }) => (
-    <header className="h-16 flex items-center border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
+    <header className="h-16 flex items-center bg-[#EEE5E5] border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
-        <button>
+        <button onClick={toggleSidebar}>
             <Menu className="h-12 w-12 text-[#2A2C3F]" />
         </button>
         <p className={`text-3xl ${vipnagorgialla.className} font-bold italic`}>ENG</p>

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;

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;