💄Dashboard

noeypatt · Apr 25, 2020 · f98dcdf · f98dcdf · vercel · Apr 25, 2020
1 parent c47fbc7
commit f98dcdf
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 75 deletions.
diff --git a/components/layout/dashboard.js b/components/layout/dashboard.js
@@ -40,93 +40,76 @@
 //     )
 // }
 // export default Dashboard
-
+import React, { useState } from 'react';
 import { Layout, Menu } from 'antd';
 import {
-  MenuUnfoldOutlined,
-  MenuFoldOutlined,
-  UserOutlined,
-  VideoCameraOutlined,
-  UploadOutlined,
+    MenuUnfoldOutlined,
+    MenuFoldOutlined,
+    UserOutlined,
+    VideoCameraOutlined,
+    UploadOutlined,
 } from '@ant-design/icons';
 
 const { Header, Sider, Content } = Layout;
 
-class Dashboard extends React.Component {
-  state = {
-    collapsed: false,
-  };
+const Dashboard = () => {
+
+
+    const [sidebar, setSidebar] = useState(
+        [
+            { name: "ข้อมูลทั่วไป", href: "/main" },
+            { name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
+            { name: "ข้อมูลด้านสังคม", href: "/main/social" },
+            { name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
+            { name: "ข้อมูลด้านการช่วยเหลือ", href: "/main/service" },
+        ]
+    )
+
+    const [collapsed, setCollapsed] = useState(false)
+
+
+    const toggle = () => {
+
+        setCollapsed(!collapsed)
 
-  toggle = () => {
-    this.setState({
-      collapsed: !this.state.collapsed,
-    });
-  };
+    }
 
-  render() {
     return (
-      <Layout>
-        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
-          <div className="logo" />
-          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
-            <Menu.Item key="1">
-              <UserOutlined />
-              <span>nav 1</span>
-            </Menu.Item>
-            <Menu.Item key="2">
-              <VideoCameraOutlined />
-              <span>nav 2</span>
-            </Menu.Item>
-            <Menu.Item key="3">
-              <UploadOutlined />
-              <span>nav 3</span>
-            </Menu.Item>
-          </Menu>
-        </Sider>
-        <Layout className="site-layout">
-          <Header className="site-layout-background" style={{ padding: 0 }}>
-            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
-              className: 'trigger',
-              onClick: this.toggle,
-            })}
-          </Header>
-          <Content
-            className="site-layout-background"
-            style={{
-              margin: '24px 16px',
-              padding: 24,
-              minHeight: 280,
-            }}
-          >
-            Content
+        <Layout>
+            <Sider trigger={null} collapsible collapsed={collapsed}>
+                <div className="logo" />
+                <Menu defaultSelectedKeys={['1']}>
+                    {
+                        sidebar.map((item, index) => (
+                            <Menu.Item key={index}>
+                                <UserOutlined />
+                                <span>{item.name}</span>
+                            </Menu.Item>
+                        ))
+                    }
+                </Menu>
+            </Sider>
+            <Layout className="site-layout">
+                <Header className="site-layout-background" style={{ padding: 0 }}>
+                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+                        className: 'trigger',
+                        onClick: toggle,
+                    })}
+                </Header>
+                <Content
+                    className="site-layout-background"
+                    style={{
+                        margin: '24px 16px',
+                        padding: 24,
+                        minHeight: 280,
+                    }}
+                >
+                    Content
           </Content>
+            </Layout>
         </Layout>
-      </Layout>
     );
-  }
 }
 
-export default Dashboard
-
-// ReactDOM.render(<SiderDemo />, mountNode);
-// #components-layout-demo-custom-trigger .trigger {
-//   font-size: 18px;
-//   line-height: 64px;
-//   padding: 0 24px;
-//   cursor: pointer;
-//   transition: color 0.3s;
-// }
-
-// #components-layout-demo-custom-trigger .trigger:hover {
-//   color: #1890ff;
-// }
-
-// #components-layout-demo-custom-trigger .logo {
-//   height: 32px;
-//   background: rgba(255, 255, 255, 0.2);
-//   margin: 16px;
-// }
 
-// .site-layout .site-layout-background {
-//   background: #fff;
-// }
+export default Dashboard
diff --git a/styles/base.scss b/styles/base.scss
@@ -12,6 +12,7 @@
 @import "./index/contact.scss";
 
 //Main
+@import "./dashboard.scss";
 @import "./main.scss";
 @import "./chart.scss";
 @import "./hamburgers.scss";

diff --git a/styles/dashboard.scss b/styles/dashboard.scss
@@ -0,0 +1,35 @@
+#components-layout-demo-custom-trigger .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+    color: #1890ff;
+}
+
+#components-layout-demo-custom-trigger .logo {
+    height: 32px;
+    margin: 16px;
+}
+
+.site-layout .site-layout-background {
+    background: #fff;
+}
+
+.ant-menu {
+    display: flex;
+    flex-direction: column;
+}
+.ant-layout-header {
+    display: flex;
+    align-items: center;
+    padding: 1rem !important;
+}
+
+.ant-menu-inline-collapsed > .ant-menu-item {
+    display: flex;
+    justify-content: center;
+}