add header

src/App.css

@@ -1,33 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.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,107 +1,26 @@
-import React from "react";
-import logo from "./logo.svg";
-import "./App.css";
+import React, { Component } from "react";
 
-import * as styles from "./mod.module.css";
-// const Children = props => {
-// 	console.log("props.", props);
-// 	return props.flag ? <div>Hello</div> : <div>World</div>;
-// };
+import Layuot from "./layout";
+import Header from "./header";
+import HideBlock from "./hideBlock";
+import Button from "./button";
 
-const Children2 = props => {
-	console.log("props.", props);
-	return props.children;
-};
+export class App extends Component {
+	state = { showBlock: false };
 
-const Aux = props => props.children;
+	handler = () => this.setState(prevState => ({ showBlock: !prevState.showBlock }));
 
-const Children = props => {
-	console.log(props);
-	return (
-		<>
-			<h4>Hello</h4>
-			<p>World</p>
-		</>
-	);
-};
+	render() {
+		const { showBlock } = this.state;
+		// return (
+		// 	<div className="container">
+		// 		<Header toggle={this.handler} />
+		// 		{showBlock && <HideBlock />}
 
-function SuccessMessage() {
-	return <Children type="success" header="Поздравляем!" text="Вы успешно зарегистрированы" />;
-}
-
-function SuccessMessage2() {
-	const props = { type: "fail", header: "Не поздравляем!", text: "Вы успешно НЕ зарегистрированы" };
-	return <Children {...props} type="success" />;
-}
+		// 		<Button text={!showBlock ? "show" : "hide"} onClick={this.handler} />
+		// 	</div>
+		// );
 
-const random = () => {
-	const num = Math.floor(Math.random() * 10 + 1);
-
-	switch (num) {
-		case 3: {
-			return "its 3";
-		}
-		case 6: {
-			return "its 6";
-		}
-		case 8: {
-			return "its 8";
-		}
-		default:
-			return " default";
+		return <Layuot footer>{showBlock && <HideBlock />}</Layuot>;
 	}
-};
-
-const MyButton = ({ text, ...rest }) => <button {...rest}>{text}</button>;
-
-function User(props) {
-	return <li>{props.user.name}</li>;
-}
-
-function UserList() {
-	const users = [{ id: 1, name: "Вася", ban: true }, { id: 2, name: "Петя", ban: false }];
-	return (
-		<ul>
-			{users.map(
-				user =>
-					!user.ban && (
-						<React.Fragment key={user.id}>
-							<User user={user} />
-						</React.Fragment>
-					)
-			)}
-		</ul>
-	);
 }
-const users = [{ id: 1, name: "Вася" }, { id: 2, name: "Петя" }];
-function App() {
-	const lol = users.map(user => (
-		// <User key={user.id} user={user} />
-		<li>{user.name}</li>
-	));
-	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
-					{/* <Children foo={random()} foo2={`asdsada`} /> */}
-					<Children />
-					{/* <SuccessMessage />
-					<SuccessMessage2 /> */}
-					{/* <Children2> */}
-					{/* <SuccessMessage2 /> */}
-					{/* </Children2> */}
-					<UserList />
-					<MyButton text="Click" type="submit" disabled />
-				</a>
-			</header>
-			<div className={styles.dude}>Hello its my first meet with react</div>
-		</div>
-	);
-}
-
-export default App;

src/button.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default ({ text, ...rest }) => <button {...rest}>{text}</button>;

src/header.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+import Button from "./button";
+const liArr = [
+	{ text: "123", id: 1 },
+	{ text: "1s23", id: 2 },
+	{ text: "12asd3", id: 3 },
+	{ text: "12s23", id: 4 },
+	{ text: "222", id: 5 },
+	{ text: "123as", id: 6 },
+	{ text: "123asd", id: 7 },
+	{ text: "123asd", id: 8 },
+	{ text: "12sss3", id: 9 },
+	{ text: "12aa3", id: 10 }
+];
+
+export default ({ toggle }) => (
+	<header className="header">
+		<div className="header__left-wrapper">
+			<div className="header__logo-box">logo</div>
+			<nav className="header__nav">
+				<ul className="header__list">
+					{liArr.map(el => (
+						<li className="header__item" key={el.id}>
+							{el.text}
+						</li>
+					))}
+				</ul>
+			</nav>
+		</div>
+		<Button className="header__log-in" text="log in" onClick={toggle} />
+	</header>
+);

src/hideBlock.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default () => <div className="hide">I am hide</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.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+
+import { App } from "./App";
 import * as serviceWorker from "./serviceWorker";
 
 import "./style.scss";

src/layout.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+import Header from "./header";
+
+export default ({ header = true, children, footer }) => {
+	return (
+		<div className="conteiner">
+			{header && <Header />}
+
+			<div className="main">{children}</div>
+
+			{footer && <div>I am footer</div>}
+		</div>
+	);
+};

src/mod.module.css

@@ -1,11 +0,0 @@
-.dude {
-	color: blue;
-}
-
-.success {
-	background-color: green;
-}
-
-.fail {
-	background-color: red;
-}

src/style.scss

@@ -1,3 +1,51 @@
-.foo {
-	color: green;
+body {
+	margin: 0;
+}
+
+.container {
+	width: 100vw;
+}
+
+.header {
+	width: 100%;
+	padding: 5px;
+	display: flex;
+	justify-content: space-between;
+
+	&__left-wrapper {
+		display: flex;
+	}
+
+	&__logo-box {
+	}
+
+	&__nav {
+	}
+
+	&__list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+
+		display: flex;
+	}
+
+	&__item {
+		padding: 0;
+		&:not(:last-child) {
+			margin-right: 10px;
+		}
+	}
+
+	&__log-in {
+		padding: 5px;
+		font-size: 16px;
+		margin-right: 40px;
+	}
+}
+
+.hide {
+	width: 550px;
+	height: 550px;
+	background-color: #eee;
 }