Polished existing features, added items to sidebar navigation

client/src/Project/Board/Header/Styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export const Breadcrumbs = styled.div`
+  color: ${color.textMedium};
+  ${font.size(15)};
+`;
+
+export const Divider = styled.span`
+  position: relative;
+  top: 2px;
+  margin: 0 10px;
+  ${font.size(18)};
+`;
+
+export const Header = styled.div`
+  margin-top: 6px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const BoardName = styled.div`
+  ${font.size(24)}
+  ${font.medium}
+`;

client/src/Project/Board/Header/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { CopyLinkButton } from 'shared/components';
+import { Breadcrumbs, Divider, Header, BoardName } from './Styles';
+
+const propTypes = {
+  projectName: PropTypes.string.isRequired,
+};
+
+const ProjectBoardHeader = ({ projectName }) => (
+  <>
+    <Breadcrumbs>
+      Projects
+      <Divider>/</Divider>
+      {projectName}
+      <Divider>/</Divider>
+      Kanban Board
+    </Breadcrumbs>
+    <Header>
+      <BoardName>Kanban board</BoardName>
+      <CopyLinkButton />
+    </Header>
+  </>
+);
+
+ProjectBoardHeader.propTypes = propTypes;
+
+export default ProjectBoardHeader;