{"version":3,"sources":["webpack://giant-pizza/./src/svg/Menu.tsx","webpack://giant-pizza/./src/components/Nav.tsx","webpack://giant-pizza/./src/hooks/useOutsideClickDetector.ts","webpack://giant-pizza/./src/components/Header.tsx","webpack://giant-pizza/./src/components/Sidebar.tsx","webpack://giant-pizza/./src/pages/index.tsx"],"names":["props","viewBox","width","height","d","fill","React","showSidebar","setShowSidebar","ref","useRef","ignoreRef","effect","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","useOutsideDetector","className","href","S","src","alt","onClick","Menu","Sidebar","query","render","data","allRestaurantsJson","edges","map","node","slug","name","key","to","address1","address2","phone"],"mappings":"+nDAEA,eAAgBA,GAAD,OACb,qCAAKC,QAAQ,YAAYC,MAAM,MAAMC,OAAO,OAAUH,GACpD,wBACEI,EAAE,4IACFC,KAAK,mB,UC8CX,EA9CsB,WACpB,MAAsCC,YAAe,GAA9CC,EAAP,KAAoBC,EAApB,KAEMC,GAAMC,YAAO,MACbC,GAAYD,YAAO,MAGzB,OCXK,SAA4BD,EAAKE,EAAWC,IACjDC,gBAAU,WACR,SAASC,EAAmBC,GACtBJ,EAAUK,SAAWL,EAAUK,QAAQC,SAASF,EAAMG,UAGtDT,EAAIO,UAAYP,EAAIO,QAAQC,SAASF,EAAMG,QAC7CN,GAAO,GAEPA,GAAO,IAMX,OADAO,SAASC,iBAAiB,YAAaN,GAChC,WAELK,SAASE,oBAAoB,YAAaP,MAE3C,CAACL,IDVJa,CAAmBb,EAAKE,EAAWH,GAGjC,gCACE,0BAAQe,UAAU,4DAChB,qBAAGC,KAAK,KACN,gBAAC,EAAAC,EAAD,CACEC,IAAI,qBACJC,IAAI,mCACJJ,UAAU,OAHZ,uBAMF,0BACEd,IAAKE,EACLY,UAAU,0DACVK,QAAS,kBAAMpB,GAAgBD,KAE/B,gBAACsB,EAAD,MALF,cASF,uBACEpB,IAAKA,EACLc,UAAS,wEACPhB,EAAc,SAAW,aAG3B,uBAAKgB,UAAU,YACb,0BACEA,UAAU,8BACVK,QAAS,kBAAMpB,GAAe,KAFhC,KAMA,gBAACsB,EAAA,EAAD,UE5BV,EAde,kBACb,gCACE,gBAAC,EAAD,MACA,0BAAQP,UAAU,uDAChB,qBAAGC,KAAK,KACN,sBAAID,UAAU,qCAAd,sBAGJ,uBAAKA,UAAU,wBAAf,0D,oEC0BJ,IAhC0B,WACxB,OACE,uBAAKA,UAAU,0DACb,qBAAGC,KAAK,KACN,gBAAC,EAAAC,EAAD,CACEC,IAAI,qBACJC,IAAI,mCAFN,uBAKF,uBAAKJ,UAAU,6DAAf,iBAGA,gBAAC,KAAD,CACEQ,MAAOA,EACPC,OAAQ,SAACC,GAAD,OACN,2BACGA,EAAKC,mBAAmBC,MAAMC,KAAI,oBAAGC,KAAQC,EAAX,EAAWA,KAAMC,EAAjB,EAAiBA,KAAjB,OACjC,gBAAC,KAAD,CACEC,IAAKF,EACLf,UAAU,yFACVkB,GAAIH,GAEHC,YAYV,IAAMR,EAAK,a,+FCkClB,UAjE4B,WAC1B,OACE,gBAAC,KAAD,CACEA,MAAK,YAeLC,OAAQ,SAACC,GAAD,OACN,gCACE,uBAAKV,UAAU,oBACb,uBAAKA,UAAU,0DACb,gBAAC,IAAD,OAEF,uBAAKA,UAAU,4BACb,gBAAC,IAAD,MACA,uBAAKA,UAAU,OACb,gBAAC,EAAAE,EAAD,CACEC,IAAI,uBACJC,IAAI,QACJJ,UAAU,SAHZ,uBAMF,wBAAMA,UAAU,wBACd,sBAAIA,UAAU,kCAAd,qBAGA,uBAAKA,UAAU,mCACZU,EAAKC,mBAAmBC,MAAMC,KAAI,gBAAGC,EAAH,EAAGA,KAAH,OACjC,uBAAKG,IAAKH,EAAKC,MACb,qBACEd,KAAMa,EAAKC,KACXf,UAAU,gCAETc,EAAKE,MAER,uBAAKhB,UAAU,gBACZc,EAAKK,SACN,2BACCL,EAAKM,SACN,2BACCN,EAAKO","file":"component---src-pages-index-tsx-01a54c09dc951452c428.js","sourcesContent":["import * as React from 'react'\n\nexport default (props: any) => (\n  <svg viewBox=\"0 0 20 20\" width=\"1em\" height=\"1em\" {...props}>\n    <path\n      d=\"M17.5 6h-15a.5.5 0 0 1 0-1h15a.5.5 0 0 1 0 1zM17.5 11h-15a.5.5 0 0 1 0-1h15a.5.5 0 0 1 0 1zM17.5 16h-15a.5.5 0 0 1 0-1h15a.5.5 0 0 1 0 1z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n","import { StaticImage } from 'gatsby-plugin-image'\nimport React, { useRef } from 'react'\nimport { useOutsideDetector } from '../hooks/useOutsideClickDetector'\nimport Menu from '../svg/Menu'\nimport Sidebar from './Sidebar'\n\nconst Nav: React.FC = () => {\n  const [showSidebar, setShowSidebar] = React.useState(false)\n\n  const ref = useRef(null)\n  const ignoreRef = useRef(null)\n  useOutsideDetector(ref, ignoreRef, setShowSidebar)\n\n  return (\n    <>\n      <header className=\"flex justify-between items-center p-5 bg-black lg:hidden\">\n        <a href=\"/\">\n          <StaticImage\n            src=\"../images/logo.png\"\n            alt=\"king holding two slices of pizza\"\n            className=\"w-12\"\n          />\n        </a>\n        <button\n          ref={ignoreRef}\n          className=\"text-white flex items-center focus:outline-none text-lg\"\n          onClick={() => setShowSidebar(!showSidebar)}\n        >\n          <Menu />\n          Locations\n        </button>\n      </header>\n      <div\n        ref={ref}\n        className={` z-10 h-screen bg-white w-72 fixed top-0 transition-all lg:-left-96 ${\n          showSidebar ? 'left-0' : '-left-96'\n        }`}\n      >\n        <div className=\"relative\">\n          <button\n            className=\"absolute top-2 right-2 z-20\"\n            onClick={() => setShowSidebar(false)}\n          >\n            x\n          </button>\n          <Sidebar />\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Nav\n","import { useEffect } from 'react'\n\nexport function useOutsideDetector(ref, ignoreRef, effect: (v: any) => void) {\n  useEffect(() => {\n    function handleClickOutside(event) {\n      if (ignoreRef.current && ignoreRef.current.contains(event.target)) {\n        return\n      }\n      if (ref.current && !ref.current.contains(event.target)) {\n        effect(false)\n      } else {\n        effect(true)\n      }\n    }\n\n    // Bind the event listener\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [ref])\n}\n","import React from 'react'\nimport Nav from './Nav'\n\nconst Header = () => (\n  <>\n    <Nav />\n    <header className=\"flex justify-center py-3 border-b border-solid mb-4\">\n      <a href=\"/\">\n        <h1 className=\"text-red-600 text-3xl font-normal\">Giant Pizza King</h1>\n      </a>\n    </header>\n    <div className=\"text-2xl text-center\">\n      If you don't see the KING, It's not the REAL THING!\n    </div>\n  </>\n)\n\nexport default Header\n","import * as React from 'react'\nimport { graphql, Link, StaticQuery } from 'gatsby'\nimport { SidebarRestaurantsQuery } from '../graphql-types'\nimport { StaticImage } from 'gatsby-plugin-image'\n\nconst Sidebar: React.FC = () => {\n  return (\n    <div className=\"p-6 sticky top-0 max-h-screen overflow-scroll bg-white\">\n      <a href=\"/\">\n        <StaticImage\n          src=\"../images/logo.png\"\n          alt=\"king holding two slices of pizza\"\n        />\n      </a>\n      <div className=\"text-gray-500 text-2xl py-5 border-b border-gray-500 mb-4\">\n        Our Locations\n      </div>\n      <StaticQuery\n        query={query}\n        render={(data: SidebarRestaurantsQuery) => (\n          <div>\n            {data.allRestaurantsJson.edges.map(({ node: { slug, name } }) => (\n              <Link\n                key={slug}\n                className=\"text-gray-500 block uppercase font-bold text-lg hover:bg-gray-300 p-3 hover:text-black\"\n                to={slug}\n              >\n                {name}\n              </Link>\n            ))}\n          </div>\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Sidebar\n\nexport const query = graphql`\n  query SidebarRestaurants {\n    allRestaurantsJson(sort: { order: ASC, fields: sort }) {\n      edges {\n        node {\n          id\n          slug\n          name\n        }\n      }\n    }\n  }\n`\n","import { graphql, StaticQuery } from 'gatsby'\nimport { StaticImage } from 'gatsby-plugin-image'\nimport * as React from 'react'\nimport Header from '../components/Header'\nimport Layout from '../components/Layout'\nimport Sidebar from '../components/Sidebar'\nimport { HomePageQuery } from '../graphql-types'\n\nconst IndexPage: React.FC = () => {\n  return (\n    <StaticQuery\n      query={graphql`\n        query HomePage {\n          allRestaurantsJson(sort: { order: ASC, fields: [sort] }) {\n            edges {\n              node {\n                name\n                slug\n                address1\n                address2\n                phone\n              }\n            }\n          }\n        }\n      `}\n      render={(data: HomePageQuery) => (\n        <>\n          <div className=\"grid grid-cols-5\">\n            <div className=\"hidden lg:block lg:col-span-1 border-gray-300 border-r\">\n              <Sidebar />\n            </div>\n            <div className=\"col-span-5 lg:col-span-4\">\n              <Header />\n              <div className=\"p-4\">\n                <StaticImage\n                  src=\"../images/banner.jpg\"\n                  alt=\"Pizza\"\n                  className=\"w-full\"\n                />\n              </div>\n              <main className=\"p-6 max-w-7xl m-auto\">\n                <h2 className=\"mb-4 text-2xl bolder uppercase\">\n                  Select a location\n                </h2>\n                <div className=\"grid grid-cols-1 md:grid-cols-2\">\n                  {data.allRestaurantsJson.edges.map(({ node }) => (\n                    <div key={node.slug}>\n                      <a\n                        href={node.slug}\n                        className=\"underline text-lg my-2 block\"\n                      >\n                        {node.name}\n                      </a>\n                      <div className=\"mb-6 text-sm\">\n                        {node.address1}\n                        <br />\n                        {node.address2}\n                        <br />\n                        {node.phone}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </main>\n            </div>\n          </div>\n        </>\n      )}\n    />\n  )\n}\n\nexport default IndexPage\n"],"sourceRoot":""}