fixing navigation

This commit is contained in:
AI Assistant
2026-08-10 23:51:02 +02:00
parent 7632af66b9
commit 2be143af0f
2 changed files with 35 additions and 62 deletions
+34 -61
View File
@@ -85,44 +85,6 @@ export function Header() {
return (
<>
{/* ----------------- DESKTOP: TOP BAR ----------------- */}
<div className="hidden lg:block bg-muted py-2 border-b border-border/50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
{/* Top Bar Left: Logo */}
<Link href="/" className="shrink-0 flex items-center gap-3">
<span className="text-2xl font-bold font-heading text-primary">
{companyDetails.shortName}
<span className="text-accent">.</span>
</span>
<span className="text-xs text-muted-foreground font-medium border-l border-border pl-3">
Klimatyzacja na Dolnym Śląsku
</span>
</Link>
{/* Top Bar Right: Phone & Icons */}
<div className="flex items-center gap-6">
<a
href={`tel:${companyDetails.phoneRaw}`}
className="flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors whitespace-nowrap"
>
<Phone className="size-4 text-accent" />
<span>{companyDetails.phone}</span>
</a>
<div className="flex items-center gap-1">
<Link href="/koszyk" className="p-2 text-primary hover:text-accent hover:bg-background rounded-lg transition-colors relative outline-none" aria-label="Koszyk">
<ShoppingBag className="size-5" />
{cartCount > 0 && (
<span className="absolute top-0 right-0 bg-accent text-white text-[10px] font-bold size-4 rounded-full flex items-center justify-center translate-x-0.5 -translate-y-0.5">
{cartCount}
</span>
)}
</Link>
</div>
</div>
</div>
</div>
{/* ----------------- DESKTOP: NAV BAR (STICKY) ----------------- */}
<header
className={cn(
@@ -130,18 +92,18 @@ export function Header() {
isScrolled ? "shadow-md py-2" : "py-4"
)}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
{/* Main Navigation */}
<nav className="flex items-center gap-8">
{isScrolled && (
<Link href="/" className="shrink-0 flex items-center mr-2">
<span className="text-xl font-bold font-heading text-primary">
{companyDetails.shortName}
<span className="text-accent">.</span>
</span>
</Link>
)}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-4">
{/* Left: Logo */}
<Link href="/" className="shrink-0 flex items-center gap-3">
<span className="text-2xl font-bold font-heading text-primary">
{companyDetails.shortName}
<span className="text-accent">.</span>
</span>
</Link>
{/* Middle: Main Navigation */}
<nav className="flex items-center gap-6">
<NavDropdown
label="Klimatyzacja"
triggerHref="/klimatyzacja"
@@ -176,12 +138,6 @@ export function Header() {
>
Blog
</Link>
{/* <Link
href="/o-nas"
className="text-sm font-medium text-primary hover:text-accent transition-colors"
>
O nas
</Link> */}
<Link
href="/kontakt"
className="text-sm font-medium text-primary hover:text-accent transition-colors"
@@ -190,13 +146,30 @@ export function Header() {
</Link>
</nav>
{/* CTA Button */}
<div className="hidden lg:flex items-center gap-3">
<Link href="/kontakt" className={buttonClasses({ variant: 'primary', size: 'sm' })}>
{/* Right: Phone, Cart, CTA */}
<div className="flex items-center gap-5">
<a
href={`tel:${companyDetails.phoneRaw}`}
className="hidden xl:flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors whitespace-nowrap"
>
<Phone className="size-4 text-accent" />
<span>{companyDetails.phone}</span>
</a>
Darmowa wycena
</Link>
<div className="flex items-center gap-1">
<Link href="/koszyk" className="p-2 text-primary hover:text-accent hover:bg-muted rounded-lg transition-colors relative outline-none" aria-label="Koszyk">
<ShoppingBag className="size-5" />
{cartCount > 0 && (
<span className="absolute top-0 right-0 bg-accent text-white text-[10px] font-bold size-4 rounded-full flex items-center justify-center translate-x-0.5 -translate-y-0.5">
{cartCount}
</span>
)}
</Link>
</div>
<Link href="/kontakt" className={buttonClasses({ variant: 'primary', size: 'sm' })}>
Darmowa wycena
</Link>
</div>
</div>
</header>