side-nav

src/App.scss

@@ -3,5 +3,5 @@
 	margin: 0;
 }
 #app {
-	color: #fff;
+	// color: #fff;
 }

src/component/h-breadcrumb/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Breadcrumb, Icon } from 'antd';
+
+export default class HBreadcrumb extends React.Component {
+  render() {
+    return (
+      <div>
+        <Breadcrumb>
+          <Breadcrumb.Item href="">
+            <Icon type="home" />
+          </Breadcrumb.Item>
+          <Breadcrumb.Item href="">
+            <Icon type="user" />
+            <span>Application List</span>
+          </Breadcrumb.Item>
+          <Breadcrumb.Item>Application</Breadcrumb.Item>
+        </Breadcrumb>
+      </div>
+    );
+  }
+}

src/component/layout/index.jsx

@@ -4,31 +4,28 @@ const { Header, Footer, Sider, Content } = Layout;
 import './index.scss';
 import TopNav from 'component/top-nav/index.jsx';
 import SideNav from 'component/side-nav/index.jsx';
+import HBreadcrumb from 'component/h-breadcrumb/index.jsx';
 
 export default class HLayout extends React.Component {
-	render() {
-		return (
-			<div id="wrapper">
-				<Layout theme={'light'}>
-					<Sider
-						style={{
-							overflow: 'auto',
-							height: '100vh',
-							position: 'fixed',
-							left: 0
-						}}
-					>
-						<SideNav />
-					</Sider>
-					<Layout>
-						<Header>
-							<TopNav />
-						</Header>
-						<Content>{this.props.children}</Content>
-						<Footer>Footer</Footer>
-					</Layout>
-				</Layout>
-			</div>
-		);
-	}
+  render() {
+    return (
+      <Layout style={{ minHeight: '100vh' }}>
+        <Sider
+          width={260}
+        >
+          <SideNav />
+        </Sider>
+        <Layout>
+          <Header>
+            <TopNav />
+          </Header>
+          <Content>
+            <HBreadcrumb />
+            {this.props.children}
+          </Content>
+          <Footer>Footer</Footer>
+        </Layout>
+      </Layout>
+    );
+  }
 }

src/component/layout/index.scss

@@ -0,0 +1,3 @@
+.ant-layout-header {
+  text-align: right;
+}

src/component/side-nav/index.jsx

@@ -7,61 +7,98 @@ export default class SideNav extends React.Component {
 		super(props);
 		this.state = {
 			theme: 'dark',
-			current: '0'
+			current: '0',
+			myTextInput: ''
 		};
 	}
 	handleClick(e) {
-		console.log('click ', e);
+		console.log(e);
 		this.setState({
 			current: e.key
 		});
 	}
