Add Navbar component, emotion for css and storybook

front/src/layout/AppLayout.tsx

@@ -0,0 +1,22 @@
+import Navbar from './Navbar';
+import styled from '@emotion/styled';
+
+const StyledLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type OwnProps = {
+  children: JSX.Element;
+};
+
+function AppLayout({ children }: OwnProps) {
+  return (
+    <StyledLayout>
+      <Navbar />
+      <div>{children}</div>
+    </StyledLayout>
+  );
+}
+
+export default AppLayout;

front/src/layout/NavItem.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+
+type OwnProps = {
+  label: string;
+  to: string;
+  active?: boolean;
+};
+
+type StyledItemProps = {
+  active?: boolean;
+};
+
+const StyledItem = styled.button`
+  display: flex;
+  height: 60px;
+  background: inherit;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 16px;
+  margin-bottom: -2px;
+  cursor: pointer;
+  color: ${(props: StyledItemProps) => (props.active ? 'black' : '#2e3138')};
+  font-weight: ${(props: StyledItemProps) =>
+    props.active ? 'bold' : 'inherit'};
+  border: 0;
+  border-bottom: ${(props: StyledItemProps) =>
+    props.active ? '2px solid black' : '2px solid #eaecee'};
+  &:hover {
+    border-bottom: 2px solid #2e3138;
+  }
+`;
+
+function NavItem({ label, to, active }: OwnProps) {
+  const navigate = useNavigate();
+
+  return (
+    <StyledItem
+      onClick={() => {
+        navigate(to);
+      }}
+      active={active}
+      aria-selected={active}
+    >
+      {label}
+    </StyledItem>
+  );
+}
+
+export default NavItem;

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;