1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React, { useState } from "react";
import { Layout, Menu } from "antd";
import {
DesktopOutlined,
PieChartOutlined,
TeamOutlined,
SearchOutlined,
FileSearchOutlined,
CommentOutlined,
} from "@ant-design/icons";
import { Link } from "react-router-dom";
const { Sider } = Layout;
const { SubMenu } = Menu;
export default function App() {
const [collapsed, setCollapsed] = useState(true);
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
};
return (
<>
<div
style={{
mixHeight: 360,
backgroundColor: "#001529",
overflowY: "scroll",
}}
>
<Sider
theme="dark"
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
>
<Menu
theme="dark"
defaultSelectedKeys={["1"]}
// defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
<Link to={"/"}>เริ่มต้นใช้งาน</Link>
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
<Link to={"/register"}>ลงทะเบียนร้านซ่อม</Link>
</Menu.Item>
<SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
<Menu.Item key="8" icon={<SearchOutlined />}>
<Link to={"/search"}>ค้นหาร้านซ่อม</Link>
</Menu.Item>
<Menu.Item key="6" icon={<FileSearchOutlined />}>
<Link to={"/status"}>เช็คสถานะการซ่อม</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item>
</Menu>
</Sider>
</div>
</>
);
}