save

code/frontend/src/components/header/Header.tsx

@@ -0,0 +1,17 @@
+import "./header.css";
+
+
+function Header() {
+
+  return (
+      <header className="base-header">
+        <div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
+        <p className="header-title small-title">
+          Feather Feed
+        </p>
+        <div className="base-header-icon"> <img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" /> </div>
+      </header>
+  );
+}
+
+export default Header;

code/frontend/src/components/header/header.css

@@ -0,0 +1,60 @@
+.base-header {
+  z-index: 10;
+  width: 100vw;
+  display: flex;
+  height: var(--header-height);
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  left: 0;
+  border-radius: 0rem !important;
+}
+@media only screen and (min-width: 768px) {
+  .base-header {
+    height: var(--header-height);
+  }
+}
+
+.header-title {
+  color: var(--Rotkehlchen-orange-default);
+  cursor: pointer;
+}
+.header-icon-feather {
+  height: 35px;
+}
+.header-icon-menu {
+  height: 45px;
+}
+
+.header-icon {
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+@media only screen and (min-width: 768px) {
+  .header-icon {
+    margin: 40px;
+  }
+}
+
+.drawer-list {
+  background-color: var(--dark-blue);
+  min-height: 100vh;
+  min-width: 13rem;
+}
+
+.drawer-list-item {
+  color: white;
+}
+
+.drawer-list-item-button {
+  height: 10vh;
+}
+.drawer-list-item-button:hover {
+  background-color: var(--dark-blue-hover);
+}