infra/site
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: beautify nav

Browse source
This commit is contained in:
Dariusz Niemczyk 2025-01-29 21:02:12 +01:00
parent 3e11459bbb
commit 3fb06c523d
No known key found for this signature in database
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/mobile-nav.tsx
View file

@ -2,15 +2,18 @@
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import type { translations } from "@/i18n/translations" import type { Sections, translations } from "@/i18n/translations"
import { cn } from "@/lib/utils"
import { Menu } from "lucide-react" import { Menu } from "lucide-react"
export function MobileNav({ export function MobileNav({
t, t,
linksOrder, linksOrder,
activeSection
}: { }: {
t: typeof translations.pl t: typeof translations.pl
linksOrder: Array<keyof (typeof translations.pl)["nav"]> linksOrder: Array<Sections>
activeSection: Sections
}) { }) {
return ( return (
<Sheet> <Sheet>
@ -26,7 +29,9 @@ export function MobileNav({
</SheetHeader> </SheetHeader>
<nav className="flex flex-col gap-4 mt-8"> <nav className="flex flex-col gap-4 mt-8">
{linksOrder.map((value) => ( {linksOrder.map((value) => (
<a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors"> <a key={value} href={`#${value}`} className={cn("text-lg hover:text-primary transition-colors", {
'text-primary': activeSection === value
})}>
{t.nav[value]} {t.nav[value]}
</a> </a>
))} ))}

10
src/components/nav.tsx
View file

@ -80,7 +80,7 @@ export function Nav({
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors"> <a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
CEBULACAMP {t.siteTitle}
</a> </a>
<div className="flex items-center"> <div className="flex items-center">
{/* Desktop Navigation */} {/* Desktop Navigation */}
@ -89,12 +89,14 @@ export function Nav({
<a <a
key={value} key={value}
href={`#${value}`} href={`#${value}`}
className={cn("text-sm hover:text-primary transition-colors relative group", { className={cn("text-sm md:text-md hover:text-primary transition-colors relative group", {
'text-primary': activeSection === value 'text-primary': activeSection === value
})} })}
> >
{t.nav[value]} {t.nav[value]}
<span className="absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform" /> <span className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform", {
'scale-x-100': activeSection === value
})} />
</a> </a>
))} ))}
</div> </div>
@ -111,7 +113,7 @@ export function Nav({
{/* Mobile Navigation */} {/* Mobile Navigation */}
<div className="md:hidden ml-2"> <div className="md:hidden ml-2">
<MobileNav t={t} linksOrder={linksOrder} /> <MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
</div> </div>
</div> </div>
</div> </div>