Skip to content

Commit e852bf4

Browse files
sametkabaysametkabay
committed
Create layout
1 parent 4891376 commit e852bf4

File tree

3 files changed

+112
-27
lines changed

3 files changed

+112
-27
lines changed

‎reactjs/src/images/abp-logo-long.png

5.58 KB
Loading

‎reactjs/src/scenes/Layout/index.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,26 @@
1515
background: rgba(255, 255, 255, 0.2);
1616
margin: 16px;
1717
}
18+
19+
/* Let's get this party started */
20+
::-webkit-scrollbar {
21+
width: 12px;
22+
}
23+
24+
/* Track */
25+
::-webkit-scrollbar-track {
26+
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
27+
-webkit-border-radius: 10px;
28+
border-radius: 10px;
29+
}
30+
31+
/* Handle */
32+
::-webkit-scrollbar-thumb {
33+
-webkit-border-radius: 10px;
34+
border-radius: 10px;
35+
background: #455A64;
36+
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
37+
}
38+
::-webkit-scrollbar-thumb:window-inactive {
39+
background: #455A64;
40+
}

‎reactjs/src/scenes/Layout/index.tsx

Lines changed: 89 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as React from "react";
2-
import { Layout, Menu, Icon } from "antd";
2+
import { Layout, Menu, Icon, Avatar, Col } from "antd";
33
import "./index.css";
44
import { Route, Switch, withRouter } from 'react-router';
55
import Logins from '../Login';
66
import Users from '../Users';
77
import Tenants from '../Tenants';
88
import Rules from '../Rules';
9+
import SubMenu from 'antd/lib/menu/SubMenu';
10+
import AbpLogo from "src/images/abp-logo-long.png";
911

1012
const { Header, Sider, Content } = Layout;
1113

@@ -19,51 +21,111 @@ class LayoutComponent extends React.Component<any> {
1921
collapsed: !this.state.collapsed,
2022
});
2123
}
24+
onCollapse = (collapsed: any) => {
25+
this.setState({ collapsed });
26+
}
2227

2328
render() {
2429
return (
25-
<Layout>
30+
31+
32+
<Layout style={{ minHeight: '100vh' }}>
2633
<Sider
27-
trigger={null}
34+
width={256}
2835
collapsible
2936
collapsed={this.state.collapsed}
37+
onCollapse={this.onCollapse}
3038
>
31-
<div className="logo" />
39+
{this.state.collapsed ? <Col style={{ textAlign: "center", marginTop: 15, marginBottom: 10 }}>
40+
<Avatar shape="square" style={{ height: 27, width: 64 }} src={AbpLogo} />
41+
</Col> : <Col style={{ textAlign: "center", marginTop: 15, marginBottom: 10 }}>
42+
<Avatar shape="square" style={{ height: 54, width: 128 }} src={AbpLogo} />
43+
</Col>}
44+
3245
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
33-
<Menu.Item key="1">
46+
<Menu.Item onClick={() => this.props.history.push("/")} key="1">
3447
<Icon type="home" />
35-
<span onClick={() => this.props.history.push("/")}>Home</span>
48+
<span>Home</span>
3649
</Menu.Item>
37-
<Menu.Item key="2">
38-
<Icon type="video-camera" />
39-
<span onClick={() => this.props.history.push("/tenants")}>Tenants</span>
50+
<Menu.Item onClick={() => this.props.history.push("/tenants")} key="2">
51+
<Icon type="appstore" />
52+
<span>Tenants</span>
4053
</Menu.Item>
41-
<Menu.Item key="3">
54+
<Menu.Item onClick={() => this.props.history.push("/users")} key="3">
4255
<Icon type="user" />
43-
<span onClick={() => this.props.history.push("/users")}>Users</span>
56+
<span>Users</span>
57+
</Menu.Item>
58+
<Menu.Item onClick={() => this.props.history.push("/rules")} key="4">
59+
<Icon type="tags" />
60+
<span>Rules</span>
4461
</Menu.Item>
45-
<Menu.Item key="4">
46-
<Icon type="upload" />
47-
<span onClick={() => this.props.history.push("/rules")}>Rules</span>
62+
<Menu.Item onClick={() => this.props.history.push("/about")} key="5">
63+
<Icon type="info-circle" />
64+
<span>About</span>
4865
</Menu.Item>
66+
<SubMenu
67+
key="6"
68+
title={<span><Icon type="bars" /><span>Multi Level Menu</span></span>}
69+
>
70+
<SubMenu
71+
key="7"
72+
title={<span><Icon type="bars" /><span>ASP.NET Boilerplate</span></span>}
73+
>
74+
<Menu.Item key="8">
75+
<span>Home</span>
76+
</Menu.Item>
77+
<Menu.Item key="9">
78+
<span>Templates</span>
79+
</Menu.Item>
80+
<Menu.Item key="10">
81+
<span>Samples</span>
82+
</Menu.Item>
83+
<Menu.Item key="11">
84+
<span>Documents</span>
85+
</Menu.Item>
86+
</SubMenu>
87+
<SubMenu
88+
key="12"
89+
title={<span><Icon type="bars" /><span>ASP.NET Zero</span></span>}>
90+
<Menu.Item key="13">
91+
<span>Home</span>
92+
</Menu.Item>
93+
<Menu.Item key="14">
94+
<span>Description</span>
95+
</Menu.Item>
96+
<Menu.Item key="15">
97+
<span>Features</span>
98+
</Menu.Item>
99+
<Menu.Item key="16">
100+
<span>Pricing</span>
101+
</Menu.Item>
102+
<Menu.Item key="17">
103+
<span>Faq</span>
104+
</Menu.Item>
105+
</SubMenu>
106+
</SubMenu>
49107
</Menu>
108+
50109
</Sider>
51110
<Layout>
52-
<Header style={{ background: '#fff', padding: 0 }}>
53-
<Icon
54-
className="trigger"
55-
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
56-
onClick={this.toggle}
57-
/>
111+
<Header style={{ background: '#fff', minHeight: 83, padding: 0 }} >
112+
<Col style={{ marginTop: 10, marginRight: 10, textAlign: "right" }}>
113+
<Avatar size={64} icon="user" />
114+
</Col>
58115
</Header>
59-
<Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
60-
<Switch>
61-
<Route path="/login" component={Logins} />
62-
<Route path="/users" component={Users} />
63-
<Route path="/tenants" component={Tenants} />
64-
<Route path="/rules" component={Rules} />
65-
</Switch>
116+
<Content style={{ margin: '0 16px' }}>
117+
<div style={{ marginTop: 24, padding: 24, background: '#fff', minHeight: 360 }}>
118+
<Switch>
119+
<Route path="/login" component={Logins} />
120+
<Route path="/users" component={Users} />
121+
<Route path="/tenants" component={Tenants} />
122+
<Route path="/rules" component={Rules} />
123+
</Switch>
124+
</div>
66125
</Content>
126+
<Layout.Footer style={{ textAlign: 'center' }}>
127+
Asp.Net Boilerplate - React ©2018 <a href="https://github.com/ryoldash/module-zero-core-template">Github Page</a>
128+
</Layout.Footer>
67129
</Layout>
68130
</Layout>
69131
);

0 commit comments

Comments
 (0)