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

Align close button height exactly with the hamburger icon, add transparency

Browse source 
Measured the hamburger icon's rendered vertical position at both
breakpoints and matched the close button's top offset to it precisely
(pixel-exact at 390px and 1280px viewports). Also adds alpha to the
overlay's background gradient so the blurred page content shows
through subtly instead of being fully opaque.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 17:58:25 +02:00
parent 17333f5988
commit 48e6bd0712
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -121,13 +121,13 @@ export default function Navbar() {
createPortal( createPortal(
<div <div
className="fixed inset-0 z-[100] overflow-y-auto text-left backdrop-blur-xl" className="fixed inset-0 z-[100] overflow-y-auto text-left backdrop-blur-xl"
style={{ background: 'linear-gradient(135deg, #f1f5f9 0%, #e3f0cf 50%, #f8fafc 100%)' }} style={{ background: 'linear-gradient(135deg, rgba(241,245,249,0.82) 0%, rgba(227,240,207,0.82) 50%, rgba(248,250,252,0.82) 100%)' }}
> >
<div className="relative mx-auto flex min-h-full max-w-6xl flex-col items-start justify-center gap-5 py-24 pl-6 pr-8 sm:pl-8"> <div className="relative mx-auto flex min-h-full max-w-6xl flex-col items-start justify-center gap-5 py-24 pl-6 pr-8 sm:pl-8">
<button <button
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
aria-label="Menü schließen" aria-label="Menü schließen"
className="absolute left-6 top-6 flex items-center gap-2 text-neutral-600 hover:text-brand-600 sm:left-8" className="absolute left-6 top-8 flex items-center gap-2 text-neutral-600 hover:text-brand-600 sm:left-8 sm:top-[65px]"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-6 w-6"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-6 w-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6 6 18" /> <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6 6 18" />