Fix so we can close mobile search

w3bdesign · Jul 5, 2020 · 27aee5c · 27aee5c
1 parent 0aa839d
commit 27aee5c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 62 deletions.
diff --git 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
@@ -1,14 +1,17 @@
 /**
  * The SVG that we display to close the cart or the mobile search
  */
-const SVGCloseX = () => {
+const SVGCloseX = ({ setisExpanded }) => {
   return (
     <>
       <svg
         width="80px"
         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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "",
   "main": "index.js",
   "scripts": {