diff --git a/components/Header/Navbar.component.jsx b/components/Header/Navbar.component.jsx index 65641a423..ab1145efb 100644 --- a/components/Header/Navbar.component.jsx +++ b/components/Header/Navbar.component.jsx @@ -12,61 +12,60 @@ import Hamburger from './Hamburger.component'; const Navbar = () => { return ( <header> - <nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white "> - <div - id="navbar-div" - className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 " - - > - <Hamburger /> + <nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white "> <div - className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1" - id="menu" + id="navbar-div" + className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 " > - <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0"> - <li> - <Link href="/produkter"> - <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"> - Produkter - </a> - </Link> - </li> - <li> - <Link href="/kategorier"> - <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"> - Kategorier - </a> - </Link> - </li> - </ul> + <Hamburger /> + <div + className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1" + id="menu" + > + <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0"> + <li> + <Link href="/produkter"> + <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"> + Produkter + </a> + </Link> + </li> + <li> + <Link href="/kategorier"> + <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"> + Kategorier + </a> + </Link> + </li> + </ul> + </div> + <div className="order-1 md:order-2"> + <Link href="/"> + <a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline "> + <svg + className="mr-2 text-gray-800 fill-current" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + > + <path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" /> + </svg> + NETTBUTIKK + </a> + </Link> + </div> + <div + className="flex items-center order-2 md:order-3" + id="nav-content" + > + <Search /> + <SVGMobileSearchIcon /> + <Cart /> + </div> </div> - <div className="order-1 md:order-2"> - <Link href="/"> - <a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline "> - <svg - className="mr-2 text-gray-800 fill-current" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - > - <path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" /> - </svg> - NETTBUTIKK - </a> - </Link> - </div> - <div - className="flex items-center order-2 md:order-3" - id="nav-content" - > - <Search /> - <SVGMobileSearchIcon /> - <Cart /> - </div> - </div> - </nav> - </header> + </nav> + </header> ); }; diff --git a/components/SVG/SVGCloseX.component.jsx b/components/SVG/SVGCloseX.component.jsx index 2ca279723..5094392bb 100644 --- a/components/SVG/SVGCloseX.component.jsx +++ b/components/SVG/SVGCloseX.component.jsx @@ -1,7 +1,7 @@ /** * The SVG that we display to close the cart or the mobile search */ -const SVGCloseX = () => { +const SVGCloseX = ({ setisExpanded }) => { return ( <> <svg @@ -9,6 +9,9 @@ const SVGCloseX = () => { height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.6 45.47" + onClick={() => { + setisExpanded(false); + }} > <path d="M202.83,209.89H181v-42H186v37.56h16.87Z" diff --git a/components/SVG/SVGMobileSearchIcon.component.jsx b/components/SVG/SVGMobileSearchIcon.component.jsx index 47f5270ac..f2087907f 100644 --- a/components/SVG/SVGMobileSearchIcon.component.jsx +++ b/components/SVG/SVGMobileSearchIcon.component.jsx @@ -46,12 +46,8 @@ const SVGMobileSearchIcon = () => { style={mobileSearchSlideDownAnimation} className="absolute right-0 z-50 w-full p-4 text-black bg-white" > - <div className="absolute right-0 mr-6 -mt-12 cursor-pointer"> - <SVGCloseX - onClick={() => { - setisExpanded(!isExpanded); - }} - /> + <div className="cursor-pointer"> + <SVGCloseX setisExpanded={setisExpanded} /> </div> <br /> <MobileSearch /> diff --git a/components/Search/MobileSearch.component.jsx b/components/Search/MobileSearch.component.jsx index 8b81530fd..9f42d3786 100644 --- a/components/Search/MobileSearch.component.jsx +++ b/components/Search/MobileSearch.component.jsx @@ -19,7 +19,10 @@ const MobileSearch = () => { return ( <> <div className="inline mt-4"> - <InstantSearch indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME} searchClient={searchClient}> + <InstantSearch + indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME} + searchClient={searchClient} + > <SearchBox translations={{ submitTitle: 'Søk', @@ -42,7 +45,6 @@ const MobileSearch = () => { setSearch(text.target.value); }} /> - {search && <Hits className="absolute" hitComponent={SearchResults} />} </InstantSearch> </div> diff --git a/package.json b/package.json index c5bee6fd8..0561fef59 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nextjs-woocommerce", - "version": "0.9.0", + "version": "0.9.1", "description": "", "main": "index.js", "scripts": {