mirror of
https://github.com/Lapikud/tipilan.git
synced 2026-05-08 18:08:32 +00:00
Add navbar
This commit is contained in:
Rene Arumetsa
@@ -1,110 +0,0 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import ReactMarkdown, { Components } from "react-markdown";
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
import SectionDivider from "@/components/SectionDivider";
|
||||
import { getTranslations, setRequestLocale } from "next-intl/server";
|
||||
import { loadRulesBun } from "@/lib/loadRules";
|
||||
|
||||
// Map of valid slugs to their translation keys
|
||||
const rulesMap = {
|
||||
lol: {
|
||||
titleKey: "rules.lolRules",
|
||||
},
|
||||
cs2: {
|
||||
titleKey: "rules.cs2Rules",
|
||||
},
|
||||
} as const;
|
||||
|
||||
type RuleSlug = keyof typeof rulesMap;
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string; locale: string }>;
|
||||
}
|
||||
|
||||
async function getRuleContent(slug: string, locale: string) {
|
||||
if (!Object.keys(rulesMap).includes(slug)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const ruleConfig = rulesMap[slug as RuleSlug];
|
||||
|
||||
try {
|
||||
const content = await loadRulesBun(
|
||||
slug as "cs2" | "lol",
|
||||
locale as "et" | "en",
|
||||
);
|
||||
return {
|
||||
content,
|
||||
titleKey: ruleConfig.titleKey,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`Error reading rule file for slug ${slug} in locale ${locale}:`,
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function RulePage({ params }: PageProps) {
|
||||
const { slug, locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
const t = await getTranslations({ locale });
|
||||
const ruleData = await getRuleContent(slug, locale);
|
||||
|
||||
if (!ruleData) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold uppercase italic text-[#2A2C3F] dark:text-[#EEE5E5]`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
|
||||
<h1 className={`${headingStyle} mt-8 md:mt-16 mb-4`}>
|
||||
{t(ruleData.titleKey)}
|
||||
</h1>
|
||||
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none">
|
||||
<ReactMarkdown
|
||||
components={
|
||||
{
|
||||
h1: (props) => (
|
||||
<h1 className="text-3xl md:text-4xl font-bold my-4">
|
||||
{props.children}
|
||||
</h1>
|
||||
),
|
||||
h2: (props) => (
|
||||
<h2 className="text-2xl md:text-3xl font-semibold my-3">
|
||||
{props.children}
|
||||
</h2>
|
||||
),
|
||||
ol: (props) => (
|
||||
<ol className="list-none ml-6 md:text-xl">
|
||||
{props.children}
|
||||
</ol>
|
||||
),
|
||||
ul: (props) => (
|
||||
<ul className="list-disc ml-6 md:text-xl">
|
||||
{props.children}
|
||||
</ul>
|
||||
),
|
||||
p: (props) => <p className="md:text-xl">{props.children}</p>,
|
||||
} as Components
|
||||
}
|
||||
>
|
||||
{ruleData.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDivider />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return Object.keys(rulesMap).map((slug) => ({
|
||||
slug,
|
||||
}));
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
import SectionDivider from "@/components/SectionDivider";
|
||||
import { getTranslations, setRequestLocale } from "next-intl/server";
|
||||
import NextLink from "next/link";
|
||||
|
||||
export default async function RulesMenu({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
|
||||
setRequestLocale(locale);
|
||||
|
||||
const t = await getTranslations({ locale });
|
||||
|
||||
const headingStyle = `text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] uppercase`;
|
||||
|
||||
const boxStyle = `-skew-x-2 md:-skew-x-5 text-white md:px-12 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]`;
|
||||
|
||||
const boxTextStyle = `text-2xl md:text-3xl ${vipnagorgialla.className} font-bold uppercase text-[#EEE5E5] pb-2 break-normal whitespace-pre-line`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col md:m-16">
|
||||
<h1 className={`${headingStyle} ml-3 mt-24 md:ml-0 md:mt-16 mb-4 px-4`}>
|
||||
{t("rules.title")}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap flex-row lg:mt-16 justify-center lg:items-start gap-12 flex-grow mb-8">
|
||||
<NextLink href="/kodukord">
|
||||
<div className={`${boxStyle} bg-[#007CAB] py-20 px-8`}>
|
||||
<h2 className={`${boxTextStyle}`}>{t("rules.houseRules")}</h2>
|
||||
</div>
|
||||
</NextLink>
|
||||
|
||||
<NextLink href="/reeglid/cs2">
|
||||
<div className={`${boxStyle} bg-[#1F5673] py-20 px-8`}>
|
||||
<h2 className={`${boxTextStyle}`}>{t("rules.cs2Rules")}</h2>
|
||||
</div>
|
||||
</NextLink>
|
||||
|
||||
<NextLink href="reeglid/lol">
|
||||
<div className={`${boxStyle} bg-[#007CAB] py-20 px-8`}>
|
||||
<h2 className={`${boxTextStyle}`}>{t("rules.lolRules")}</h2>
|
||||
</div>
|
||||
</NextLink>
|
||||
|
||||
{/* Minitourn. link coming soon*/}
|
||||
{/*<Link href="">*/}
|
||||
{/* ajutine div. kui asendate lingiga, siis saab selle ära võtta */}
|
||||
<div className="cursor-not-allowed">
|
||||
<div
|
||||
className={`${boxStyle} bg-[#1F5673] py-16 px-8 opacity-50 pointer-events-none`}
|
||||
>
|
||||
<h2 className={`${boxTextStyle}`}>{t("rules.miniRules")}</h2>
|
||||
</div>
|
||||
</div>
|
||||
{/*</Link>*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionDivider />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
|
||||
// Icons
|
||||
import {
|
||||
MdClose,
|
||||
MdMenu,
|
||||
MdSunny,
|
||||
MdModeNight,
|
||||
@@ -23,32 +26,63 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
// Fonts
|
||||
// import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
interface NavItem {
|
||||
href:
|
||||
| "/"
|
||||
| "/ajakava"
|
||||
| "/haldus"
|
||||
| "/kodukord"
|
||||
| "/messiala"
|
||||
| "/piletid"
|
||||
| "/striim"
|
||||
| "/turniirid";
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface HeaderProps {
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
themeLabels: {
|
||||
light: string;
|
||||
dark: string;
|
||||
system: string;
|
||||
};
|
||||
navItems: NavItem[];
|
||||
}
|
||||
|
||||
const Header = ({ isOpen, onToggle, themeLabels }: HeaderProps) => {
|
||||
const Header = ({ themeLabels, navItems }: HeaderProps) => {
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
// Filter nav items for the horizontal bar (exclude kodukord)
|
||||
const mainNavItems = navItems.filter(
|
||||
(item) => item.href !== "/kodukord"
|
||||
);
|
||||
|
||||
return (
|
||||
<header className="px-8 py-2 md:px-12 flex items-center bg-[#EEE5E5] dark:bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between text-[#2A2C3F] dark:text-[#EEE5E5]">
|
||||
<button onClick={onToggle}>
|
||||
{isOpen ? (
|
||||
<MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
|
||||
) : (
|
||||
<MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<header className="px-4 py-2 md:px-8 flex items-center bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<Image
|
||||
src="/tipilan-icon-white.svg"
|
||||
alt="TipiLAN"
|
||||
width={49}
|
||||
height={40}
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Right side - Navigation + controls */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-3">
|
||||
{mainNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`${vipnagorgialla.className} font-bold italic text-lg uppercase px-4 py-1.5 border-2 border-[#00A3E0] text-[#EEE5E5] hover:bg-[#00A3E0]/20 transition`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<LanguageSwitcher />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -57,8 +91,8 @@ const Header = ({ isOpen, onToggle, themeLabels }: HeaderProps) => {
|
||||
size="icon"
|
||||
className="size-10 cursor-pointer"
|
||||
>
|
||||
<MdSunny className="scale-135 text-[#2A2C3F] dark:hidden" />
|
||||
<MdModeNight className="scale-135 dark:text-[#EEE5E5] not-dark:hidden" />
|
||||
<MdSunny className="scale-135 text-[#EEE5E5] dark:hidden" />
|
||||
<MdModeNight className="scale-135 text-[#EEE5E5] not-dark:hidden" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
@@ -93,6 +127,32 @@ const Header = ({ isOpen, onToggle, themeLabels }: HeaderProps) => {
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden size-10 cursor-pointer"
|
||||
>
|
||||
<MdMenu className="h-8 w-8 text-[#EEE5E5]" />
|
||||
<span className="sr-only">Menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48 translate-y-4">
|
||||
{navItems.map((item) => (
|
||||
<DropdownMenuItem key={item.href} asChild>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`${vipnagorgialla.className} font-bold italic uppercase text-lg`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { usePathname } from "@/i18n/routing";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
import Header from "./Header";
|
||||
|
||||
interface NavItem {
|
||||
@@ -14,7 +10,6 @@ interface NavItem {
|
||||
| "/kodukord"
|
||||
| "/messiala"
|
||||
| "/piletid"
|
||||
| "/reeglid"
|
||||
| "/striim"
|
||||
| "/turniirid";
|
||||
label: string;
|
||||
@@ -33,52 +28,7 @@ export default function SidebarLayoutClient({
|
||||
themeLabels,
|
||||
navItems,
|
||||
}: SidebarLayoutClientProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const toggleSidebar = () => setIsOpen(!isOpen);
|
||||
|
||||
// Close sidebar when route changes
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
isOpen={isOpen}
|
||||
onToggle={toggleSidebar}
|
||||
themeLabels={themeLabels}
|
||||
/>
|
||||
|
||||
{/* Sidebar */}
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 backdrop-blur mt-16 z-20"
|
||||
style={{ display: isOpen ? "block" : "none" }}
|
||||
onClick={() => setIsOpen(false)}
|
||||
></div>
|
||||
<div
|
||||
className={`text-3xl md:text-4xl ${vipnagorgialla.className} font-bold break-all italic uppercase fixed flex items-start xs:pl-25 pl-20 sm:pl-20 md:pl-24 flex-col gap-8 pt-16 top-0 left-0 h-[99vh] mt-16 -skew-x-5 border-r-3 border-[#1F5673] w-screen sm:w-96 md:w-128 bg-[#EEE5E5] dark:bg-[#0E0F19] text-[#2A2C3F] dark:text-[#EEE5E5] transition-transform transform z-20`}
|
||||
style={{
|
||||
transform: isOpen
|
||||
? "translateX(-13%) skewX(calc(5deg * -1)"
|
||||
: "translateX(-150%) skewX(calc(5deg * -1)",
|
||||
}}
|
||||
>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="hover:text-[#00A3E0] md:hover:translate-x-2 transition duration-150"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
<Header themeLabels={themeLabels} navItems={navItems} />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -19,7 +19,6 @@ export default async function SidebarLayoutServer() {
|
||||
{ href: "/ajakava" as const, label: navT("schedule") },
|
||||
{ href: "/turniirid" as const, label: navT("tournaments") },
|
||||
{ href: "/kodukord" as const, label: navT("houserules") },
|
||||
{ href: "/reeglid" as const, label: navT("rules") },
|
||||
];
|
||||
|
||||
return <SidebarLayoutClient themeLabels={themeLabels} navItems={navItems} />;
|
||||
|
||||
Reference in New Issue
Block a user