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 { 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"
export function MobileNav({
t,
linksOrder,
activeSection
}: {
t: typeof translations.pl
linksOrder: Array<keyof (typeof translations.pl)["nav"]>
linksOrder: Array<Sections>
activeSection: Sections
}) {
return (
<Sheet>
@ -26,7 +29,9 @@ export function MobileNav({
</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">
<a key={value} href={`#${value}`} className={cn("text-lg hover:text-primary transition-colors", {
'text-primary': activeSection === value
})}>
{t.nav[value]}
</a>
))}

10
src/components/nav.tsx
View file

@ -80,7 +80,7 @@ export function Nav({
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16">
<a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
CEBULACAMP
{t.siteTitle}
</a>
<div className="flex items-center">
{/* Desktop Navigation */}
@ -89,12 +89,14 @@ export function Nav({
<a
key={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
})}
>
{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>
))}
</div>
@ -111,7 +113,7 @@ export function Nav({
{/* Mobile Navigation */}
<div className="md:hidden ml-2">
<MobileNav t={t} linksOrder={linksOrder} />
<MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
</div>
</div>
</div>