+	submenuClick(e) {
+		// this.setState({
+		// 	current: e.key
+		// });
+	}
+	componentDidMount() {
+		this.setState({
+			current: '1'
+		});
+	}
+	// print(){
+	// 	console.log(31);
+	// }
+	// 组件的props发生变化，触发该函数
+	// componentDidUpdate(prevProps) {
+	// 	// 监听到数据变化，设置路由数据
+	// 	this.print();
+	// 	// console.log(this.state.current);
+	// }
 	render() {
 		return (
 			<div id="SideNav">
-				<div className="logo" />
+				<div className="logo">
+					<span>HAPPY</span> MMALL
+				</div>
 				<Menu
 					theme={this.state.theme}
 					onClick={e => {
 						this.handleClick(e);
 					}}
-					defaultOpenKeys={['0']}
+					style={{ width: 256 }}
+					defaultSelectedKeys={['1']}
 					selectedKeys={[this.state.current]}
 					mode="inline"
 				>
-					<Menu.Item key="0">
-						<Icon type="pie-chart" />
-						<span>Option 1</span>
+					<Menu.Item key="1">
+						<Icon type="dashboard" />
+						<span>首页</span>
 					</Menu.Item>
 					<SubMenu
-						key="sub1"
+						key="2"
+						onTitleClick={e => {
+							this.submenuClick(e);
+						}}
 						title={
 							<span>
-								<Icon type="mail" />
-								<span>Navigation One</span>
+								<Icon type="unordered-list" />
+								<span>商品</span>
 							</span>
 						}
 					>
-						<Menu.Item key="1">Option 1</Menu.Item>
-						<Menu.Item key="2">Option 2</Menu.Item>
-						<Menu.Item key="3">Option 3</Menu.Item>
-						<Menu.Item key="4">Option 4</Menu.Item>
+						<Menu.Item key="2">商品管理</Menu.Item>
+						<Menu.Item key="3">品类管理</Menu.Item>
 					</SubMenu>
 					<SubMenu
-						key="sub2"
+						key="4"
+						onTitleClick={e => {
+							this.submenuClick(e);
+						}}
 						title={
 							<span>
 								<Icon type="appstore" />
-								<span>Navigtion Two</span>
+								<span>订单</span>
+							</span>
+						}
+					>
+						<Menu.Item key="4">订单管理</Menu.Item>
+					</SubMenu>
+
+					<SubMenu
+						key="5"
+						onTitleClick={e => {
+							this.submenuClick(e);
+						}}
+						title={
+							<span>
+								<Icon type="user" />
+								<span>用户</span>
 							</span>
 						}
 					>
-						<Menu.Item key="5">Option 5</Menu.Item>
-						<Menu.Item key="6">Option 6</Menu.Item>
-						<SubMenu key="sub3" title="Submenu">
-							<Menu.Item key="7">Option 7</Menu.Item>
-							<Menu.Item key="8">Option 8</Menu.Item>
-						</SubMenu>
+						<Menu.Item key="5">用户列表</Menu.Item>
 					</SubMenu>
 				</Menu>
 			</div>

src/component/side-nav/index.scss

@@ -1,10 +1,20 @@
 #SideNav {
-	// height: 100vh;
-	// width: 256px;
-	// overflow-y: scroll;
-	.logo {
-		height: 32px;
-		background: rgba(255, 255, 255, 0.2);
-		margin: 16px;
-	}
+    // height: 100vh;
+    // width: 256px;
+    // overflow-y: scroll;
+    .logo {
+        color: #fff;
+        width: 260px;
+        text-align: center;
+        height: 60px;
+        font-size: 30px;
+        font-weight: 700;
+        text-transform: uppercase;
+        line-height: 60px;
+        background: #32323a;
+        outline: none;
+        span {
+            color: #2dafcb;
+        }
+    }
 }

src/component/top-nav/index.jsx

@@ -1,14 +1,23 @@
 import React from 'react';
-import { Menu, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';
 import './index.scss';
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
+const menu = (
+	<Menu>
+		<Menu.Item>
+			<Icon type="logout" />
+			退出登录
+		</Menu.Item>
+	</Menu>
+);
 export default class TopNav extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
 			theme: 'dark',
-			current: 'mail'
+			current: 'mail',
+			userName: 'admin'
 		};
 	}
 	handleClick() {
@@ -17,16 +26,23 @@ export default class TopNav extends React.Component {
 			current: e.key
 		});
 	}
+	print() {
+		console.log(29);
+	}
 	render() {
 		return (
-			<div id="TopNav">
-				<div className="logo" />
-				<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }}>
-					<Menu.Item key="1">nav 1</Menu.Item>
-					<Menu.Item key="2">nav 2</Menu.Item>
-					<Menu.Item key="3">nav 3</Menu.Item>
-				</Menu>
-			</div>
+			<Dropdown
+				overlay={menu}
+				onClick={e => {
+					this.print(e);
+				}}
+			>
+				<span style={{ color: 'white' }}>
+					<Icon type="user" />
+					&nbsp; 欢迎，{this.state.userName}
+					<Icon type="down" />
+				</span>
+			</Dropdown>
 		);
 	}
 }

src/component/top-nav/index.scss

@@ -1,3 +1,3 @@
 #TopNav{
-	margin-left: 350px;
+	// margin-left: 350px;
 }

src/page/user\t/index.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+export default class User extends React.Component {
+  render() {
+    return <div>User</div> ;
+  }
+}