oimwiodev/New-Optic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

Fit mobile nav on small screens

Browse Source
This commit is contained in:
oimwiodev
2026-05-16 22:49:16 +01:00
parent d93f862cba
commit e168a646a1
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/Navbar.tsx
View File

@@ -26,10 +26,10 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
} }
return ( return (
<header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6"> <header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 max-[374px]:px-2.5 sm:px-6">
<nav className="glass premium-glass mx-auto flex max-w-7xl items-center justify-between gap-2 rounded-full px-3 py-3 sm:px-5" aria-label="Main navigation"> <nav className="glass premium-glass mx-auto flex max-w-7xl items-center justify-between gap-2 rounded-full px-3 py-3 max-[374px]:px-2 max-[374px]:py-2.5 sm:px-5" aria-label="Main navigation">
<a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex items-center gap-3" aria-label="New Optic home"> <a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex items-center gap-3" aria-label="New Optic home">
<span className="relative grid size-10 place-items-center overflow-hidden rounded-full bg-white shadow-sm"> <span className="relative grid size-10 place-items-center overflow-hidden rounded-full bg-white shadow-sm max-[374px]:size-9">
<Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority /> <Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority />
</span> </span>
<span className="hidden text-sm font-semibold tracking-[-0.02em] xs:inline sm:inline">{business.name}</span> <span className="hidden text-sm font-semibold tracking-[-0.02em] xs:inline sm:inline">{business.name}</span>
@@ -48,9 +48,9 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
</PhysicsButton> </PhysicsButton>
</div> </div>
<div className="relative z-[3] flex items-center gap-1.5 sm:gap-2 md:hidden"> <div className="relative z-[3] flex items-center gap-1 max-[374px]:gap-0.5 sm:gap-2 md:hidden">
<LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="bg-white/80 backdrop-blur-none" buttonClassName="px-2 sm:px-3" /> <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="bg-white/80 backdrop-blur-none max-[374px]:p-0.5" buttonClassName="px-2 max-[374px]:px-1.5 max-[374px]:py-1.5 sm:px-3" />
<PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} px-2.5 py-2 text-[11px] max-[374px]:px-2 max-[374px]:text-[10px] sm:px-5 sm:py-2.5 sm:text-sm`}> <PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} px-2.5 py-2 text-[11px] max-[374px]:px-1.5 max-[374px]:py-1.5 max-[374px]:text-[9px] sm:px-5 sm:py-2.5 sm:text-sm`}>
{t.nav.cta} {t.nav.cta}
</PhysicsButton> </PhysicsButton>
<motion.button <motion.button
@@ -58,7 +58,7 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
onClick={() => setOpen((value) => !value)} onClick={() => setOpen((value) => !value)}
whileTap={{ scale: 0.94 }} whileTap={{ scale: 0.94 }}
transition={{ duration: 0.08 }} transition={{ duration: 0.08 }}
className="grid size-11 place-items-center rounded-full bg-white/70 text-ink outline-none transition focus-visible:ring-2 focus-visible:ring-optical/45 focus-visible:ring-offset-2" className="grid size-11 place-items-center rounded-full bg-white/70 text-ink outline-none transition max-[374px]:size-9 focus-visible:ring-2 focus-visible:ring-optical/45 focus-visible:ring-offset-2"
aria-label={t.nav.menu} aria-label={t.nav.menu}
aria-expanded={open} aria-expanded={open}
> >