From f4c10fa2982afc75fedadab8fcd2237d01eccc0e Mon Sep 17 00:00:00 2001
From: Isabelle Viktoria Maciohsek <maciv@hotmail.gr>
Date: Sun, 20 Sep 2020 00:18:59 +0300
Subject: [PATCH] Add menu bar

---
 src/components/layout.jsx | 17 ++++++++++++++++-
 src/pages/index.jsx       |  2 +-
 static/search.svg         |  1 +
 static/shopping-bag.svg   |  1 +
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 static/search.svg
 create mode 100644 static/shopping-bag.svg

diff --git a/src/components/layout.jsx b/src/components/layout.jsx
index ec8366c..1904770 100644
--- a/src/components/layout.jsx
+++ b/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>
+      }
     </>
   );
 };
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 7113d76..7d0a646 100644
--- a/src/pages/index.jsx
+++ b/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"
diff --git a/static/search.svg b/static/search.svg
new file mode 100644
index 0000000..c2a69eb
--- /dev/null
+++ b/static/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
diff --git a/static/shopping-bag.svg b/static/shopping-bag.svg
new file mode 100644
index 0000000..936277b
--- /dev/null
+++ b/static/shopping-bag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>