left menu

package-lock.json

@@ -5669,7 +5669,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5687,11 +5688,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5709,7 +5712,8 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -5841,17 +5845,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5868,6 +5875,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5951,6 +5959,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6074,6 +6083,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }

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/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import {Switch, Route} from 'react-router-dom';
 import HeaderLogo from '../Header/logo'
 import SearchLine from '../Header/searchLine'
 import Auth from '../Header/auth'

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

@@ -1,12 +1,23 @@
 import React, { Component } from 'react';
-import Header from '../components/Header'
+
+import Back from '../back'
+import LeftMenu from '../components/LeftMenu'
 
 class App extends Component {
   render() {
+    console.log(Back)
     return (
-      <div>
-        
+      <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>
+      
     );
   }
 }

src/index.css

@@ -46,4 +46,26 @@ code {
   
   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,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from '../src/container/App';
 import * as serviceWorker from './serviceWorker';
 import { BrowserRouter } from "react-router-dom";
 import Router from "./router";