└── Sidebar Menu
├── index.html
├── logo.png
├── script.js
└── style.css
/Sidebar Menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Dashboard Sidebar Menu
11 |
12 |
13 |
116 |
117 |
118 | Dashboard Sidebar
119 |
120 |
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/Sidebar Menu/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/animation-coding/sidebar_menu02/d8b052fdc72f22d0cd842f7c8d22cbbc5955ae7b/Sidebar Menu/logo.png
--------------------------------------------------------------------------------
/Sidebar Menu/script.js:
--------------------------------------------------------------------------------
1 | const body = document.querySelector('body'),
2 | sidebar = body.querySelector('nav'),
3 | toggle = body.querySelector(".toggle"),
4 | searchBtn = body.querySelector(".search-box"),
5 | modeSwitch = body.querySelector(".toggle-switch"),
6 | modeText = body.querySelector(".mode-text");
7 |
8 |
9 | toggle.addEventListener("click" , () =>{
10 | sidebar.classList.toggle("close");
11 | })
12 |
13 | searchBtn.addEventListener("click" , () =>{
14 | sidebar.classList.remove("close");
15 | })
16 |
17 | modeSwitch.addEventListener("click" , () =>{
18 | body.classList.toggle("dark");
19 |
20 | if(body.classList.contains("dark")){
21 | modeText.innerText = "Light mode";
22 | }else{
23 | modeText.innerText = "Dark mode";
24 |
25 | }
26 | });
--------------------------------------------------------------------------------
/Sidebar Menu/style.css:
--------------------------------------------------------------------------------
1 | /* Google Font Import - Poppins */
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'Poppins', sans-serif;
8 | }
9 |
10 | :root{
11 | /* ===== Colors ===== */
12 | --body-color: #E4E9F7;
13 | --sidebar-color: #FFF;
14 | --primary-color: #f44718;
15 | --primary-color-light: #F6F5FF;
16 | --toggle-color: #DDD;
17 | --text-color: #707070;
18 |
19 | /* ====== Transition ====== */
20 | --tran-03: all 0.2s ease;
21 | --tran-03: all 0.3s ease;
22 | --tran-04: all 0.3s ease;
23 | --tran-05: all 0.3s ease;
24 | }
25 |
26 | body{
27 | min-height: 100vh;
28 | background-color: var(--body-color);
29 | transition: var(--tran-05);
30 | }
31 |
32 | ::selection{
33 | background-color: var(--primary-color);
34 | color: #fff;
35 | }
36 |
37 | body.dark{
38 | --body-color: #18191a;
39 | --sidebar-color: #242526;
40 | --primary-color: #3a3b3c;
41 | --primary-color-light: #3a3b3c;
42 | --toggle-color: #fff;
43 | --text-color: #ccc;
44 | }
45 |
46 | /* ===== Sidebar ===== */
47 | .sidebar{
48 | position: fixed;
49 | top: 0;
50 | left: 0;
51 | height: 100%;
52 | width: 250px;
53 | padding: 10px 14px;
54 | background: var(--sidebar-color);
55 | transition: var(--tran-05);
56 | z-index: 100;
57 | }
58 | .sidebar.close{
59 | width: 88px;
60 | }
61 |
62 | /* ===== Reusable code - Here ===== */
63 | .sidebar li{
64 | height: 50px;
65 | list-style: none;
66 | display: flex;
67 | align-items: center;
68 | margin-top: 10px;
69 | }
70 |
71 | .sidebar header .image,
72 | .sidebar .icon{
73 | min-width: 60px;
74 | border-radius: 6px;
75 | }
76 |
77 | .sidebar .icon{
78 | min-width: 60px;
79 | border-radius: 6px;
80 | height: 100%;
81 | display: flex;
82 | align-items: center;
83 | justify-content: center;
84 | font-size: 20px;
85 | }
86 |
87 | .sidebar .text,
88 | .sidebar .icon{
89 | color: var(--text-color);
90 | transition: var(--tran-03);
91 | }
92 |
93 | .sidebar .text{
94 | font-size: 17px;
95 | font-weight: 500;
96 | white-space: nowrap;
97 | opacity: 1;
98 | }
99 | .sidebar.close .text{
100 | opacity: 0;
101 | }
102 | /* =========================== */
103 |
104 | .sidebar header{
105 | position: relative;
106 | }
107 |
108 | .sidebar header .image-text{
109 | display: flex;
110 | align-items: center;
111 | }
112 | .sidebar header .logo-text{
113 | display: flex;
114 | flex-direction: column;
115 | }
116 | header .image-text .name {
117 | margin-top: 2px;
118 | font-size: 18px;
119 | font-weight: 600;
120 | }
121 |
122 | header .image-text .profession{
123 | font-size: 16px;
124 | margin-top: -2px;
125 | display: block;
126 | }
127 |
128 | .sidebar header .image{
129 | display: flex;
130 | align-items: center;
131 | justify-content: center;
132 | }
133 |
134 | .sidebar header .image img{
135 | width: 40px;
136 | border-radius: 6px;
137 | }
138 |
139 | .sidebar header .toggle{
140 | position: absolute;
141 | top: 50%;
142 | right: -25px;
143 | transform: translateY(-50%) rotate(180deg);
144 | height: 25px;
145 | width: 25px;
146 | background-color: var(--primary-color);
147 | color: var(--sidebar-color);
148 | border-radius: 50%;
149 | display: flex;
150 | align-items: center;
151 | justify-content: center;
152 | font-size: 22px;
153 | cursor: pointer;
154 | transition: var(--tran-05);
155 | }
156 |
157 | body.dark .sidebar header .toggle{
158 | color: var(--text-color);
159 | }
160 |
161 | .sidebar.close .toggle{
162 | transform: translateY(-50%) rotate(0deg);
163 | }
164 |
165 | .sidebar .menu{
166 | margin-top: 60px;
167 | }
168 |
169 | .sidebar li.search-box{
170 | border-radius: 6px;
171 | background-color: var(--primary-color-light);
172 | cursor: pointer;
173 | transition: var(--tran-05);
174 | }
175 |
176 | .sidebar li.search-box input{
177 | height: 100%;
178 | width: 100%;
179 | outline: none;
180 | border: none;
181 | background-color: var(--primary-color-light);
182 | color: var(--text-color);
183 | border-radius: 6px;
184 | font-size: 17px;
185 | font-weight: 500;
186 | transition: var(--tran-05);
187 | }
188 | .sidebar li a{
189 | list-style: none;
190 | height: 100%;
191 | background-color: transparent;
192 | display: flex;
193 | align-items: center;
194 | height: 100%;
195 | width: 100%;
196 | border-radius: 6px;
197 | text-decoration: none;
198 | transition: var(--tran-03);
199 |
200 | }
201 |
202 | .sidebar li a:hover{
203 | background-color: var(--primary-color);
204 | }
205 | .sidebar li a:hover .icon,
206 | .sidebar li a:hover .text{
207 | color: var(--sidebar-color);
208 | }
209 | body.dark .sidebar li a:hover .icon,
210 | body.dark .sidebar li a:hover .text{
211 | color: var(--text-color);
212 | }
213 |
214 | .sidebar .menu-bar{
215 | height: calc(100% - 55px);
216 | display: flex;
217 | flex-direction: column;
218 | justify-content: space-between;
219 | overflow-y: scroll;
220 | }
221 | .menu-bar::-webkit-scrollbar{
222 | display: none;
223 | }
224 | .sidebar .menu-bar .mode{
225 | border-radius: 6px;
226 | background-color: var(--primary-color-light);
227 | position: relative;
228 | transition: var(--tran-05);
229 | }
230 |
231 | .menu-bar .mode .sun-moon{
232 | height: 50px;
233 | width: 60px;
234 | }
235 |
236 | .mode .sun-moon i{
237 | position: absolute;
238 | }
239 | .mode .sun-moon i.sun{
240 | opacity: 0;
241 | }
242 | body.dark .mode .sun-moon i.sun{
243 | opacity: 1;
244 | }
245 | body.dark .mode .sun-moon i.moon{
246 | opacity: 0;
247 | }
248 |
249 | .menu-bar .bottom-content .toggle-switch{
250 | position: absolute;
251 | right: 0;
252 | height: 100%;
253 | min-width: 60px;
254 | display: flex;
255 | align-items: center;
256 | justify-content: center;
257 | border-radius: 6px;
258 | cursor: pointer;
259 | }
260 | .toggle-switch .switch{
261 | position: relative;
262 | height: 22px;
263 | width: 40px;
264 | border-radius: 25px;
265 | background-color: var(--toggle-color);
266 | transition: var(--tran-05);
267 | }
268 |
269 | .switch::before{
270 | content: '';
271 | position: absolute;
272 | height: 15px;
273 | width: 15px;
274 | border-radius: 50%;
275 | top: 50%;
276 | left: 5px;
277 | transform: translateY(-50%);
278 | background-color: var(--sidebar-color);
279 | transition: var(--tran-04);
280 | }
281 |
282 | body.dark .switch::before{
283 | left: 20px;
284 | }
285 |
286 | .home{
287 | position: absolute;
288 | top: 0;
289 | top: 0;
290 | left: 250px;
291 | height: 100vh;
292 | width: calc(100% - 250px);
293 | background-color: var(--body-color);
294 | transition: var(--tran-05);
295 | }
296 | .home .text{
297 | font-size: 30px;
298 | font-weight: 500;
299 | color: var(--text-color);
300 | padding: 12px 60px;
301 | }
302 |
303 | .sidebar.close ~ .home{
304 | left: 78px;
305 | height: 100vh;
306 | width: calc(100% - 78px);
307 | }
308 | body.dark .home .text{
309 | color: var(--text-color);
310 | }
311 |
--------------------------------------------------------------------------------