Improve design

Author: w3bdesign

components/AlgoliaSearch/MobileSearch.component.jsx

@@ -5,8 +5,8 @@ import { useState } from 'react';
 import SearchResults from './SearchResults.component';
 
 const searchClient = algoliasearch(
-  process.env.ALGOLIA_APP_ID,
-  process.env.ALGOLIA_PUBLIC_API_KEY
+  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
+  process.env.NEXT_PUBLIC_ALGOLIA_PUBLIC_API_KEY
 );
 
 /**
@@ -16,7 +16,7 @@ const MobileSearch = () => {
   const [search, setSearch] = useState(null);
   const [hasFocus, sethasFocus] = useState(false);
   return (
-    <div className="inline mt-4">
+    <div className="inline mt-4 md:hidden">
       <InstantSearch
         indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME}
         searchClient={searchClient}

components/Cart/Cart.component.jsx

@@ -18,7 +18,7 @@ const Cart = () => {
     <>
       <Link href="/handlekurv">
         <a
-          className="inline-block pl-4 mt-4 no-underline"
+          className="pl-4 mt-4 no-underline inline-block"
           aria-label="Handlekurv"
         >
           <svg

components/Footer/Stickynav.component.jsx

@@ -0,0 +1,50 @@
+import Link from 'next/link';
+
+import Cart from '../Cart/Cart.component';
+import Search from '../AlgoliaSearch/AlgoliaSearchBox.component';
+import SVGMobileSearchIcon from '../SVG/SVGMobileSearchIcon.component';
+
+import Hamburger from '../Header/Hamburger.component';
+
+/**
+ * Navigation for the application.
+ * Includes mobile menu.
+ */
+const Stickynav = () => (
+  <nav
+    id="footer"
+    className="fixed bottom-0 z-50 w-full py-1 bg-white md:hidden lg:hidden xl:hidden"
+  >
+    <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
+      <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 py-2 pr-4 text-xl font-bold no-underline hover:underline">
+                Produkter
+              </a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/kategorier">
+              <a className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
+                Kategorier
+              </a>
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="flex items-center order-2 md:order-3" id="nav-content">
+        <Search />
+        <SVGMobileSearchIcon />
+        <Cart />
+      </div>
+    </div>
+  </nav>
+);
+
+export default Stickynav;

components/Header/Navbar.component.jsx

@@ -2,20 +2,18 @@ import Link from 'next/link';
 
 import Cart from '../Cart/Cart.component';
 import Search from '../AlgoliaSearch/AlgoliaSearchBox.component';
-import SVGMobileSearchIcon from '../SVG/SVGMobileSearchIcon.component';
+import MobileSearch from '../AlgoliaSearch/MobileSearch.component';
+
 
-import Hamburger from './Hamburger.component';
 
 /**
  * Navigation for the application.
  * Includes mobile menu.
  */
 const Navbar = () => (
   <header>
-    <nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
+    <nav id="header" className="top-0 z-50 w-full py-1 bg-white ">
       <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
-        <Hamburger />
-
         <div
           className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
           id="menu"
@@ -59,7 +57,9 @@ const Navbar = () => (
         </div>
         <div className="flex items-center order-2 md:order-3" id="nav-content">
           <Search />
-          <SVGMobileSearchIcon />
+
+          <MobileSearch />
+
           <Cart />
         </div>
       </div>

pages/_app.js

@@ -5,6 +5,7 @@ import Router from 'next/router';
 import NProgress from 'nprogress';
 
 import Footer from 'components/Footer/Footer.component';
+import Stickynav from 'components/Footer/Stickynav.component';
 
 import 'styles/index.css';
 import 'styles/animate.min.css';
@@ -21,6 +22,7 @@ const App = ({ Component, pageProps }) => (
     <AppProvider>
       <Component {...pageProps} />
       <Footer />
+      <Stickynav />
     </AppProvider>
   </ApolloProvider>
 );