header

package.json

@@ -3,9 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "node-sass": "^4.11.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.1.1",
+    "rebuild": "^0.1.2",
+    "redux": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,32 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.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);
-  }
-}

src/App.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
-  }
-}
-
-export default App;

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

src/container/App.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+
+      </div>
+    );
+  }
+}
+
+export default App;

src/index.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import Router from "./router";
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import "./style/index.scss";
+
+ReactDOM.render(
+	<BrowserRouter>
+			<Router />
+	</BrowserRouter>,
+	document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/router.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import App from "./container/App"
+import Header from "./components/header/header"
+
+
+export default () => (
+	<div className="container">
+		<Header />
+		<Switch>
+			<Route path="/" exact component={App} />
+		</Switch>
+	</div>
+);

src/style/abstracts/_variables.scss

@@ -0,0 +1,18 @@
+$color-white: #fff;
+$color-red: #f00;
+$color-red-dark: #b40000;
+$color-yellow: #f5a623;
+$color-green: #0ea500;
+$color-blue: #008ff7;
+$color-blue-light-dark: #4a90e2;
+$color-blue-dark: #29336f;
+$color-blue-light: #eaf1f9;
+$color-brown: #4c4c4c;
+$color-grey: #51606a;
+$color-grey-light: #999999;
+$color-grey-lighter: #d8d8d8;
+$color-grey-the-lightest: #f9fbfd;
+$color-grey-transparent: rgba(247, 249, 251, 0.7);
+$color_lightsteelblue: #B0C4DE;
+
+

src/style/base/_base.scss

@@ -0,0 +1,6 @@
+a:hover {
+	text-decoration: none;
+}
+a{
+    text-decoration: none;
+}

src/style/header/_header.scss

@@ -0,0 +1,32 @@
+.header {
+	background-color: $color_lightsteelblue;
+	padding: 2rem;
+
+	display: flex;
+	
+	align-items: center;
+
+	&__nav {
+		margin-right: 1rem;
+	}
+	&__nav-item {
+		padding: 2rem 2rem;
+		margin: 1rem;
+		transition: all 2s;
+		color: aliceblue;
+		&:hover {
+			background-color: $color-blue;
+			z-index: 1;
+			border-radius: 70px;
+		}
+	}
+	&__input_s{
+		margin: 0  15px 0 auto;
+	}
+	&__profile{
+		height: 50px;
+		border-radius: 50%;
+	}
+}
+
+

src/style/index.scss

@@ -0,0 +1,5 @@
+
+
+@import "abstracts/variables";
+@import "header/header";
+@import "base/base";