ea6c1ef906
Match the overlay menu's close button: subtle translucent fill on brand green with a yellow icon. Drops the flat brand-on-brand buttons whose shadows didn't read on a green page.
1 line
7.5 KiB
JavaScript
1 line
7.5 KiB
JavaScript
import{$ as e,C as t,L as n,O as r,P as i,c as a,i as o,k as s,l as c,m as l,o as u,p as d,r as f,s as p,tt as m,u as h,x as g,y as _}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as v}from"./runtime-dom.esm-bundler-CDZvOKZN.js";import{t as y}from"./Logo-Iem0n9fv.js";import{t as b}from"./Icon-BaDkTwYL.js";import{t as x}from"./i18n-DuB4OiH1.js";import{t as S}from"./LanguageSwitcher-D_Yxx8cQ.js";import{r as C,t as w}from"./products-wp4PtA61.js";var ee={class:`flex items-center gap-10 min-w-0`},T={class:`hidden md:flex items-center gap-7`},E=[`href`,`onClick`],D={class:`hidden md:flex items-center gap-4`},O=[`aria-label`],k=[`aria-label`],A={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},j={key:0,class:`md:hidden fixed bottom-5 left-5 z-40`,style:{"padding-bottom":`env(safe-area-inset-bottom)`}},M=[`aria-label`],N={key:1,class:`md:hidden fixed bottom-5 right-5 z-40 flex items-center gap-3`,style:{"padding-bottom":`env(safe-area-inset-bottom)`}},P=[`aria-label`],F={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},I=[`aria-label`],L={key:0,class:`fixed inset-0 z-50 bg-brand text-cream flex flex-col font-sans`},R={class:`flex items-center px-6 pt-6 pb-4`,style:{"padding-top":`calc(env(safe-area-inset-top) + 1.5rem)`}},z={class:`flex-1 flex flex-col justify-center px-8 gap-3 overflow-y-auto`},te=[`href`,`onClick`],B={class:`px-6 pb-6 flex justify-center`},V={class:`px-6 py-6 border-t border-cream-line flex items-center gap-3`,style:{"padding-bottom":`calc(env(safe-area-inset-bottom) + 1.5rem)`}},H={class:`inline-flex items-center gap-3`},U={key:0,class:`min-w-[22px] h-[22px] px-2 rounded-full bg-brand text-accent text-[12px] font-bold flex items-center justify-center`},W=[`aria-label`],G=`bg-accent text-brand hover:bg-accent-soft`,K={__name:`Navbar`,props:{variant:{type:String,default:`paper`,validator:e=>[`brand`,`cream`,`paper`].includes(e)},layout:{type:String,default:`standard`,validator:e=>[`standard`,`floating`].includes(e)},items:{type:Array,default:()=>[{key:`nav.shop`,href:`#`},{key:`nav.applications`,href:`#`},{key:`nav.about`,href:`#`},{key:`nav.contact`,href:`#`}]},cartCount:{type:Number,default:0},floatOnMobile:{type:Boolean,default:!0},products:{type:Array,default:()=>w}},emits:[`cart`,`nav`,`select`],setup(w){let K=w,{t:q}=x(),J=i(!1),Y=i(!1),X={brand:{bar:`bg-brand text-cream border-cream-line`,link:`text-cream hover:text-accent`,logo:`text-cream`,searchTrigger:`border border-cream-line bg-cream-wash text-cream/80 hover:text-accent`},cream:{bar:`bg-cream text-brand border-line`,link:`text-brand hover:text-brand-hover`,logo:`text-brand`,searchTrigger:`border border-line-strong bg-paper text-muted hover:text-brand`},paper:{bar:`bg-paper text-ink border-line`,link:`text-ink hover:text-brand`,logo:`text-brand`,searchTrigger:`border border-line bg-paper text-muted hover:text-brand`}},Z=u(()=>X[K.variant]),Q=u(()=>K.layout===`floating`?`sticky top-4 md:top-6 z-30 mx-4 md:mx-6 rounded-lg border shadow-md`:`sticky top-0 z-30 border-b`),ne=u(()=>K.layout===`floating`?`px-6 md:pl-4 md:pr-8 py-3 md:py-3.5`:`px-6 md:px-8 lg:px-10 py-5`),re=u(()=>K.layout===`floating`?`w-9 md:w-16 h-auto`:`w-12 md:w-24 h-auto`);function $(e){return e.key?q(e.key):e.label}return r(J,e=>{typeof document>`u`||(document.documentElement.style.overflow=e?`hidden`:``)}),_(()=>{typeof document<`u`&&(document.documentElement.style.overflow=``)}),(r,i)=>(g(),h(`header`,{class:e([`font-sans`,Q.value,Z.value.bar])},[p(`div`,{class:e([ne.value,`flex items-center justify-between gap-6`])},[p(`div`,ee,[p(`a`,{href:`/`,class:e([`block shrink-0 py-1`,Z.value.logo]),"aria-label":`Kaiser Natron home`},[l(y,{class:e(re.value)},null,8,[`class`])],2),p(`nav`,T,[(g(!0),h(f,null,t(w.items,t=>(g(),h(`a`,{key:t.key||t.label,href:t.href||`#`,class:e([Z.value.link,`text-[14px] font-medium tracking-label transition-colors duration-base`]),onClick:e=>r.$emit(`nav`,t)},m($(t)),11,E))),128))])]),p(`div`,D,[p(`button`,{type:`button`,class:e([`inline-flex items-center gap-2 pl-3 pr-4 py-2 rounded-pill text-[13px] font-medium tracking-label transition-colors duration-base`,Z.value.searchTrigger]),"aria-label":n(q)(`search.open`),onClick:i[0]||=e=>Y.value=!0},[l(b,{name:`search`,size:16}),p(`span`,null,m(n(q)(`search.placeholder`)),1)],10,O),l(S,{tone:w.variant},null,8,[`tone`]),p(`button`,{type:`button`,class:e([G,`relative inline-flex items-center justify-center w-11 h-11 rounded-full transition-all duration-base ease-out hover:-translate-y-0.5`]),"aria-label":n(q)(`cart.open`),onClick:i[1]||=e=>r.$emit(`cart`)},[l(b,{name:`cart`,size:20}),w.cartCount>0?(g(),h(`span`,A,m(w.cartCount),1)):c(``,!0)],10,k)])],2),w.floatOnMobile?(g(),h(`div`,j,[p(`button`,{type:`button`,class:`w-14 h-14 rounded-full bg-cream-wash text-accent hover:bg-cream-wash-strong flex items-center justify-center transition-all duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`,"aria-label":n(q)(`search.open`),onClick:i[2]||=e=>Y.value=!0},[l(b,{name:`search`,size:22,"stroke-width":2})],8,M)])):c(``,!0),w.floatOnMobile?(g(),h(`div`,N,[p(`button`,{type:`button`,class:e([G,`relative w-14 h-14 rounded-full shadow-md flex items-center justify-center transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`]),"aria-label":n(q)(`cart.open`),onClick:i[3]||=e=>r.$emit(`cart`)},[l(b,{name:`cart`,size:22}),w.cartCount>0?(g(),h(`span`,F,m(w.cartCount),1)):c(``,!0)],10,P),p(`button`,{type:`button`,class:`w-14 h-14 rounded-full bg-cream-wash text-accent hover:bg-cream-wash-strong flex items-center justify-center transition-all duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`,"aria-label":n(q)(`menu.open`),onClick:i[4]||=e=>J.value=!0},[l(b,{name:`menu`,size:24,"stroke-width":2})],8,I)])):c(``,!0),(g(),a(o,{to:`body`},[l(v,{"enter-active-class":`transition duration-slow ease-out`,"enter-from-class":`opacity-0 translate-y-2`,"enter-to-class":`opacity-100 translate-y-0`,"leave-active-class":`transition duration-base ease-out`,"leave-from-class":`opacity-100 translate-y-0`,"leave-to-class":`opacity-0 translate-y-2`},{default:s(()=>[J.value?(g(),h(`div`,L,[p(`div`,R,[l(y,{class:`w-12 h-auto text-cream`})]),p(`nav`,z,[(g(!0),h(f,null,t(w.items,e=>(g(),h(`a`,{key:e.key||e.label,href:e.href||`#`,class:`font-serif font-normal text-[clamp(2.25rem,9vw,3.5rem)] tracking-tight leading-[1.05] text-cream hover:text-accent transition-colors duration-base`,onClick:t=>{J.value=!1,r.$emit(`nav`,e)}},m($(e)),9,te))),128))]),p(`div`,B,[l(S,{tone:`brand`})]),p(`div`,V,[p(`button`,{type:`button`,class:`flex-1 inline-flex items-center justify-between px-6 py-4 rounded-pill bg-accent text-brand font-semibold tracking-label hover:bg-accent-soft transition-colors`,onClick:i[5]||=e=>{J.value=!1,r.$emit(`cart`)}},[p(`span`,H,[l(b,{name:`cart`,size:20}),d(` `+m(n(q)(`cart.label`)),1)]),w.cartCount>0?(g(),h(`span`,U,m(w.cartCount),1)):c(``,!0)]),p(`button`,{type:`button`,class:`shrink-0 w-14 h-14 rounded-full bg-cream-wash text-cream hover:bg-cream-wash-strong transition-colors flex items-center justify-center`,"aria-label":n(q)(`menu.close`),onClick:i[6]||=e=>J.value=!1},[l(b,{name:`close`,size:20})],8,W)])])):c(``,!0)]),_:1})])),l(C,{modelValue:Y.value,"onUpdate:modelValue":i[7]||=e=>Y.value=e,products:w.products,tone:w.variant,onSelect:i[8]||=e=>r.$emit(`search`,e)},null,8,[`modelValue`,`products`,`tone`])],2))}};export{K as t}; |