mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat(ui): add scroll-triggered shine to header and fix button hover overlay z-index

Browse Source 
Former-commit-id: c374d2fb1d0db12d813bb75aea765936f348208b
This commit is contained in:
Marc Mintel
2026-05-07 15:49:20 +02:00
parent f308445f2e
commit 990dabf210
233 changed files with 496 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/layout/LanguageSwitcher.tsx
View File

@@ -2,6 +2,7 @@
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
interface LanguageSwitcherProps {
mobile?: boolean;
@@ -29,16 +30,18 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
<Link
key={loc.code}
href={getSwitchedUrl(loc.code)}
className={`flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
currentLocale === loc.code
? 'bg-primary/10 text-primary border border-primary/20'
: 'text-text-secondary hover:bg-neutral-50 border border-transparent'
}`}
>
<span className="text-2xl" aria-hidden="true">{loc.flag}</span>
<span>{loc.fullLabel}</span>
<HoverShineOverlay shineColor="via-primary/5" />
<span className="relative z-10 text-2xl" aria-hidden="true">{loc.flag}</span>
<span className="relative z-10">{loc.fullLabel}</span>
{currentLocale === loc.code && (
<svg className="w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
<svg className="relative z-10 w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
)}
@@ -54,7 +57,9 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
: 'bg-white/10 backdrop-blur-sm border-white/10';
return (
<div className={`flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
<div className={`group relative overflow-hidden flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
<HoverShineOverlay shineColor={isSolidMode ? "via-primary/10" : "via-white/20"} />
{locales.map((loc) => {
const isActive = currentLocale === loc.code;
@@ -71,7 +76,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
<Link
key={loc.code}
href={getSwitchedUrl(loc.code)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
aria-label={`Switch to ${loc.fullLabel}`}
>
<span className="text-sm" aria-hidden="true">{loc.flag}</span>