topbar

src/components/TopBar/index.css

@@ -0,0 +1,105 @@
+.bar {
+  background-color: #ffdc61;
+  height: 80px;
+  padding: 5px;
+  font-family: comic sans MS;
+  font-size: 24px;
+  font-weight: bold;
+  position: relative;
+}
+
+.logo {
+  width: 80px;
+  height: 80px;
+  float: left;
+}
+
+.rest {
+  margin-top: 20px;
+  overflow: hidden;
+}
+
+.tekst {
+  width: 200px;
+  float: left;
+}
+
+.iconSearch {
+  width: 35px;
+  float: left;
+}
+
+.inputdiv {
+  width: 70%;
+  float: left;
+  transition: width 1s;
+}
+
+.input {
+  width: 96%;
+  float: left;
+  transition: width 1s;
+}
+
+@media only screen and (max-width: 1400px) {
+  .inputdiv {
+    width: 50%;
+    float: left;
+  }
+
+  .input {
+    width: 76%;
+    float: left;
+  }
+}
+
+@media only screen and (max-width: 870px) {
+    .tekst {
+        display: none;
+      }
+  .iconClose{
+      display: none;
+  }
+  .iconUser {
+    width: 37px !important;
+    float: right;
+  }
+
+  .transfer {
+    margin-left: 10px !important;
+    width: 37px !important;
+    float: right;
+  }
+
+  .UK {
+    margin-left: 10px !important;
+    width: 35px !important;
+    float: right;
+  }
+}
+
+.search {
+  overflow: hidden;
+}
+
+.iconClose {
+  width: 35px;
+  float: left;
+}
+
+.iconUser {
+  width: 47px;
+  float: right;
+}
+
+.transfer {
+  margin-left: 25px;
+  width: 47px;
+  float: right;
+}
+
+.UK {
+  margin-left: 25px;
+  width: 45px;
+  float: right;
+}

src/components/TopBar/index.ts

@@ -1,3 +0,0 @@
-import React, { Component } from "react";
-
-export default class TopBar extends Component {}

src/components/TopBar/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "./index.css";
+import Input from "@material-ui/core/Input";
+import SearchIcon from "@material-ui/icons/Search";
+import CloseIcon from "@material-ui/icons/Close";
+
+export default class TopBar extends React.Component {
+  render() {
+    return (
+      <div className="bar">
+        <img
+          className="logo"
+          alt="logo"
+          src="https://plannaplan.pl/img/logo.svg"
+        />
+        <div className="rest">
+          <div className="tekst"> plan na plan </div>
+          <div className="inputdiv">
+            <div className="iconSearch">
+              <SearchIcon fontSize="large"></SearchIcon>
+            </div>
+            <div className="search">
+              <Input
+                placeholder="Wyszukaj..."
+                inputProps={{ "aria-label": "description" }}
+                className="input"
+              />
+              <div className="iconClose">
+                <CloseIcon fontSize="large"></CloseIcon>
+              </div>
+            </div>
+          </div>
+          <img
+            className="transfer"
+            alt="logo"
+            src="https://plannaplan.pl/img/transfer.png"
+          />
+          <img
+            className="UK"
+            alt="logo"
+            src="https://plannaplan.pl/img/UK.png"
+          />
+          <img
+            className="iconUser"
+            alt="logo"
+            src="https://plannaplan.pl/img/user.svg"
+          />
+        </div>
+      </div>
+    );
+  }
+}