topbar

src/App.scss

@@ -1,38 +1,4 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+body {
+    margin: 0px;
+    padding: 0px;
+  }

src/App.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import logo from "./logo.svg";
+import TopBar from "./components/TopBar/index"
 import "./App.scss";
 
 function App() {
 	return (
 		<div className="App">
-			<h1>Hello World</h1>
+			<TopBar></TopBar>
 		</div>
 	);
 }

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>
+    );
+  }
+}

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import App from "./App";
 
 ReactDOM.render(