{"version":3,"file":"db9b3760.js","sources":["../../../src/components/globals/navigation/NavigationDrawer.client.tsx"],"sourcesContent":["import {useMemo, useEffect, useState} from 'react';\nimport {Image, Link, useLocalization} from '@shopify/hydrogen';\n\nimport {handleize} from 'Js/lib/handleize';\nimport {sanityImage} from 'Js/lib/sanity-image';\nimport useMediaQuery from 'Js/hooks/useMediaQuery';\nimport Cookies from 'js-cookie';\n\n/**\n * A client component that defines the navigation for a web storefront\n */\nexport default function NavigationDrawer({\n  enableSimpleMenu,\n  headerSolid,\n  navigation,\n  openTab,\n  setOpenTab,\n  showPromoBanner,\n}: {\n  enableSimpleMenu: boolean;\n  headerSolid: boolean;\n  navigation: any;\n  openTab: string;\n  setOpenTab: any;\n  showPromoBanner: boolean;\n}): JSX.Element {\n  const isMobile = useMediaQuery('(max-width: 767px)');\n  const {\n    country: {isoCode: countryCode},\n  } = useLocalization();\n  const [drawerLeftPos, setDrawerLeftPos] = useState(0);\n\n  const navDataIndex = navigation?.links.findIndex(\n    (link: any) => openTab === (link.title || link.text),\n  );\n  const navData = navigation?.links[navDataIndex];\n  const hasTouts = navData && navData.touts && navData.touts.length;\n  const navDataTouts = hasTouts && (navData.touts[0].touts || navData.touts);\n  const hasNestedLinkGroup =\n    navData &&\n    navData.links &&\n    navData.links.filter((link: any) => link._type === 'linkGroup').length;\n  const shouldUseSimpleMenu =\n    enableSimpleMenu && !hasTouts && !hasNestedLinkGroup;\n  const drawerWidth = shouldUseSimpleMenu ? 'w-[212px]' : 'w-full';\n  const isDomestic = countryCode === 'US';\n  const show2Hr = Cookies.get('show_2_hour_delivery_nav');\n\n  useEffect(() => {\n    if (!document || !openTab) return;\n\n    // reset drawer positioning for large width drawer\n    if (!shouldUseSimpleMenu) {\n      setDrawerLeftPos(0);\n      return;\n    }\n\n    // get nav item from main header\n    const $navItem = document.body.querySelector(\n      `li[data-nav-item=${handleize(openTab)}]`,\n    );\n    if (!$navItem) return;\n\n    // calculate and set left positioning for drawer\n    const computedStyle = window.getComputedStyle($navItem);\n    const leftPos = $navItem?.getBoundingClientRect().left;\n    const leftMargin = parseInt(computedStyle.marginTop, 10);\n    const leftPosWithMargin =\n      leftPos - leftMargin >= 0 ? leftPos - leftMargin : 0;\n    setDrawerLeftPos(leftPosWithMargin);\n  }, [openTab, shouldUseSimpleMenu]);\n\n  return navData && navData.links && headerSolid ? (\n    <nav\n      className={`z-13 fixed hidden w-full lg:block ${\n        showPromoBanner ? 'top-[93px]' : 'top-[57px]'\n      }`}\n      onMouseLeave={() => setOpenTab('')}\n    >\n      <ul\n        className={`nav-menus__litter-list absolute ${drawerWidth} flex justify-center pt-3 pb-[28px] bg-white-1${\n          !hasNestedLinkGroup ? ' flex-col items-center' : ''\n        }`}\n        style={{\n          left: `${drawerLeftPos}px`,\n        }}\n      >\n        {navData.links.map((link: any, idx: number) => {\n          const linkTitle = link.title || link.text;\n          const paddingBottom = hasNestedLinkGroup ? 'pb-[25px]' : 'pb-0';\n          const paddingLeftRight = hasNestedLinkGroup ? 'px-[40px]' : 'px-0';\n          const paddingClass = `${paddingBottom} ${paddingLeftRight}`;\n\n          if (!isDomestic && link?.url?.includes('gift-card')) return null;\n\n          return (\n            <li\n              key={`${linkTitle}-${idx}`}\n              className={`nav-menus__cat block ${paddingClass}`}\n            >\n              {link._type === 'linkGroup' ? (\n                <div className=\"flex flex-col\">\n                  {linkTitle && (\n                    <h2 className=\"mb-3 text-[15px] text-brown-1\">\n                      {linkTitle}\n                    </h2>\n                  )}\n                  <ul className=\"flex flex-col\">\n                    {link.links.map((childLink: any) => {\n                      if (\n                        !childLink ||\n                        (!isDomestic && childLink?.url?.includes('gift-card'))\n                      )\n                        return null;\n\n                      return (\n                        <li\n                          key={childLink.text}\n                          className={`text-[15px] leading-[24px] lg:leading-[30px]${\n                            link.bold ? ' font-secondary' : ''\n                          }`}\n                        >\n                          <Link\n                            to={childLink.url || ''}\n                            onClick={() => setOpenTab('')}\n                          >\n                            {childLink.text}\n                          </Link>\n                          {childLink.text == \"kim's picks\" && show2Hr && (\n                            <Link\n                              to=\"/collections/2-hour-delivery\"\n                              onClick={() => setOpenTab('')}\n                            >\n                              <div>2 hour delivery</div>\n                            </Link>\n                          )}\n                        </li>\n                      );\n                    })}\n                  </ul>\n                </div>\n              ) : (\n                <Link\n                  to={link.url || ''}\n                  className=\"block font-secondary text-[15px]\"\n                  onClick={() => setOpenTab('')}\n                >\n                  {linkTitle}\n                </Link>\n              )}\n            </li>\n          );\n        })}\n        {hasTouts && (\n          <ul className=\"flex px-[40px]\">\n            {navDataTouts.map((tout: any, idx: number) => {\n              const {\n                alt: toutAlt,\n                image: toutImage,\n                title: toutTitle,\n                text: toutText,\n                url: toutUrl,\n              } = tout;\n              const toutImageAsset = toutImage ? toutImage.asset._ref : null;\n              const imageSrc = sanityImage(toutImageAsset, false);\n\n              if (!isDomestic && toutUrl?.includes('gift-card')) return null;\n\n              return (\n                <li\n                  key={toutTitle}\n                  className=\"mt-2\"\n                  style={{marginLeft: idx > 0 ? '30px' : 0}}\n                >\n                  <Link to={toutUrl || ''} onClick={() => setOpenTab('')}>\n                    <div className=\"block\">\n                      {toutImageAsset && (\n                        <Image\n                          src={imageSrc}\n                          alt={toutAlt}\n                          width={isMobile ? 104 : 178}\n                          height={isMobile ? 124 : 213}\n                          style={{maxHeight: isMobile ? 124 : 213}}\n                        />\n                      )}\n                    </div>\n                    <h3\n                      className=\"mt-[9px] text-[15px] leading-[18px]\"\n                      style={{maxWidth: isMobile ? 104 : 178}}\n                    >\n                      {toutTitle}\n                    </h3>\n                    {toutText && (\n                      <p\n                        className=\"mt-[5px] block text-[14px] leading-[18px]\"\n                        style={{maxWidth: isMobile ? 104 : 178}}\n                      >\n                        {toutText}\n                      </p>\n                    )}\n                  </Link>\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </ul>\n    </nav>\n  ) : (\n    <></>\n  );\n}\n"],"names":["NavigationDrawer","enableSimpleMenu","headerSolid","navigation","openTab","setOpenTab","showPromoBanner","isMobile","useMediaQuery","country","isoCode","countryCode","useLocalization","drawerLeftPos","setDrawerLeftPos","useState","navDataIndex","links","findIndex","link","title","text","navData","hasTouts","touts","length","navDataTouts","hasNestedLinkGroup","filter","_type","shouldUseSimpleMenu","drawerWidth","isDomestic","show2Hr","Cookies","get","useEffect","document","$navItem","body","querySelector","handleize","computedStyle","window","getComputedStyle","leftPos","getBoundingClientRect","left","leftMargin","parseInt","marginTop","leftPosWithMargin","map","idx","linkTitle","paddingClass","url","includes","_jsx","childLink","bold","Link","tout","alt","toutAlt","image","toutImage","toutTitle","toutText","toutUrl","toutImageAsset","asset","_ref","imageSrc","sanityImage","marginLeft","Image","maxHeight","maxWidth","_Fragment"],"mappings":"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"}