max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enlarge logo, move nav links back to the left, animate mobile menu close

Browse source 
Nav links move back to the left side of the header (theme toggle back
to the right), logo is bigger, and the mobile fullscreen menu now
animates items back out in reverse order when closing instead of just
disappearing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 17:38:20 +02:00
parent e234a2435d
commit b3c1f68581
1 changed files with 32 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
hifi-src/src/components/Navbar.jsx
View file

@ -11,26 +11,37 @@ const SHOP_URL = 'https://www.audio4cars.de/';
const digitsOnly = (value) => (value || '').replace(/[^\d+]/g, ''); const digitsOnly = (value) => (value || '').replace(/[^\d+]/g, '');
const ITEM_DELAY_MS = 70;
const FLY_DURATION_MS = 500;
export default function Navbar() { export default function Navbar() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [mounted, setMounted] = useState(false);
const [menuVisible, setMenuVisible] = useState(false); const [menuVisible, setMenuVisible] = useState(false);
const { user } = useAuth(); const { user } = useAuth();
const { phone, whatsapp } = useSiteSettings(); const { phone, whatsapp } = useSiteSettings();
const totalItems = whatsapp ? 8 : 7;
useEffect(() => { useEffect(() => {
if (!open) { if (open) {
setMenuVisible(false); setMounted(true);
return;
}
const id = requestAnimationFrame(() => setMenuVisible(true)); const id = requestAnimationFrame(() => setMenuVisible(true));
return () => cancelAnimationFrame(id); return () => cancelAnimationFrame(id);
}, [open]); }
setMenuVisible(false);
const closeDuration = FLY_DURATION_MS + (totalItems - 1) * ITEM_DELAY_MS;
const id = setTimeout(() => setMounted(false), closeDuration);
return () => clearTimeout(id);
}, [open, totalItems]);
const flyIn = () => `transition-all duration-500 ease-out ${menuVisible ? 'opacity-100' : 'opacity-0'}`; const flyIn = () => `transition-all duration-500 ease-out ${menuVisible ? 'opacity-100' : 'opacity-0'}`;
const flyInStyle = (index) => ({ const flyInStyle = (index) => {
transitionDelay: `${index * 70}ms`, const delayIndex = menuVisible ? index : totalItems - 1 - index;
return {
transitionDelay: `${delayIndex * ITEM_DELAY_MS}ms`,
transform: menuVisible ? 'translateY(0)' : 'translateY(-140px)', transform: menuVisible ? 'translateY(0)' : 'translateY(-140px)',
}); };
};
const AdminIcon = user && ( const AdminIcon = user && (
<Link <Link
@ -74,16 +85,7 @@ export default function Navbar() {
</div> </div>
<div className="mx-auto grid max-w-6xl grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 py-3 sm:px-6"> <div className="mx-auto grid max-w-6xl grid-cols-[1fr_auto_1fr] items-center gap-3 px-4 py-3 sm:px-6">
<div className="flex items-center justify-self-start gap-1"> <div className="flex items-center justify-self-start">
{AdminIcon}
<ThemeToggle />
</div>
<Link to="/" className="flex items-center justify-self-center rounded-lg px-2 py-1 dark:bg-white">
<img src={logo} alt="HifiPlanet" className="h-11 w-auto sm:h-14" />
</Link>
<div className="flex items-center justify-self-end">
<nav className="hidden items-center gap-6 text-sm font-medium text-neutral-600 dark:text-neutral-300 md:flex"> <nav className="hidden items-center gap-6 text-sm font-medium text-neutral-600 dark:text-neutral-300 md:flex">
<Link to="/fahrzeuge" className="hover:text-brand-500">Fahrzeuge</Link> <Link to="/fahrzeuge" className="hover:text-brand-500">Fahrzeuge</Link>
<Link to="/leistungen" className="hover:text-brand-500">Leistungen</Link> <Link to="/leistungen" className="hover:text-brand-500">Leistungen</Link>
@ -101,9 +103,18 @@ export default function Navbar() {
</svg> </svg>
</button> </button>
</div> </div>
<Link to="/" className="flex items-center justify-self-center rounded-lg px-2 py-1 dark:bg-white">
<img src={logo} alt="HifiPlanet" className="h-14 w-auto sm:h-16" />
</Link>
<div className="flex items-center justify-self-end gap-1">
{AdminIcon}
<ThemeToggle />
</div>
</div> </div>
{open && {mounted &&
createPortal( createPortal(
<div <div
className="fixed inset-0 z-[100] flex flex-col items-end justify-center gap-5 overflow-y-auto px-8 py-24 text-right backdrop-blur-xl md:hidden" className="fixed inset-0 z-[100] flex flex-col items-end justify-center gap-5 overflow-y-auto px-8 py-24 text-right backdrop-blur-xl md:hidden"