├── app.js
├── style.css
└── index.html


/app.js:
--------------------------------------------------------------------------------
 1 | const dark = document.querySelector(".dark");
 2 | const night = document.querySelector(".night");
 3 | const light = document.querySelector(".light");
 4 | const sidebar = document.querySelector(".sidebar");
 5 | const activeListItem = document.querySelector(".list-item.active");
 6 | 
 7 | dark.addEventListener("click", () => {
 8 |   sidebar.className = "sidebar";
 9 |   activeListItem.className = "list-item active";
10 | });
11 | 
12 | night.addEventListener("click", () => {
13 |     sidebar.className = "sidebar night";
14 |     activeListItem.className = "list-item night active";
15 | });
16 | 
17 | light.addEventListener("click", () => {
18 |     sidebar.className = "sidebar light";
19 |     activeListItem.className = "list-item light active";
20 | });
21 | 
22 | // const colors = document.querySelectorAll(".color-box");
23 | // const sidebar = document.querySelector(".sidebar");
24 | // const activeListItem = document.querySelector(".list-item.active");
25 | 
26 | // colors.forEach((color) => {
27 | //   color.addEventListener("click", () => {
28 | //     if (color.classList.contains("dark")) {
29 | //       sidebar.style.backgroundColor = "#111827";
30 | //       activeListItem.style.backgroundColor = "#374151";
31 | //     } else if (color.classList.contains("night")) {
32 | //       sidebar.style.backgroundColor = "#312e81";
33 | //       activeListItem.style.backgroundColor = "#4338ca";
34 | //     } else {
35 | //       sidebar.style.backgroundColor = "#f3f4f6";
36 | //       activeListItem.style.backgroundColor = "#d1d5db";
37 | //     }
38 | //   });
39 | // });
40 | 
41 | 
42 | // classList.add remove


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   font-family: "Roboto", sans-serif;
  4 | }
  5 | 
  6 | .sidebar {
  7 |   width: 180px;
  8 |   height: 100vh;
  9 |   background-color: #111827;
 10 |   color: #9ca3af;
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   align-items: center;
 14 | }
 15 | 
 16 | .sidebar-top,
 17 | .sidebar-center,
 18 | .sidebar-bottom {
 19 |   display: flex;
 20 |   align-items: center;
 21 |   width: 80%;
 22 |   border-bottom: 1px solid #4b4b4b;
 23 |   padding: 10px 0;
 24 |   margin-bottom: 10px;
 25 | }
 26 | 
 27 | .sidebar-center {
 28 |   padding: 0;
 29 | }
 30 | 
 31 | .sidebar-bottom {
 32 |   justify-content: center;
 33 |   border: none;
 34 | }
 35 | 
 36 | .logo {
 37 |   font-size: 24px;
 38 |   margin-right: 10px;
 39 |   cursor: pointer;
 40 |   padding-left: 10px;
 41 | }
 42 | 
 43 | .brand {
 44 |   font-weight: bold;
 45 |   cursor: pointer;
 46 | }
 47 | 
 48 | .list {
 49 |   list-style: none;
 50 |   padding: 0;
 51 |   width: 100%;
 52 | }
 53 | 
 54 | .list-item {
 55 |   margin-bottom: 10px;
 56 |   font-size: 14px;
 57 |   font-weight: 500;
 58 |   cursor: pointer;
 59 |   padding: 10px;
 60 |   border-radius: 10px;
 61 | }
 62 | 
 63 | .list-item-icon {
 64 |   width: 30px;
 65 |   font-size: 20px;
 66 | }
 67 | 
 68 | .list-item.active,
 69 | .list-item:hover {
 70 |   background-color: #374151;
 71 |   color: white;
 72 | }
 73 | 
 74 | .color-box {
 75 |   width: 20px;
 76 |   height: 20px;
 77 |   border-radius: 5px;
 78 |   border: 1px solid #9ca3af;
 79 |   margin-right: 15px;
 80 |   cursor: pointer;
 81 | }
 82 | 
 83 | .dark {
 84 |   background-color: #111827;
 85 | }
 86 | 
 87 | .night {
 88 |   background-color: #312e81;
 89 | }
 90 | 
 91 | .light {
 92 |   background-color: #f3f4f6;
 93 | }
 94 | 
 95 | .sidebar.night {
 96 |   background-color: #312e81;
 97 |   color: #b4bbc7;
 98 | }
 99 | 
100 | .list-item.night.active {
101 |   background-color: #4338ca;
102 | }
103 | 
104 | .sidebar.light {
105 |   background-color: #f3f4f6;
106 |   color: #111827;
107 | }
108 | 
109 | .list-item.light.active {
110 |   background-color: #d1d5db;
111 |   color: #111827;
112 | }
113 | 
114 | @media only screen and (max-width: 768px) {
115 |   .sidebar {
116 |     width: 50px;
117 |   }
118 |   .brand,
119 |   .list-item-text {
120 |     display: none;
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 | 
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
 9 |         integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
10 |         crossorigin="anonymous" />
11 |     <link
12 |         href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap"
13 |         rel="stylesheet">
14 |     <title>Document</title>
15 | </head>
16 | 
17 | <body>
18 |     <div class="sidebar">
19 |         <div class="sidebar-top">
20 |             <i class="logo fab fa-sketch"></i>
21 |             <span class="brand">The App</span>
22 |         </div>
23 |         <div class="sidebar-center">
24 |             <ul class="list">
25 |                 <li class="list-item">
26 |                     <i class="list-item-icon fas fa-home"></i>
27 |                     <span class="list-item-text">Dashboard</span>
28 |                 </li>
29 |                 <li class="list-item">
30 |                     <i class="list-item-icon fas fa-search"></i>
31 |                     <span class="list-item-text">Search</span>
32 |                 </li>
33 |                 <li class="list-item active">
34 |                     <i class="list-item-icon fas fa-stream"></i>
35 |                     <span class="list-item-text">Insights</span>
36 |                 </li>
37 |                 <li class="list-item">
38 |                     <i class="list-item-icon fas fa-book"></i>
39 |                     <span class="list-item-text">Docs</span>
40 |                 </li>
41 |                 <li class="list-item">
42 |                     <i class="list-item-icon fas fa-users"></i>
43 |                     <span class="list-item-text">Community</span>
44 |                 </li>
45 |                 <li class="list-item">
46 |                     <i class="list-item-icon fas fa-toolbox"></i>
47 |                     <span class="list-item-text">Tools</span>
48 |                 </li>
49 |                 <li class="list-item">
50 |                     <i class="list-item-icon fas fa-shopping-basket"></i>
51 |                     <span class="list-item-text">Market</span>
52 |                 </li>
53 |                 <li class="list-item">
54 |                     <i class="list-item-icon far fa-question-circle"></i>
55 |                     <span class="list-item-text">Resources</span>
56 |                 </li>
57 |             </ul>
58 |         </div>
59 |         <div class="sidebar-bottom">
60 |             <div class="color-box dark"></div>
61 |             <div class="color-box night"></div>
62 |             <div class="color-box light"></div>
63 |         </div>
64 |     </div>
65 |     <script src="app.js"></script>
66 | </body>
67 | 
68 | </html>


--------------------------------------------------------------------------------