1 line
6.7 KiB
JavaScript
1 line
6.7 KiB
JavaScript
import{A as e,B as t,C as n,G as r,T as i,c as a,i as o,j as s,l as c,lt as l,m as u,o as d,p as f,r as p,s as m,st as h,u as g,x as _}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as v}from"./runtime-dom.esm-bundler-CcSFQHoC.js";import{t as y}from"./Logo-FFBeOKwm.js";import{t as b}from"./Icon-BCRRMV3J.js";import{t as x}from"./IconButton-Cxmf-7_q.js";import{t as S}from"./i18n-CJQl3WLC.js";import{t as C}from"./LanguageSwitcher-D0mrMmyq.js";import{t as w}from"./Search-BYh1LNrJ.js";import{r as T}from"./products-Dhgp5EjC.js";import"./api-tyvtUCGz.js";var E={class:`flex items-center gap-10 min-w-0`},D={class:`hidden md:flex items-center gap-7`},O=[`href`,`onClick`],k={class:`hidden md:flex items-center gap-4`},A={key:0,class:`flex items-center gap-6 mr-2`},j=[`href`,`onClick`],M=[`aria-label`],N={key:0,class:`md:hidden fixed bottom-5 left-5 z-40`,style:{"padding-bottom":`env(safe-area-inset-bottom)`}},P={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)`}},F={key:0,class:`fixed inset-0 z-50 bg-brand text-cream flex flex-col font-sans`},I={class:`flex items-center px-6 pt-6 pb-4`,style:{"padding-top":`calc(env(safe-area-inset-top) + 1.5rem)`}},L={class:`flex-1 flex flex-col justify-center px-8 gap-3 overflow-y-auto`},R=[`href`,`onClick`],z={class:`px-6 pb-6 flex justify-center`},B={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)`}},V={class:`inline-flex items-center gap-3`},H={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`},U={__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:`#`}]},secondaryItems:{type:Array,default:()=>[]},cartCount:{type:Number,default:0},floatOnMobile:{type:Boolean,default:!0},products:{type:Array,default:()=>T}},emits:[`cart`,`nav`,`select`],setup(T){let U=T,{t:W}=S(),G=t(!1),K=t(!1),q={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`}},J=d(()=>q[U.variant]),Y=d(()=>U.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`),X=d(()=>U.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`),Z=d(()=>U.layout===`floating`?`w-9 md:w-16 h-auto`:`w-12 md:w-24 h-auto`);function Q(e){return e.key?W(e.key):e.label}return e(G,e=>{typeof document>`u`||(document.documentElement.style.overflow=e?`hidden`:``)}),_(()=>{typeof document<`u`&&(document.documentElement.style.overflow=``)}),(e,t)=>(n(),g(`header`,{class:h([`font-sans`,Y.value,J.value.bar])},[m(`div`,{class:h([X.value,`flex items-center justify-between gap-6`])},[m(`div`,E,[m(`a`,{href:`/`,class:h([`block shrink-0 py-1`,J.value.logo]),"aria-label":`Kaiser Natron home`},[u(y,{class:h(Z.value)},null,8,[`class`])],2),m(`nav`,D,[(n(!0),g(p,null,i(T.items,t=>(n(),g(`a`,{key:t.key||t.label,href:t.href||`#`,class:h([J.value.link,`text-[14px] font-medium tracking-label transition-colors duration-base`]),onClick:n=>e.$emit(`nav`,t)},l(Q(t)),11,O))),128))])]),m(`div`,k,[T.secondaryItems.length?(n(),g(`nav`,A,[(n(!0),g(p,null,i(T.secondaryItems,t=>(n(),g(`a`,{key:t.key||t.label,href:t.href||`#`,class:h([J.value.link,`text-[14px] font-medium tracking-label transition-colors duration-base`]),onClick:n=>e.$emit(`nav`,t)},l(Q(t)),11,j))),128))])):c(``,!0),m(`button`,{type:`button`,class:h([`inline-flex items-center gap-2 pl-3 pr-4 h-10 rounded-pill text-[13px] font-medium tracking-label transition-colors duration-base`,J.value.searchTrigger]),"aria-label":r(W)(`search.open`),onClick:t[0]||=e=>K.value=!0},[u(b,{name:`search`,size:16}),m(`span`,null,l(r(W)(`search.placeholder`)),1)],10,M),u(C,{tone:T.variant},null,8,[`tone`]),u(x,{icon:`cart`,variant:`accent`,size:`md`,count:T.cartCount,"aria-label":r(W)(`cart.open`),onClick:t[1]||=t=>e.$emit(`cart`)},null,8,[`count`,`aria-label`])])],2),T.floatOnMobile?(n(),g(`div`,N,[u(x,{icon:`search`,variant:`float`,size:`lg`,"icon-stroke-width":2,"aria-label":r(W)(`search.open`),onClick:t[2]||=e=>K.value=!0},null,8,[`aria-label`])])):c(``,!0),T.floatOnMobile?(n(),g(`div`,P,[u(x,{icon:`cart`,variant:`accent`,size:`lg`,shadow:`md`,count:T.cartCount,"aria-label":r(W)(`cart.open`),onClick:t[3]||=t=>e.$emit(`cart`)},null,8,[`count`,`aria-label`]),u(x,{icon:`menu`,variant:`float`,size:`lg`,"icon-size":24,"icon-stroke-width":2,"aria-label":r(W)(`menu.open`),onClick:t[4]||=e=>G.value=!0},null,8,[`aria-label`])])):c(``,!0),(n(),a(o,{to:`body`},[u(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(()=>[G.value?(n(),g(`div`,F,[m(`div`,I,[u(y,{class:`w-12 h-auto text-cream`})]),m(`nav`,L,[(n(!0),g(p,null,i([...T.items,...T.secondaryItems],t=>(n(),g(`a`,{key:t.key||t.label,href:t.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:n=>{G.value=!1,e.$emit(`nav`,t)}},l(Q(t)),9,R))),128))]),m(`div`,z,[u(C,{tone:`brand`})]),m(`div`,B,[m(`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:t[5]||=t=>{G.value=!1,e.$emit(`cart`)}},[m(`span`,V,[u(b,{name:`cart`,size:20}),f(` `+l(r(W)(`cart.label`)),1)]),T.cartCount>0?(n(),g(`span`,H,l(T.cartCount),1)):c(``,!0)]),u(x,{icon:`close`,variant:`cream-wash`,size:`lg`,"icon-size":20,"aria-label":r(W)(`menu.close`),class:`shrink-0`,onClick:t[6]||=e=>G.value=!1},null,8,[`aria-label`])])])):c(``,!0)]),_:1})])),u(w,{modelValue:K.value,"onUpdate:modelValue":t[7]||=e=>K.value=e,products:T.products,tone:T.variant,onSelect:t[8]||=t=>e.$emit(`search`,t)},null,8,[`modelValue`,`products`,`tone`])],2))}};export{U as t}; |