Skip to content

Commit 3b9f04c

Browse files
dudkinoxdudkinox
authored
Merge pull request #37 from dudkinox/button-light-dark-mode
2 parents fbe83a1 + bd177f1 commit 3b9f04c

File tree

3 files changed

+160
-64
lines changed

3 files changed

+160
-64
lines changed

‎src/common/Sidebar.tsx‎

Lines changed: 69 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
1-
import { useContext } from "react";
1+
import { useContext, useState, useEffect } from "react";
22
import { AppContext } from "../contexts";
33
import { PathEnum } from "../enum/path.enum";
4+
import { ThemesEnum } from "../enum/mode.enum";
45

56
export default function SidebarCommon() {
67
const { pathUrl, isLogin, majorUser } = useContext(AppContext);
8+
const [theme, setTheme] = useState<ThemesEnum>(ThemesEnum.DARK);
9+
10+
useEffect(() => {
11+
const savedTheme = localStorage.getItem("theme") as ThemesEnum | null;
12+
if (savedTheme) {
13+
setTheme(savedTheme);
14+
document.body.classList.toggle("dark-mode", savedTheme === ThemesEnum.DARK);
15+
document.body.classList.toggle("light-mode", savedTheme === ThemesEnum.LIGHT);
16+
}
17+
}, []);
18+
19+
const toggleTheme = () => {
20+
const newTheme = theme === ThemesEnum.DARK ? ThemesEnum.LIGHT : ThemesEnum.DARK;
21+
setTheme(newTheme);
22+
localStorage.setItem("theme", newTheme);
23+
document.body.classList.toggle("dark-mode", newTheme === ThemesEnum.DARK);
24+
document.body.classList.toggle("light-mode", newTheme === ThemesEnum.LIGHT);
25+
};
726

827
return (
9-
<aside className="main-sidebar sidebar-dark-primary elevation-4">
28+
<aside className={`main-sidebar ${theme === "dark" ? "sidebar-dark-primary" : "sidebar-light-primary"} elevation-4`}>
1029
<div className="sidebar">
30+
1131
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
1232
<div className="image">
1333
<img
@@ -23,6 +43,7 @@ export default function SidebarCommon() {
2343
</a>
2444
</div>
2545
</div>
46+
2647
{isLogin !== "" && (
2748
<nav className="mt-2">
2849
<ul
@@ -35,28 +56,28 @@ export default function SidebarCommon() {
3556
<li className="nav-item">
3657
<a
3758
href="/"
38-
className={`nav-link ${
39-
pathUrl === PathEnum.DASHBOARD ? "active" : ""
40-
}`}
59+
className={`nav-link ${pathUrl === PathEnum.DASHBOARD ? "active" : ""
60+
}`}
4161
>
4262
<i className="nav-icon fas fa-home" />
4363
<p>หน้าเเรก</p>
4464
</a>
4565
</li>
4666
) : null}
67+
4768
{majorUser === "admin" ? (
4869
<li className="nav-item">
4970
<a
5071
href={PathEnum.DOCUMENT}
51-
className={`nav-link ${
52-
pathUrl === PathEnum.DOCUMENT ? "active" : ""
53-
}`}
72+
className={`nav-link ${pathUrl === PathEnum.DOCUMENT ? "active" : ""
73+
}`}
5474
>
5575
<i className="nav-icon fas fa-file-import" />
5676
<p>นำเข้าข้อมูล</p>
5777
</a>
5878
</li>
5979
) : null}
80+
6081
<li className="nav-item menu-open">
6182
<a href="#" className="nav-link">
6283
<i className="nav-icon fas fa-tachometer-alt" />
@@ -69,9 +90,7 @@ export default function SidebarCommon() {
6990
<li className="nav-item">
7091
<a
7192
href={PathEnum.STOCK_KAY}
72-
className={`nav-link ${
73-
pathUrl === PathEnum.STOCK_KAY ? "active" : ""
74-
}`}
93+
className={`nav-link ${pathUrl === PathEnum.STOCK_KAY ? "active" : ""}`}
7594
>
7695
<i className="far fa-circle nav-icon" />
7796
<p>ขาย</p>
@@ -80,9 +99,7 @@ export default function SidebarCommon() {
8099
<li className="nav-item">
81100
<a
82101
href={PathEnum.STOCK_BYE}
83-
className={`nav-link ${
84-
pathUrl === PathEnum.STOCK_BYE ? "active" : ""
85-
}`}
102+
className={`nav-link ${pathUrl === PathEnum.STOCK_BYE ? "active" : ""}`}
86103
>
87104
<i className="far fa-circle nav-icon" />
88105
<p>ซื้อ</p>
@@ -91,9 +108,7 @@ export default function SidebarCommon() {
91108
<li className="nav-item">
92109
<a
93110
href={PathEnum.STOCK_EQUIPMENT}
94-
className={`nav-link ${
95-
pathUrl === PathEnum.STOCK_EQUIPMENT ? "active" : ""
96-
}`}
111+
className={`nav-link ${pathUrl === PathEnum.STOCK_EQUIPMENT ? "active" : ""}`}
97112
>
98113
<i className="far fa-circle nav-icon" />
99114
<p>อุปกรณ์</p>
@@ -102,69 +117,63 @@ export default function SidebarCommon() {
102117
<li className="nav-item">
103118
<a
104119
href={PathEnum.STOCK_INSTALLMENT_PAYMENT}
105-
className={`nav-link ${
106-
pathUrl === PathEnum.STOCK_INSTALLMENT_PAYMENT
107-
? "active"
108-
: ""
109-
}`}
120+
className={`nav-link ${pathUrl === PathEnum.STOCK_INSTALLMENT_PAYMENT ? "active" : ""}`}
110121
>
111122
<i className="far fa-circle nav-icon" />
112123
<p>ผ่อน</p>
113124
</a>
114125
</li>
115-
<li className="nav-item">
116-
<a
117-
href={PathEnum.STOCK_INSTALLMENT_SUMMARY}
118-
className={`nav-link ${
119-
pathUrl === PathEnum.STOCK_INSTALLMENT_SUMMARY
120-
? "active"
121-
: ""
122-
}`}
123-
>
124-
<i className="far fa-circle nav-icon" />
125-
<p>สรุป</p>
126-
</a>
127-
</li>
126+
{majorUser === "admin" && (
127+
<li className="nav-item">
128+
<a
129+
href={PathEnum.STOCK_INSTALLMENT_SUMMARY}
130+
className={`nav-link ${pathUrl === PathEnum.STOCK_INSTALLMENT_SUMMARY ? "active" : ""}`}
131+
>
132+
<i className="far fa-circle nav-icon" />
133+
<p>สรุป</p>
134+
</a>
135+
</li>
136+
)}
128137
</ul>
129138
</li>
130139

131140
<li className="nav-item">
132141
<a
133142
href="/customer"
134-
className={`nav-link ${
135-
pathUrl === PathEnum.CUSTOMER ? "active" : ""
136-
}`}
143+
className={`nav-link ${pathUrl === PathEnum.CUSTOMER ? "active" : ""
144+
}`}
137145
>
138146
<i className="nav-icon fas fa-users" />
139147
<p>ข้อมูลลูกค้า</p>
140148
</a>
141149
</li>
150+
142151
{majorUser === "admin" ? (
143152
<li className="nav-item">
144153
<a
145154
href="/manage-user"
146-
className={`nav-link ${
147-
pathUrl === PathEnum.MANAGE_USER ? "active" : ""
148-
}`}
155+
className={`nav-link ${pathUrl === PathEnum.MANAGE_USER ? "active" : ""
156+
}`}
149157
>
150158
<i className="nav-icon fas fa-user-plus" />
151159
<p>จัดการผู้ใช้</p>
152160
</a>
153161
</li>
154162
) : null}
163+
155164
{majorUser === "admin" ? (
156165
<li className="nav-item">
157166
<a
158167
href="/income-list"
159-
className={`nav-link ${
160-
pathUrl === PathEnum.INCOME_LIST ? "active" : ""
161-
}`}
168+
className={`nav-link ${pathUrl === PathEnum.INCOME_LIST ? "active" : ""
169+
}`}
162170
>
163171
<i className="nav-icon fas fa-book" />
164172
<p>รายรับ-รายจ่าย</p>
165173
</a>
166174
</li>
167175
) : null}
176+
168177
<li className="nav-item">
169178
<a href="/app/Stock.msi" className={`nav-link`}>
170179
<img
@@ -175,12 +184,12 @@ export default function SidebarCommon() {
175184
<p>download</p>
176185
</a>
177186
</li>
187+
178188
<li className="nav-item">
179189
<a
180190
href="/login"
181-
className={`nav-link ${
182-
pathUrl === PathEnum.LOGOUT ? "active" : ""
183-
}`}
191+
className={`nav-link ${pathUrl === PathEnum.LOGOUT ? "active" : ""
192+
}`}
184193
onClick={() => {
185194
sessionStorage.clear();
186195
}}
@@ -193,9 +202,22 @@ export default function SidebarCommon() {
193202
<p>ออกจากระบบ</p>
194203
</a>
195204
</li>
205+
196206
</ul>
207+
197208
</nav>
198209
)}
210+
211+
</div>
212+
213+
<div className="d-flex justify-content-around">
214+
<button
215+
onClick={toggleTheme}
216+
className={`btn btn-sm ${theme === ThemesEnum.DARK ? "btn-outline-light" : "btn-dark"}`}
217+
>
218+
{theme === ThemesEnum.DARK ? "🌞 Light" : "🌙 Dark"}
219+
</button>
220+
199221
</div>
200222
</aside>
201223
);

‎src/enum/mode.enum.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export enum ThemesEnum {
2+
LIGHT = "light",
3+
DARK = "dark",
4+
}

0 commit comments

Comments
 (0)