├── index.html
├── script.js
├── style.css
└── user.png
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Responsive Sidebar
9 |
10 |
11 |
78 |
79 |
83 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const container = document.querySelector(".container");
2 | const linkItems = document.querySelectorAll(".link-item");
3 | const darkMode = document.querySelector(".dark-mode");
4 | const logo = document.querySelector(".logo svg");
5 |
6 | //Container Hover
7 | container.addEventListener("mouseenter", () => {
8 | container.classList.add("active");
9 | });
10 |
11 | //Container Hover Leave
12 | container.addEventListener("mouseleave", () => {
13 | container.classList.remove("active");
14 | });
15 |
16 | //Link-items Clicked
17 | for (let i = 0; i < linkItems.length; i++) {
18 | if (!linkItems[i].classList.contains("dark-mode")) {
19 | linkItems[i].addEventListener("click", (e) => {
20 | linkItems.forEach((linkItem) => {
21 | linkItem.classList.remove("active");
22 | });
23 | linkItems[i].classList.add("active");
24 | });
25 | }
26 | }
27 |
28 | // Dark Mode Functionality
29 | darkMode.addEventListener("click", function () {
30 | if (document.body.classList.contains("dark-mode")) {
31 | darkMode.querySelector("span").textContent = "dark mode";
32 | darkMode.querySelector("ion-icon").setAttribute("name", "moon-outline");
33 |
34 | logo.style.fill = "#000";
35 | } else {
36 | darkMode.querySelector("span").textContent = "light mode";
37 | darkMode.querySelector("ion-icon").setAttribute("name", "sunny-outline");
38 | logo.style.fill = "#fff";
39 | }
40 | document.body.classList.toggle("dark-mode");
41 | });
42 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
2 |
3 | :root {
4 | --primary-clr: #ff9100;
5 | --bg-clr: #bebbb6;
6 | --white-bg: rgba(226, 215, 215, 0.9);
7 | --dark-text-clr: #363b46;
8 | --light-text-clr: #fff;
9 | --hover-clr: #f1e8fd;
10 | }
11 | body.dark-mode {
12 | --primary-clr: #ff9100;
13 | --bg-clr: #1e1e1e;
14 | --white-bg: #23262b;
15 | --dark-text-clr: #fff;
16 | --light-text-clr: #fff;
17 | --hover-clr: #31313f;
18 | }
19 | * {
20 | margin: 0;
21 | padding: 0;
22 | box-sizing: border-box;
23 | font-family: "Poppins", sans-serif;
24 | }
25 | body {
26 | height: 100vh;
27 | background: var(--bg-clr);
28 | }
29 | .container {
30 | height: 100vh;
31 | width: 85px;
32 | margin: 0 auto;
33 | padding: 20px;
34 | overflow: hidden;
35 | border-radius: 10px;
36 | background-color: var(--white-bg);
37 | transition: all 0.3s ease;
38 | }
39 | .container.active {
40 | width: 250px;
41 | }
42 | .container .logo {
43 | width: 100%;
44 | margin-bottom: 30px;
45 | }
46 | .container ul {
47 | list-style: none;
48 | display: flex;
49 | flex-direction: column;
50 | gap: 10px;
51 | }
52 | .link-item:last-child {
53 | margin-top: 50px;
54 | }
55 | .link-item a {
56 | display: flex;
57 | align-items: center;
58 | width: 100%;
59 | padding: 10px;
60 | border-radius: 10px;
61 | text-decoration: none;
62 | font-size: 16px;
63 | white-space: nowrap;
64 | text-transform: capitalize;
65 | color: var(--dark-text-clr);
66 | }
67 | .link-item a span {
68 | transition: transform 0.5s;
69 | transform: translateX(100px);
70 | }
71 | .link-item:last-child span h4 {
72 | line-height: 1;
73 | }
74 | .link-item:last-child span p {
75 | font-size: 12px;
76 | }
77 | .container.active .link-item a span {
78 | transition-delay: calc(0.02s * var(--i));
79 | transform: translateX(0px);
80 | }
81 | .link-item a:hover {
82 | background-color: var(--hover-clr);
83 | }
84 | .link-item.active a {
85 | color: var(--light-text-clr);
86 | background-color: var(--primary-clr);
87 | }
88 | .link-item ion-icon {
89 | min-width: 20px;
90 | min-height: 20px;
91 | margin-right: 20px;
92 | position: relative;
93 | }
94 | .link-item img {
95 | width: 30px;
96 | height: 30px;
97 | margin-right: 20px;
98 | border-radius: 50%;
99 | }
100 | .link-item ion-icon.noti-icon::before {
101 | content: "";
102 | display: block;
103 | position: absolute;
104 | top: 3px;
105 | right: 2px;
106 | width: 6px;
107 | height: 6px;
108 | border-radius: 50%;
109 | background-color: var(--primary-clr);
110 | border: 1px solid var(--white-bg);
111 | }
112 | .link-item a .num-noti {
113 | margin-left: 40px;
114 | font-size: 12px;
115 | color: var(--light-text-clr);
116 | background-color: var(--primary-clr);
117 | min-width: 15px;
118 | height: 15px;
119 | display: flex;
120 | align-items: center;
121 | justify-content: center;
122 | border-radius: 50%;
123 | }
124 | .link-item.active a .num-noti {
125 | color: var(--primary-clr);
126 | background-color: var(--white-bg);
127 | }
128 |
--------------------------------------------------------------------------------
/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bryanhrr/responsive-menu-dark-mode/64ae902e0978b8c15c449e6e3ac1668605d4bafe/user.png
--------------------------------------------------------------------------------
70 |
71 |