michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep WhatsApp CTA visible in mobile Header

Browse Source
This commit is contained in:
MichalC
2026-08-31 23:19:32 +02:00
parent 93c98e1c42
commit 1c3c9ea7b1
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/index.tsx
+13 -7
View File
@@ -64,26 +64,26 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
{/* Right Actions & Hamburger */} {/* Right Actions & Hamburger */}
<div className="flex items-center gap-4 z-50"> <div className="flex items-center gap-4 z-50">
<div className="hidden sm:flex items-center gap-4"> <div className="flex items-center gap-2 sm:gap-4">
<Link <Link
href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'} href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" className="flex items-center gap-2 px-3 py-2 sm:px-5 sm: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} /> <MessageCircle size={18} />
<span className="hidden lg:inline">WhatsApp</span> <span className="hidden sm:inline">WhatsApp</span>
</Link> </Link>
<div className="w-px h-6 bg-border mx-2 hidden xl:block" /> <div className="w-px h-6 bg-border mx-1 sm:mx-2 hidden xl:block" />
</div> </div>
<div className="flex items-center gap-2"> <div className="hidden sm:flex items-center gap-2">
<ThemeSwitcher /> <ThemeSwitcher />
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>
<button <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" className="xl:hidden w-11 h-11 flex shrink-0 items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu" aria-label="Toggle menu"
> >
@@ -111,8 +111,14 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
))} ))}
</nav> </nav>
<div className="absolute bottom-12 left-0 right-0 px-6 sm:hidden flex flex-col items-center"> <div className="absolute bottom-12 left-0 right-0 px-6 flex flex-col items-center">
<div className="w-full h-px bg-border/50 mb-8 max-w-xs" /> <div className="w-full h-px bg-border/50 mb-8 max-w-xs" />
<div className="flex items-center gap-4 mb-6 sm:hidden">
<ThemeSwitcher />
<LanguageSwitcher />
</div>
<Link <Link
href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'} href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'}
target="_blank" target="_blank"