├── app.js ├── img ├── face-1.png └── logo.png ├── index.html └── style.css /app.js: -------------------------------------------------------------------------------- 1 | const shrink_btn = document.querySelector(".shrink-btn"); 2 | const search = document.querySelector(".search"); 3 | const sidebar_links = document.querySelectorAll(".sidebar-links a"); 4 | const active_tab = document.querySelector(".active-tab"); 5 | const shortcuts = document.querySelector(".sidebar-links h4"); 6 | const tooltip_elements = document.querySelectorAll(".tooltip-element"); 7 | 8 | let activeIndex; 9 | 10 | shrink_btn.addEventListener("click", () => { 11 | document.body.classList.toggle("shrink"); 12 | setTimeout(moveActiveTab, 400); 13 | 14 | shrink_btn.classList.add("hovered"); 15 | 16 | setTimeout(() => { 17 | shrink_btn.classList.remove("hovered"); 18 | }, 500); 19 | }); 20 | 21 | search.addEventListener("click", () => { 22 | document.body.classList.remove("shrink"); 23 | search.lastElementChild.focus(); 24 | }); 25 | 26 | function moveActiveTab() { 27 | let topPosition = activeIndex * 58 + 2.5; 28 | 29 | if (activeIndex > 3) { 30 | topPosition += shortcuts.clientHeight; 31 | } 32 | 33 | active_tab.style.top = `${topPosition}px`; 34 | } 35 | 36 | function changeLink() { 37 | sidebar_links.forEach((sideLink) => sideLink.classList.remove("active")); 38 | this.classList.add("active"); 39 | 40 | activeIndex = this.dataset.active; 41 | 42 | moveActiveTab(); 43 | } 44 | 45 | sidebar_links.forEach((link) => link.addEventListener("click", changeLink)); 46 | 47 | function showTooltip() { 48 | let tooltip = this.parentNode.lastElementChild; 49 | let spans = tooltip.children; 50 | let tooltipIndex = this.dataset.tooltip; 51 | 52 | Array.from(spans).forEach((sp) => sp.classList.remove("show")); 53 | spans[tooltipIndex].classList.add("show"); 54 | 55 | tooltip.style.top = `${(100 / (spans.length * 2)) * (tooltipIndex * 2 + 1)}%`; 56 | } 57 | 58 | tooltip_elements.forEach((elem) => { 59 | elem.addEventListener("mouseover", showTooltip); 60 | }); 61 | -------------------------------------------------------------------------------- /img/face-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/css-sidebar-menu/b4a9b3ed9eac7a76693bbafb288fbf6e5421a51b/img/face-1.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sefyudem/css-sidebar-menu/b4a9b3ed9eac7a76693bbafb288fbf6e5421a51b/img/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sidebar Menu 9 | 10 | 11 | 12 | 13 | 14 | 135 | 136 | 137 |
138 |

My Dashboard

139 |

140 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur animi voluptatibus cum maxime distinctio 141 | iste quod deleniti eius, autem voluptates cumque suscipit iure quasi eligendi ullam. Sapiente eligendi porro 142 | reprehenderit corrupti error facilis quo, fugiat fugit? Maiores aliquam ad, molestiae iste nihil, commodi 143 | doloremque tempore excepturi aut id ducimus unde? 144 |

145 |

146 | © 2021 - Aqumex All Rights Reserved. 147 |

