TASK-30

src/app.tsx

@@ -3,11 +3,13 @@ import React from "react";
 import SchedulePage from "./components/schedule-page/schedule-page.component";
 import WorkersPage from "./components/workers-page/workers-page.component";
 import { CustomGlobalHotKeys } from "./components/common-components/tools/globalhotkeys.component";
+import Header from "./components/common-components/header/header";
 
 function App(): JSX.Element {
   return (
     <React.Fragment>
       <CustomGlobalHotKeys />
+      <Header />
       <Switch>
         <Route path="/" component={SchedulePage} exact />
         <Route path="/workers" component={WorkersPage} />

src/assets/styles/styles-all.scss

@@ -23,4 +23,5 @@
 @import "styles/custom/tables";
 @import "styles/custom/toolbar";
 @import "styles/custom/add-worker-modal";
+@import "styles/custom/header";
 @import "styles/custom/month-switch";

src/assets/styles/styles/bootstrap/_variables.scss

@@ -7,6 +7,9 @@
 // Color system
 //
 
+$primary-header-color: #1d3557 !default;
+$primary-header-color-selected: #162740 !default;
+
 $white: #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;

src/assets/styles/styles/custom/_header.scss

@@ -0,0 +1,43 @@
+#header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 5%;
+  background-color: $primary-header-color;
+  padding: 0 20px 0 20px;
+  align-items: center;
+  justify-content: left;
+
+  ul {
+    list-style-type: none;
+    margin: 0 20px 0 20px;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  li {
+    float: left;
+  }
+
+  li a {
+    display: block;
+    color: $white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+
+  li a:hover {
+    background-color: $primary-header-color-selected;
+    color: $white;
+  }
+
+  .active {
+    font-weight: bold;
+  }
+
+  .filler {
+    flex-grow: 1;
+  }
+}

src/components/common-components/header/header.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function Header(): JSX.Element {
+  return (
+    <>
+      <div id={"header"}>
+        <img src={require("../../../assets/images/header-logo.png")} title={""} alt={""} />
+
+        <ul>
+          <li className={"active"}>
+            <Link to="/">Plan</Link>
+          </li>
+
+          <li>
+            <Link to="/workers/">Zarządzanie</Link>
+          </li>
+        </ul>
+
+        <div className={"filler"}></div>
+
+        <ul>
+          <li>
+            <Link to="/">Imię i nazwisko</Link>
+          </li>
+        </ul>
+
+        <Link to={"/"}>
+          <img src={require("../../../assets/images/arrow.png")} title={""} alt={""} />
+        </Link>
+      </div>
+    </>
+  );
+}