Add menu bar

src/components/layout.jsx

@@ -5,6 +5,7 @@ require('../styles/index.scss');
 
 const Layout = ({
   title,
+  isIndex = false,
   children
 }) => {
   return (
@@ -25,9 +26,23 @@ const Layout = ({
           rel="stylesheet"
         />
       </Helmet>
-      <div className="container mx-auto max-w-3xl py-4 min-h-screen flex flex-col justify-between">
+      <div className="container mx-auto max-w-3xl pt-4 pb-20 min-h-screen flex flex-col justify-between">
         {children}
       </div>
+      {
+        !isIndex &&
+        <div className="fixed bottom-0 left-0 right-0 h-16 border-t-2 border-gray-200 bg-white grid grid-cols-12">
+          <button className="col-start-1 col-end-3 flex items-center justify-center">
+            <img src="/shopping-bag.svg" alt="" className="px-4" />
+            Cart
+          </button>
+          <button className="col-start-3 col-end-11 text-2xl">0.00 €</button>
+          <button className="col-start-11 col-end-13 flex items-center justify-center">
+            <img src="/search.svg" alt="" className="px-4" />
+            Search
+          </button>
+        </div>
+      }
     </>
   );
 };

src/pages/index.jsx

@@ -4,7 +4,7 @@ import Layout from '../components/layout';
 const Home = () => {
   const [pin, setPin] = useState('');
   return (
-    <Layout title="">
+    <Layout title="" isIndex>
       <div>
         <img
           className="block mx-auto w-40 mt-10 mb-4"