Layout: add NavigationBar

apps/web/Components/Layout/Navigation.jsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  background-color: white;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  height: 40px;
+  justify-content: space-around;
+  position: fixed;
+  width: 100%;
+`;
+
+const TabButton = styled.button`
+  background: rgba(240, 240, 240);
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+`;
+
+export function NavigationBar() {
+  return (
+    <Container>
+      <TabButton>Tab1</TabButton>
+      <TabButton>Tab2</TabButton>
+      <TabButton>Tab3</TabButton>
+    </Container>
+  );
+}

apps/web/Components/Layout/index.jsx

@@ -1,11 +1,22 @@
 import Header from './Header';
-import { AppMenu } from './Navigation';
+import { AppMenu } from './Menu';
-import { min } from '@/styles/mq';
+import { NavigationBar } from './Navigation';
+import { screens } from '@/config/ui';
+import { max, min } from '@/styles/mq';
+import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 
+const MediaQuery = dynamic(() => import('react-responsive'), {
+  ssr: false,
+});
+
 const Main = styled.main`
   margin: 8px 0;
 
+  ${max('laptop')} {
+    margin-bottom: 40px; // height of the navigation bar
+  }
+
   ${min('desktop-xl')} {
     margin: 8px 10%;
   }
@@ -17,6 +28,9 @@ export default function Layout({ children, user }) {
       <Header />
       {user?.admin ? <AppMenu /> : false}
       <Main>{children}</Main>
+      <MediaQuery maxWidth={screens.laptop}>
+        <NavigationBar />
+      </MediaQuery>
     </>
   );
 }