148 |
149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | :root { 12 | --main-color: #3d5af1; 13 | --main-color-dark: #3651d4; 14 | --main-color-light: #5872f5; 15 | --text-color: #cfcde7; 16 | } 17 | 18 | body { 19 | font-family: "Poppins", sans-serif; 20 | overflow-x: hidden; 21 | background-color: #e4e2f5; 22 | min-height: 100vh; 23 | display: flex; 24 | position: relative; 25 | } 26 | 27 | a { 28 | text-decoration: none; 29 | } 30 | 31 | ul { 32 | list-style: none; 33 | } 34 | 35 | nav { 36 | position: sticky; 37 | top: 0; 38 | left: 0; 39 | height: 100vh; 40 | background-color: var(--main-color); 41 | width: 16rem; 42 | padding: 1.8rem 0.85rem; 43 | color: #fff; 44 | display: flex; 45 | flex-direction: column; 46 | transition: width 0.5s ease-in-out; 47 | } 48 | 49 | nav::before { 50 | content: ""; 51 | position: absolute; 52 | width: 2rem; 53 | height: 100%; 54 | top: 0; 55 | left: 100%; 56 | } 57 | 58 | main { 59 | flex: 1; 60 | padding: 2rem; 61 | color: #1f2027; 62 | display: flex; 63 | flex-direction: column; 64 | } 65 | 66 | main h1 { 67 | margin-bottom: 1rem; 68 | } 69 | 70 | main .copyright { 71 | margin-top: auto; 72 | font-size: 0.9rem; 73 | } 74 | 75 | main .copyright span { 76 | color: var(--main-color); 77 | font-weight: 500; 78 | cursor: pointer; 79 | } 80 | 81 | .sidebar-top { 82 | position: relative; 83 | display: flex; 84 | align-items: center; 85 | } 86 | 87 | .sidebar-top .logo { 88 | width: 2.1rem; 89 | margin: 0 0.8rem; 90 | } 91 | 92 | .sidebar-top h3 { 93 | padding-left: 0.5rem; 94 | font-weight: 600; 95 | font-size: 1.15rem; 96 | } 97 | 98 | .shrink-btn { 99 | position: absolute; 100 | top: 50%; 101 | height: 27px; 102 | padding: 0 0.3rem; 103 | background-color: var(--main-color); 104 | border-radius: 6px; 105 | cursor: pointer; 106 | box-shadow: 0 3px 10px -3px rgba(70, 46, 118, 0.3); 107 | right: -2.65rem; 108 | transform: translateY(-50%) translateX(-8px); 109 | opacity: 0; 110 | pointer-events: none; 111 | transition: 0.3s; 112 | } 113 | 114 | .shrink-btn i { 115 | line-height: 27px; 116 | transition: 0.3s; 117 | } 118 | 119 | .shrink-btn:hover { 120 | background-color: var(--main-color-dark); 121 | } 122 | 123 | nav:hover .shrink-btn, 124 | .shrink-btn.hovered { 125 | transform: translateY(-50%) translateX(0px); 126 | opacity: 1; 127 | pointer-events: all; 128 | } 129 | 130 | .search { 131 | min-height: 2.7rem; 132 | background-color: var(--main-color-light); 133 | margin: 2rem 0.5rem 1.7rem; 134 | display: grid; 135 | grid-template-columns: 2.7rem 1fr; 136 | align-items: center; 137 | text-align: center; 138 | border-radius: 50px; 139 | cursor: pointer; 140 | } 141 | 142 | .search input { 143 | height: 100%; 144 | border: none; 145 | background: none; 146 | outline: none; 147 | color: #fff; 148 | caret-color: #fff; 149 | font-family: inherit; 150 | } 151 | 152 | .search input::placeholder { 153 | color: var(--text-color); 154 | } 155 | 156 | .sidebar-links ul { 157 | position: relative; 158 | } 159 | 160 | .sidebar-links li { 161 | position: relative; 162 | padding: 2.5px 0; 163 | } 164 | 165 | .sidebar-links a { 166 | color: var(--text-color); 167 | font-weight: 400; 168 | font-size: 0.9rem; 169 | display: flex; 170 | align-items: center; 171 | height: 53px; 172 | } 173 | 174 | .icon { 175 | font-size: 1.3rem; 176 | text-align: center; 177 | min-width: 3.7rem; 178 | display: grid; 179 | grid-template-columns: 1fr; 180 | grid-template-rows: 1fr; 181 | } 182 | 183 | .icon i { 184 | grid-column: 1 / 2; 185 | grid-row: 1 / 2; 186 | transition: 0.3s; 187 | } 188 | 189 | .icon i:last-child { 190 | opacity: 0; 191 | color: #fff; 192 | } 193 | 194 | .sidebar-links a.active, 195 | .sidebar-links a:hover { 196 | color: #fff; 197 | } 198 | 199 | .sidebar-links a .link { 200 | transition: opacity 0.3s 0.2s, color 0.3s; 201 | } 202 | 203 | .sidebar-links a.active i:first-child { 204 | opacity: 0; 205 | } 206 | 207 | .sidebar-links a.active i:last-child { 208 | opacity: 1; 209 | } 210 | 211 | .active-tab { 212 | width: 100%; 213 | height: 53px; 214 | background-color: var(--main-color-dark); 215 | border-radius: 10px; 216 | position: absolute; 217 | top: 2.5px; 218 | left: 0; 219 | transition: top 0.3s; 220 | } 221 | 222 | .sidebar-links h4 { 223 | position: relative; 224 | font-size: 0.8rem; 225 | text-transform: uppercase; 226 | font-weight: 600; 227 | padding: 0 0.8rem; 228 | color: var(--text-color); 229 | letter-spacing: 0.5px; 230 | height: 45px; 231 | line-height: 45px; 232 | transition: opacity 0.3s 0.2s, height 0.5s 0s; 233 | } 234 | 235 | .sidebar-footer { 236 | position: relative; 237 | margin-top: auto; 238 | } 239 | 240 | .account { 241 | display: flex; 242 | align-items: center; 243 | justify-content: center; 244 | font-size: 1.3rem; 245 | color: var(--text-color); 246 | height: 53px; 247 | width: 3.7rem; 248 | opacity: 0; 249 | pointer-events: none; 250 | transition: opacity 0.3s 0s, color 0.3s 0s; 251 | } 252 | 253 | .account:hover { 254 | color: #fff; 255 | } 256 | 257 | .admin-user { 258 | display: flex; 259 | align-items: center; 260 | } 261 | 262 | .admin-profile { 263 | white-space: nowrap; 264 | max-width: 100%; 265 | transition: opacity 0.3s 0.2s, max-width 0.7s 0s ease-in-out; 266 | display: flex; 267 | align-items: center; 268 | flex: 1; 269 | overflow: hidden; 270 | } 271 | 272 | .admin-user img { 273 | width: 2.9rem; 274 | border-radius: 50%; 275 | margin: 0 0.4rem; 276 | } 277 | 278 | .admin-info { 279 | padding-left: 0.3rem; 280 | } 281 | 282 | .admin-info h3 { 283 | font-weight: 500; 284 | font-size: 1rem; 285 | line-height: 1; 286 | } 287 | 288 | .admin-info h5 { 289 | font-weight: 400; 290 | font-size: 0.75rem; 291 | color: var(--text-color); 292 | margin-top: 0.3rem; 293 | line-height: 1; 294 | } 295 | 296 | .log-out { 297 | display: flex; 298 | height: 40px; 299 | min-width: 2.4rem; 300 | background-color: var(--main-color-dark); 301 | color: var(--text-color); 302 | align-items: center; 303 | justify-content: center; 304 | font-size: 1.15rem; 305 | border-radius: 10px; 306 | margin: 0 0.65rem; 307 | transition: color 0.3s; 308 | } 309 | 310 | .log-out:hover { 311 | color: #fff; 312 | } 313 | 314 | .tooltip { 315 | background-color: var(--main-color); 316 | position: absolute; 317 | right: -1.2rem; 318 | top: 0; 319 | transform: translateX(100%) translateY(-50%); 320 | padding: 0 0.8rem; 321 | font-size: 0.85rem; 322 | display: none; 323 | grid-template-rows: 1fr; 324 | grid-template-columns: 1fr; 325 | height: 30px; 326 | align-items: center; 327 | border-radius: 7px; 328 | box-shadow: 0 3px 10px -3px rgba(70, 46, 118, 0.3); 329 | opacity: 0; 330 | pointer-events: none; 331 | transition: all 0.3s; 332 | text-align: center; 333 | white-space: nowrap; 334 | } 335 | 336 | .tooltip span { 337 | grid-column: 1 / 2; 338 | grid-row: 1 / 2; 339 | opacity: 0; 340 | transition: 0.3s; 341 | } 342 | 343 | .tooltip span.show { 344 | opacity: 1; 345 | } 346 | 347 | .tooltip-element:hover ~ .tooltip { 348 | opacity: 1; 349 | pointer-events: all; 350 | } 351 | 352 | /* When the menu shrinks */ 353 | 354 | .hide { 355 | transition: opacity 0.3s 0.2s; 356 | } 357 | 358 | body.shrink nav { 359 | width: 5.4rem; 360 | } 361 | 362 | body.shrink .hide { 363 | opacity: 0; 364 | pointer-events: none; 365 | transition-delay: 0s; 366 | } 367 | 368 | body.shrink .shrink-btn i { 369 | transform: rotate(-180deg); 370 | } 371 | 372 | body.shrink .sidebar-links h4 { 373 | height: 10px; 374 | } 375 | 376 | body.shrink .account { 377 | opacity: 1; 378 | pointer-events: all; 379 | transition: opacity 0.3s 0.3s, color 0.3s 0s; 380 | } 381 | 382 | body.shrink .admin-profile { 383 | max-width: 0; 384 | transition: opacity 0.3s 0s, max-width 0.7s 0s ease-in-out; 385 | } 386 | 387 | body.shrink .tooltip { 388 | display: grid; 389 | } 390 | --------------------------------------------------------------------------------