feat: redesign Header and Footer to match premium UI
This commit is contained in:
MichalC
@@ -4,7 +4,7 @@ import Link from "next/link";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher";
|
||||
import { LanguageSwitcher } from "../LanguageSwitcher";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Menu, X, MessageCircle } from "lucide-react";
|
||||
import { i18n } from '../../i18n.config';
|
||||
import { LocalizedLink } from '../LocalizedLink';
|
||||
@@ -12,97 +12,118 @@ import { LocalizedLink } from '../LocalizedLink';
|
||||
export function Header({ navItems = [] }: { navItems?: any[] }) {
|
||||
const pathname = usePathname();
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 10);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Zabezpieczenie przed błędem, gdy pathname jest puste podczas SSR
|
||||
const currentLocaleCode = (pathname?.split('/').filter(Boolean)[0]) || i18n.defaultLocale;
|
||||
const currentLocale = i18n.locales.find(l => l.code === currentLocaleCode) || i18n.locales[0];
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-40 bg-background/80 backdrop-blur-md border-b border-border">
|
||||
<div className="container-premium h-24 flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href={`/${currentLocale.code}`} className="group flex items-center gap-3 z-50 relative">
|
||||
<div className="w-10 h-10 rounded bg-[var(--accent-color)] text-white flex items-center justify-center font-heading font-bold text-xl group-hover:bg-[var(--accent-hover-color)] transition-colors shadow-sm">
|
||||
JK
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-heading font-bold text-lg leading-tight tracking-tight text-foreground">
|
||||
Finanz- & Lohnbuchhaltung
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-widest font-medium">
|
||||
Dipl.-Ing. Janusz Kędzierski
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<>
|
||||
<header
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled
|
||||
? "bg-background/90 backdrop-blur-md shadow-sm border-b border-border py-4"
|
||||
: "bg-transparent py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container-premium flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href={`/${currentLocale.code}`} className="group flex items-center gap-3 z-50">
|
||||
<div className="w-10 h-10 rounded bg-accent text-white flex items-center justify-center font-heading font-bold text-xl group-hover:bg-accent-hover transition-colors shadow-sm">
|
||||
JK
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-heading font-bold text-lg leading-tight tracking-tight text-foreground">
|
||||
Finanz- & Lohnbuchhaltung
|
||||
</span>
|
||||
<span className="text-xs text-foreground/60 uppercase tracking-widest font-medium">
|
||||
Dipl.-Ing. Janusz Kędzierski
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-8 absolute left-1/2 -translate-x-1/2">
|
||||
{navItems.map((page, index) => (
|
||||
<LocalizedLink
|
||||
key={index}
|
||||
page={page}
|
||||
currentLocaleCode={currentLocale.code}
|
||||
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
/>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Right Actions & Hamburger */}
|
||||
<div className="flex items-center gap-3 z-50 relative">
|
||||
<div className="hidden sm:flex items-center gap-3 mr-2">
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 hover:bg-green-600 text-white transition-colors"
|
||||
aria-label="WhatsApp"
|
||||
>
|
||||
<MessageCircle size={20} />
|
||||
</Link>
|
||||
<div className="w-px h-6 bg-border" />
|
||||
</div>
|
||||
|
||||
<ThemeSwitcher />
|
||||
<LanguageSwitcher />
|
||||
|
||||
<button
|
||||
className="lg:hidden w-10 h-10 flex items-center justify-center text-foreground rounded-full hover:bg-accent transition-colors ml-2"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="lg:hidden absolute top-24 left-0 right-0 bg-background border-b border-border p-6 shadow-xl flex flex-col gap-6 animate-in fade-in slide-in-from-top-4 duration-200">
|
||||
<nav className="flex flex-col gap-4">
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden xl:flex items-center gap-10">
|
||||
{navItems.map((page, index) => (
|
||||
<LocalizedLink
|
||||
key={index}
|
||||
page={page}
|
||||
currentLocaleCode={currentLocale.code}
|
||||
className="text-lg font-medium text-foreground py-2 border-b border-border/50"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="text-sm font-medium text-foreground/80 hover:text-accent transition-colors"
|
||||
/>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center justify-center sm:hidden mt-4 pt-4 border-t border-border/50">
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-full transition-colors w-full justify-center"
|
||||
{/* Right Actions & Hamburger */}
|
||||
<div className="flex items-center gap-4 z-50">
|
||||
<div className="hidden sm:flex items-center gap-4">
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-5 py-2.5 rounded-full bg-green-500 hover:bg-green-600 text-white transition-colors font-medium text-sm shadow-sm"
|
||||
>
|
||||
<MessageCircle size={18} />
|
||||
<span className="hidden lg:inline">WhatsApp</span>
|
||||
</Link>
|
||||
<div className="w-px h-6 bg-border mx-2 hidden xl:block" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<ThemeSwitcher />
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="xl:hidden w-11 h-11 flex items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<MessageCircle size={20} />
|
||||
<span className="font-medium">Napisz na WhatsApp</span>
|
||||
</Link>
|
||||
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
</header>
|
||||
|
||||
{/* Mobile Fullscreen Navigation */}
|
||||
<div
|
||||
className={`fixed inset-0 z-40 bg-background/95 backdrop-blur-xl transition-all duration-300 xl:hidden flex flex-col justify-center items-center ${
|
||||
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<nav className="flex flex-col gap-8 text-center w-full px-6">
|
||||
{navItems.map((page, index) => (
|
||||
<LocalizedLink
|
||||
key={index}
|
||||
page={page}
|
||||
currentLocaleCode={currentLocale.code}
|
||||
className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="absolute bottom-12 left-0 right-0 px-6 sm:hidden flex flex-col items-center">
|
||||
<div className="w-full h-px bg-border/50 mb-8 max-w-xs" />
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-full transition-colors w-full max-w-xs shadow-lg"
|
||||
>
|
||||
<MessageCircle size={24} />
|
||||
<span className="font-bold text-lg">WhatsApp</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user