63fca6b5ad
Fallback to vanillaJS due to React taking a significant amount of rendering time when we wanted to only update two classes on the navigation bar. In addition to that, turns out Firefox has a decade-old bug related to history.replaceState that causes it to leak memory. This is a known issue and it's not going to be fixed. Our solution is to just get rid of the history.replaceState and not update the URL when you're scrolling. Tough luck, but hey, not gonna fix a decade old bug for a simple throw-away website.
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
|
|
import type { Sections, translations } from "@/i18n/translations"
|
|
import { Menu } from "lucide-react"
|
|
import { LanguageSelector } from "./ui/language-selector"
|
|
|
|
export function MobileNav({
|
|
t,
|
|
linksOrder,
|
|
}: {
|
|
t: typeof translations.pl
|
|
linksOrder: Array<Sections>
|
|
}) {
|
|
return (
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="md:hidden">
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">{t.mobileNav.toggleMenu}</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[80vw] sm:w-[385px]">
|
|
<SheetHeader>
|
|
<SheetTitle>{t.mobileNav.menu}</SheetTitle>
|
|
</SheetHeader>
|
|
<nav className="flex flex-col gap-4 mt-8">
|
|
{linksOrder.map((value) => (
|
|
<a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors">
|
|
{t.nav[value]}
|
|
</a>
|
|
))}
|
|
<LanguageSelector />
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|
|
|