lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-03-23 21:34:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added sidebar, z-index hell

Browse Source
This commit is contained in:
Randel Mandre
2025-04-29 17:39:44 +03:00
parent ed248a88e5
commit 959ca48643
8 changed files with 178 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/layout.tsx
View File

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

18
src/app/page.tsx
View File

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

2
src/app/tickets/page.tsx
View File

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

4
src/app/timetable/page.tsx
View File

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

6
src/components/Header.tsx
View File

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

41
src/components/Sidebar.tsx Normal file
View File

@@ -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;

22
src/components/SidebarParent.tsx Normal file
View File

@@ -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;