next2

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.11.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1"
   },
   "scripts": {

src/App.js.orig

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+        next
+      </div>
+    );
+  }
+}
+
+export default App;

src/back.js

@@ -0,0 +1,47 @@
+export default [
+    {
+        category: "Одежда",
+        podCategory: [
+            {
+            name: "Женская одежда",
+            clothes: [
+                {   
+                    type: "Нижнее белье",
+                    Underwear: [
+                        {
+                            name: "Носки",
+                            price: 45,
+                            state: true,
+                            description: "очень хрошоие носки",
+                            img: "https://gift2u.com.ua/image/cache/data/PRODUCTS/003-socks/new-winter-2017/007-01-800x800.jpg"
+                        },
+                        {
+                            name: "Носки",
+                            price: 45,
+                            state: true,
+                            description: "очень хрошоие носки",
+                            img: "https://gift2u.com.ua/image/cache/data/PRODUCTS/003-socks/Happy-Socks/003-014-800x800.jpg"
+                        },
+                        {
+                            name: "Носки",
+                            price: 45,
+                            state: true,
+                            description: "очень хрошоие носки",
+                            img: "https://i1.rozetka.ua/goods/2258281/24258087_images_2258281935.jpg"
+                        }
+                    ],
+
+                }
+            ]
+            },
+            {
+                
+            }
+        ]
+    },
+    {
+        category: "Электроника",
+                        
+    }
+];
+

src/components/Header/auth.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+import { Avatar } from 'antd';
+class Auth extends Component {
+    render() {
+        return (
+        <div className="auth">
+            <Link to="/auth" className="link">
+
+                <div className="avatar">
+                    <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
+                </div>
+                <div>
+                    Мой профиль
+                </div>    
+            </Link>    
+        </div>
+        );
+    }
+}
+
+export default Auth;

src/components/Header/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import HeaderLogo from '../Header/logo'
+import SearchLine from '../Header/searchLine'
+import Auth from '../Header/auth'
+import 'antd/dist/antd.css';
+class Header extends Component {
+    render() {
+        return (
+            <div className="header">
+               <HeaderLogo />
+               <SearchLine/>
+               <Auth/>
+            </div>
+        );
+    }
+}
+
+export default Header;

src/components/Header/logo.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import logo from '../../img/logoBazar.png';
+import { Link } from "react-router-dom";
+class HeaderLogo extends Component {
+    render() {
+        return (
+            <div className="logo">
+               <Link to="/logo"><img src={logo} alt="Logo"/></Link> 
+            </div>
+        );
+    }
+}
+
+export default HeaderLogo;

src/components/Header/searchLine.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Input } from 'antd';
+
+const Search = Input.Search;
+
+class SearchLine extends Component {
+    render() {
+        return (
+            <div className="searchLine">
+                <Search className="searchInput"
+                    placeholder="input search text"
+                    onSearch={value => console.log(value)}
+                    enterButton
+                />
+            </div>
+        );
+    }
+}
+
+export default SearchLine;

src/components/LeftMenu/index.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import {
+    Layout, Menu, Icon,
+  } from 'antd';
+  
+  const {
+     Sider
+  } = Layout;
+  const SubMenu = Menu.SubMenu;
+
+class LeftMenu extends Component {
+    state = {
+        collapsed: false,
+      };
+    onCollapse = (collapsed) => {
+        
+        this.setState({ collapsed });
+    }
+    onChange = ()=>{
+        console.log(this);
+    }
+    render() {
+        
+        return (
+        <div >
+            <Layout style={{ minHeight: '100vh' }}>
+                <Sider
+                collapsible
+                collapsed={this.state.collapsed}
+                onCollapse={this.onCollapse}
+                >
+                <div className="logo" />
+                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
+                    <Menu.Item key="1">
+                    <Icon type="pie-chart" />
+                    <span>Option 1</span>
+                    </Menu.Item>
+                    <Menu.Item key="2">
+                    <Icon type="desktop" />
+                    <span>Option 2</span>
+                    </Menu.Item>
+                    <SubMenu
+                    key="sub1"
+                    title={<span><Icon type="user" /><span>Одежда</span></span>}
+                    >
+                    <SubMenu
+                    key="sub6"
+                    title={<span><Icon type="shopping" /><span>Женское белье</span></span>}
+                    >
+                    <Menu.Item key="4"><button onClick={this.onChange}>2332
+        </button></Menu.Item>
+                    <Menu.Item key="5">Alex</Menu.Item>
+                    </SubMenu>
+                    <Menu.Item key="4">Bill</Menu.Item>
+                    <Menu.Item key="5">Alex</Menu.Item>
+                    </SubMenu>
+                    <SubMenu
+                    key="sub2"
+                    title={<span><Icon type="team" /><span>Team</span></span>}
+                    >
+                    <Menu.Item key="6">Team 1</Menu.Item>
+                    <Menu.Item key="8">Team 2</Menu.Item>
+                    </SubMenu>
+                    <Menu.Item key="9">
+                    <Icon type="file" />
+                    <span>File</span>
+                    </Menu.Item>
+                </Menu>
+                </Sider>
+                
+            </Layout>
+      </div>
+        );
+    }
+}
+
+export default LeftMenu;

src/container/App.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import Back from '../back'
+import LeftMenu from '../components/LeftMenu'
+
+class App extends Component {
+  render() {
+    console.log(Back)
+    return (
+      <div className='ras'>
+          <div className='ras1'>
+            <LeftMenu />
+          </div>
+          <div className='ras2'>
+                {
+                  Back[0].podCategory[0].clothes[0].Underwear.map(el=><div className='as'><img className="img" src={el.img} alt='sadasd' /><p>{el.name}</p><p>{el.price}</p></div>)   
+                }
+          </div>
+      </div>
+      
+    );
+  }
+}
+
+export default App;

src/index.css

@@ -12,3 +12,60 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+.logo{
+  
+  width: 20%;
+}
+.header{
+  display:flex;
+  
+}
+.searchLine{
+  width: 60%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  
+}
+.searchInput{
+  width: 80%;
+}
+.auth{
+  width: 20%;
+  display: flex;
+  
+  justify-content: center;
+  align-items: center;
+}
+.avatar{
+  padding: 0 10px;
+}
+.link{
+  display: flex;
+  
+  justify-content: center;
+  align-items: center;
+}
+.ras{
+  display: flex;
+}
+.ras1{
+  display: flex;
+  width: 20%;
+}
+.ras2{
+  display: flex;
+  width: 300px;
+  height: 300px;
+}
+.as{
+  border: 4px outset;
+  border-radius: 5px;
+  margin: 5px;
+}
+.img{
+  width: 250px;
+  height: 250px;
+  
+}

src/index.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter } from "react-router-dom";
+import Router from "./router";
+ReactDOM.render(
+    <BrowserRouter>
+            <Router />
+    </BrowserRouter>
+,
+document.getElementById("root")
+);
 
-ReactDOM.render(<App />, 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'
+
+export default () => (
+    <div>
+        <Header/>
+	        <Switch>
+                <Route path="/" exact component={App} />
+	        </Switch>
+    </div>
+);