Add Navbar component, emotion for css and storybook

2022-12-04 22:59:30 +01:00
parent eba76274c6
commit 0f2d8a556e
15 changed files with 37849 additions and 4090 deletions
--- a/front/src/layout/Navbar.tsx
+++ b/front/src/layout/Navbar.tsx
@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { useMatch, useResolvedPath } from 'react-router-dom';
+import NavItem from './NavItem';
+
+const NavbarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding-left: 12px;
+  height: 58px;
+  border-bottom: 2px solid #eaecee;
+`;
+
+function Navbar() {
+  return (
+    <>
+      <NavbarContainer>
+        <NavItem
+          label="Tasks"
+          to="/"
+          active={
+            !!useMatch({
+              path: useResolvedPath('/').pathname,
+              end: true,
+            })
+          }
+        />
+        <NavItem
+          label="History"
+          to="/history"
+          active={
+            !!useMatch({
+              path: useResolvedPath('/history').pathname,
+              end: true,
+            })
+          }
+        />
+        <NavItem
+          label="Performances"
+          to="/performances"
+          active={
+            !!useMatch({
+              path: useResolvedPath('/performances').pathname,
+              end: true,
+            })
+          }
+        />
+      </NavbarContainer>
+    </>
+  );
+}
+
+export default Navbar;