├── README.md ├── assets ├── css │ └── styles.css ├── img │ ├── perfil.png │ ├── sidebar-bg.jpg │ ├── yt-logo-full.svg │ ├── yt-logo-text.svg │ └── yt-logo.svg ├── js │ └── main.js └── scss │ ├── base │ └── _base.scss │ ├── components │ ├── _breakpoints.scss │ ├── _header.scss │ └── _sidebar.scss │ ├── config │ └── _variables.scss │ ├── layout │ └── _layout.scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Sidebar Menu 2 | ## [Watch it on youtube](https://youtu.be/RhT04ifx3vw) 3 | ### Responsive Sidebar Menu 4 | 5 | - Responsive Sidebar Menu Using HTML CSS & JavaScript 6 | - Contains glass effect & gradient borders. 7 | - Developed first with the Mobile First methodology, then for desktop. 8 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 9 | 10 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 11 | 12 | ![preview img](/preview.png) 13 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | /*Color mode HSL(hue, saturation, lightness)*/ 10 | --white-color: hsl(210, 32%, 99%); 11 | --text-color: hsl(210, 4%, 55%); 12 | --dark-color-light: hsla(210, 4%, 4%, .1); 13 | --white-color-light: hsla(210, 4%, 99%, .1); 14 | --gradient-x: linear-gradient(90deg, 15 | hsla(0, 0%, 0%, 0), 16 | hsl(210, 4%, 64%), 17 | hsla(0, 0%, 0%, 0)); 18 | --gradient-y: linear-gradient(0, 19 | hsla(0, 0%, 0%, 0), 20 | hsl(210, 4%, 64%), 21 | hsla(0, 0%, 0%, 0)); 22 | 23 | /*========== Font and typography ==========*/ 24 | /*.5rem = 8px | 1rem = 16px ...*/ 25 | --body-font: "Montserrat", sans-serif; 26 | --normal-font-size: .938rem; 27 | --small-font-size: .813rem; 28 | 29 | /*========== Font weight ==========*/ 30 | --font-medium: 500; 31 | --font-semi-bold: 600; 32 | 33 | /*========== z index ==========*/ 34 | --z-tooltip: 10; 35 | --z-fixed: 100; 36 | } 37 | 38 | /*========== Responsive typography ==========*/ 39 | @media screen and (min-width: 1024px) { 40 | :root { 41 | --normal-font-size: 1rem; 42 | --small-font-size: .875rem; 43 | } 44 | } 45 | 46 | /*=============== BASE ===============*/ 47 | * { 48 | box-sizing: border-box; 49 | padding: 0; 50 | margin: 0; 51 | } 52 | 53 | body { 54 | font-family: var(--body-font); 55 | font-size: var(--normal-font-size); 56 | color: var(--text-color); 57 | } 58 | 59 | a { 60 | text-decoration: none; 61 | } 62 | 63 | img { 64 | display: block; 65 | max-width: 100%; 66 | height: auto; 67 | } 68 | 69 | /*=============== LAYOUT ===============*/ 70 | .container { 71 | margin-inline: 1.5rem; 72 | } 73 | 74 | .main { 75 | padding-top: 5rem; 76 | } 77 | 78 | .bg-image { 79 | position: absolute; 80 | left: 0; 81 | top: 0; 82 | width: 100%; 83 | height: 100%; 84 | object-fit: cover; 85 | object-position: center; 86 | z-index: -1; 87 | } 88 | 89 | /*=============== HEADER ===============*/ 90 | .header { 91 | position: fixed; 92 | top: 0; 93 | left: 0; 94 | width: 100%; 95 | background-color: var(--dark-color-light); 96 | backdrop-filter: blur(16px); 97 | -webkit-backdrop-filter: blur(16px); 98 | z-index: var(--z-fixed); 99 | } 100 | 101 | .header::after { 102 | content: ""; 103 | position: absolute; 104 | left: 0; 105 | bottom: 0; 106 | width: 100%; 107 | height: 1px; 108 | background: var(--gradient-x); 109 | } 110 | 111 | .header__container { 112 | height: var(--header-height); 113 | display: flex; 114 | justify-content: space-between; 115 | align-items: center; 116 | } 117 | 118 | .header__toggle { 119 | font-size: 1.25rem; 120 | color: var(--white-color); 121 | cursor: pointer; 122 | } 123 | 124 | .header__logo { 125 | width: 70px; 126 | } 127 | 128 | /*=============== SIDEBAR ===============*/ 129 | .sidebar { 130 | position: fixed; 131 | left: -100%; 132 | top: var(--header-height); 133 | width: 280px; 134 | height: 100%; 135 | padding: 2rem 1.5rem; 136 | background-color: var(--dark-color-light); 137 | backdrop-filter: blur(16px); 138 | -webkit-backdrop-filter: blur(16px); 139 | z-index: var(--z-fixed); 140 | transition: left .4s; 141 | } 142 | 143 | .sidebar::after { 144 | content: ""; 145 | position: absolute; 146 | right: 0; 147 | top: 0; 148 | width: 1px; 149 | height: 100%; 150 | background: var(--gradient-y); 151 | } 152 | 153 | .sidebar__container { 154 | display: flex; 155 | flex-direction: column; 156 | row-gap: 2rem; 157 | padding-bottom: 3rem; 158 | height: 100%; 159 | } 160 | 161 | .sidebar__logo { 162 | display: grid; 163 | grid-template-columns: repeat(2, max-content); 164 | column-gap: .5rem; 165 | } 166 | 167 | .sidebar__logo-img { 168 | width: 37px; 169 | } 170 | .sidebar__logo-text { 171 | width: 76px; 172 | } 173 | 174 | .sidebar__content { 175 | position: relative; 176 | overflow: auto; 177 | padding-top: 2rem; 178 | } 179 | 180 | .sidebar__content::-webkit-scrollbar { 181 | display: none; 182 | } 183 | 184 | .sidebar__content::after { 185 | content: ""; 186 | position: absolute; 187 | top: 0; 188 | left: 0; 189 | width: 100%; 190 | height: 1px; 191 | background: var(--gradient-x); 192 | } 193 | 194 | .sidebar__list { 195 | display: flex; 196 | flex-direction: column; 197 | row-gap: .25rem; 198 | } 199 | 200 | .sidebar__link { 201 | color: var(--text-color); 202 | display: grid; 203 | grid-template-columns: repeat(2, max-content); 204 | align-items: center; 205 | column-gap: 1.5rem; 206 | padding: 1rem; 207 | border-radius: .25rem; 208 | transition: background .3s; 209 | } 210 | 211 | .sidebar__link-floating { 212 | display: none; 213 | } 214 | 215 | .sidebar__link i { 216 | color: var(--white-color); 217 | font-size: 1.25rem; 218 | } 219 | 220 | .sidebar__link-name { 221 | font-weight: var(--font-medium); 222 | transition: color .4s; 223 | } 224 | 225 | .sidebar__link:hover { 226 | background-color: var(--white-color-light); 227 | backdrop-filter: blur(16px); 228 | -webkit-backdrop-filter: blur(16px); 229 | color: var(--white-color); 230 | } 231 | 232 | .sidebar__title span { 233 | display: block; 234 | position: relative; 235 | margin-block: 2rem 1.5rem; 236 | text-align: center; 237 | color: var(--white-color); 238 | font-size: var(--normal-font-size); 239 | } 240 | 241 | .sidebar__title span::before, 242 | .sidebar__title span::after { 243 | content: ""; 244 | position: absolute; 245 | top: 50%; 246 | width: 30%; 247 | height: 1px; 248 | } 249 | 250 | .sidebar__title span::before { 251 | background: linear-gradient(90deg, 252 | hsla(0, 0%, 0%, 0), 253 | hsl(210, 4%, 64%)); 254 | left: 0; 255 | } 256 | 257 | .sidebar__title span::after { 258 | background: linear-gradient(90deg, 259 | hsl(210, 4%, 64%), 260 | hsla(0, 0%, 0%, 0)); 261 | right: 0; 262 | } 263 | 264 | .sidebar__perfil { 265 | width: 55px; 266 | border-radius: 50%; 267 | border: 2px solid var(--white-color); 268 | } 269 | 270 | .sidebar__account { 271 | display: flex; 272 | align-items: center; 273 | column-gap: .5rem; 274 | } 275 | 276 | .sidebar__name { 277 | font-size: var(--normal-font-size); 278 | color: var(--white-color); 279 | margin-bottom: .25rem; 280 | } 281 | 282 | .sidebar__email { 283 | font-size: var(--small-font-size); 284 | font-weight: var(--font-medium); 285 | } 286 | 287 | .sidebar__account i { 288 | color: var(--white-color); 289 | font-size: 1.5rem; 290 | margin-left: auto; 291 | cursor: pointer; 292 | } 293 | 294 | /* Show sidebar */ 295 | .show-sidebar { 296 | left: 0; 297 | } 298 | 299 | /* Active link */ 300 | .active-link { 301 | background-color: var(--white-color-light); 302 | backdrop-filter: blur(16px); 303 | -webkit-backdrop-filter: blur(16px); 304 | } 305 | .active-link span { 306 | color: var(--white-color); 307 | } 308 | 309 | /*=============== BREAKPOINTS ===============*/ 310 | /* For small devices */ 311 | @media screen and (max-width: 300px) { 312 | .sidebar { 313 | width: 232px; 314 | padding-inline: 1rem; 315 | } 316 | .sidebar__account { 317 | flex-direction: column; 318 | row-gap: .5rem; 319 | text-align: center; 320 | } 321 | .sidebar__account i { 322 | margin: 0; 323 | } 324 | } 325 | 326 | /* For large devices */ 327 | @media screen and (min-width: 1024px) { 328 | .header__container { 329 | height: calc(var(--header-height) + 1.5rem); 330 | } 331 | .header__toggle { 332 | font-size: 1.5rem; 333 | } 334 | 335 | .sidebar { 336 | left: 0; 337 | top: calc(var(--header-height) + 1.5rem); 338 | width: 300px; 339 | transition: width .4s; 340 | } 341 | .sidebar__container { 342 | padding-bottom: 4rem; 343 | overflow: hidden; 344 | } 345 | .sidebar__logo { 346 | transition: padding .4s; 347 | } 348 | .sidebar__link { 349 | position: relative; 350 | padding-inline: 1.5rem; 351 | column-gap: 2rem; 352 | } 353 | .sidebar__link i { 354 | font-size: 1.5rem; 355 | } 356 | .sidebar__link-name { 357 | transition: color .4s, opacity .4s; 358 | } 359 | .sidebar__title { 360 | position: relative; 361 | } 362 | .sidebar__title::after { 363 | content: ""; 364 | position: absolute; 365 | top: 50%; 366 | left: 0; 367 | width: 100%; 368 | height: 1px; 369 | background: var(--gradient-x); 370 | opacity: 0; 371 | } 372 | .sidebar__account { 373 | column-gap: 1rem; 374 | padding-left: .5rem; 375 | margin-top: auto; 376 | } 377 | .sidebar__logo-text, 378 | .sidebar__title, 379 | .sidebar__title::after, 380 | .sidebar__title span { 381 | transition: opacity .4s; 382 | } 383 | .sidebar__link-floating { 384 | display: block; 385 | font-size: 10px; 386 | width: max-content; 387 | margin: 0 auto; 388 | position: absolute; 389 | left: 0; 390 | right: 0; 391 | bottom: 4px; 392 | transition: color .4s, opacity .4s; 393 | opacity: 0; 394 | } 395 | 396 | .main { 397 | padding-left: 300px; 398 | padding-top: 6rem; 399 | transition: padding .4s; 400 | } 401 | 402 | /* Reduce sidebar */ 403 | .show-sidebar { 404 | width: 120px; 405 | } 406 | 407 | .show-sidebar .sidebar__logo { 408 | padding-left: 1rem; 409 | } 410 | 411 | .show-sidebar .sidebar__logo-text, 412 | .show-sidebar .sidebar__link-name { 413 | opacity: 0; 414 | } 415 | 416 | .show-sidebar .sidebar__title span { 417 | opacity: 0; 418 | pointer-events: none; 419 | } 420 | 421 | .show-sidebar .sidebar__title::after { 422 | opacity: 1; 423 | } 424 | 425 | .show-sidebar .sidebar__link:hover .sidebar__link-floating { 426 | opacity: 1; 427 | color: var(--white-color); 428 | } 429 | 430 | .show-sidebar .main { 431 | padding-left: 300px; 432 | } 433 | 434 | /* Add padding main */ 435 | .main-pd { 436 | padding-left: 120px; 437 | } 438 | } -------------------------------------------------------------------------------- /assets/img/perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu-youtube/ac2a7384ba805131acc527a26f61ac7f37acb78f/assets/img/perfil.png -------------------------------------------------------------------------------- /assets/img/sidebar-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu-youtube/ac2a7384ba805131acc527a26f61ac7f37acb78f/assets/img/sidebar-bg.jpg -------------------------------------------------------------------------------- /assets/img/yt-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /assets/img/yt-logo-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/yt-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW SIDEBAR ===============*/ 2 | const showSidebar = (toggleId, sidebarId, mainId) =>{ 3 | const toggle = document.getElementById(toggleId), 4 | sidebar = document.getElementById(sidebarId), 5 | main = document.getElementById(mainId) 6 | 7 | if(toggle && sidebar && main){ 8 | toggle.addEventListener('click', ()=>{ 9 | /* Show sidebar */ 10 | sidebar.classList.toggle('show-sidebar') 11 | /* Add padding main */ 12 | main.classList.toggle('main-pd') 13 | }) 14 | } 15 | } 16 | showSidebar('header-toggle','sidebar', 'main') 17 | 18 | /*=============== LINK ACTIVE ===============*/ 19 | const sidebarLink = document.querySelectorAll('.sidebar__link') 20 | 21 | function linkColor(){ 22 | sidebarLink.forEach(l => l.classList.remove('active-link')) 23 | this.classList.add('active-link') 24 | } 25 | 26 | sidebarLink.forEach(l => l.addEventListener('click', linkColor)) -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | body{ 9 | font-family: var(--body-font); 10 | font-size: var(--normal-font-size); 11 | color: var(--text-color); 12 | } 13 | 14 | a{ 15 | text-decoration: none; 16 | } 17 | 18 | img{ 19 | display: block; 20 | max-width: 100%; 21 | height: auto; 22 | } -------------------------------------------------------------------------------- /assets/scss/components/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | /*=============== BREAKPOINTS ===============*/ 2 | /* For small devices */ 3 | @media screen and (max-width: 300px){ 4 | .sidebar{ 5 | width: 232px; 6 | padding-inline: 1rem; 7 | 8 | &__account{ 9 | flex-direction: column; 10 | row-gap: .5rem; 11 | text-align: center; 12 | 13 | & i{ 14 | margin: 0; 15 | } 16 | } 17 | } 18 | } 19 | 20 | /* For large devices */ 21 | @media screen and (min-width: 1024px){ 22 | .header{ 23 | &__container{ 24 | height: calc(var(--header-height) + 1.5rem); 25 | } 26 | &__toggle{ 27 | font-size: 1.5rem; 28 | } 29 | } 30 | 31 | .sidebar{ 32 | left: 0; 33 | top: calc(var(--header-height) + 1.5rem); 34 | width: 300px; 35 | transition: width .4s; 36 | 37 | &__container{ 38 | padding-bottom: 4rem; 39 | overflow: hidden; 40 | } 41 | &__logo{ 42 | transition: padding .4s; 43 | } 44 | &__link{ 45 | position: relative; 46 | padding-inline: 1.5rem; 47 | column-gap: 2rem; 48 | 49 | & i{ 50 | font-size: 1.5rem; 51 | } 52 | &-name{ 53 | transition: color .4s, opacity .4s; 54 | } 55 | } 56 | &__title{ 57 | position: relative; 58 | 59 | &::after{ 60 | content: ''; 61 | position: absolute; 62 | top: 50%; 63 | left: 0; 64 | width: 100%; 65 | height: 1px; 66 | background: var(--gradient-x); 67 | opacity: 0; 68 | } 69 | } 70 | &__account{ 71 | column-gap: 1rem; 72 | padding-left: .5rem; 73 | margin-top: auto; 74 | } 75 | &__logo-text, 76 | &__title, 77 | &__title::after, 78 | &__title span{ 79 | transition: opacity .4s; 80 | } 81 | &__link-floating{ 82 | display: block; 83 | font-size: 10px; 84 | width: max-content; 85 | margin: 0 auto; 86 | position: absolute; 87 | left: 0; 88 | right: 0; 89 | bottom: 4px; 90 | transition: color .4s, opacity .4s; 91 | opacity: 0; 92 | } 93 | } 94 | 95 | .main{ 96 | padding-left: 300px; 97 | padding-top: 6rem; 98 | transition: padding .4s; 99 | } 100 | 101 | /* Reduce sidebar */ 102 | .show-sidebar{ 103 | width: 120px; 104 | 105 | & .sidebar__logo{ 106 | padding-left: 1rem; 107 | } 108 | & .sidebar__logo-text, 109 | & .sidebar__link-name{ 110 | opacity: 0; 111 | } 112 | & .sidebar__title span{ 113 | opacity: 0; 114 | pointer-events: none; 115 | } 116 | & .sidebar__title::after{ 117 | opacity: 1; 118 | } 119 | & .sidebar__link:hover .sidebar__link-floating{ 120 | opacity: 1; 121 | color: var(--white-color); 122 | } 123 | & .main{ 124 | padding-left: 300px; 125 | } 126 | } 127 | 128 | /* Add padding main */ 129 | .main-pd{ 130 | padding-left: 120px; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /assets/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | /*=============== HEADER ===============*/ 2 | .header{ 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | background-color: var(--dark-color-light); 8 | backdrop-filter: blur(16px); 9 | -webkit-backdrop-filter: blur(16px); 10 | z-index: var(--z-fixed); 11 | 12 | &::after{ 13 | content: ''; 14 | position: absolute; 15 | left: 0; 16 | bottom: 0; 17 | width: 100%; 18 | height: 1px; 19 | background: var(--gradient-x); 20 | } 21 | &__container{ 22 | height: var(--header-height); 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | } 27 | &__toggle{ 28 | font-size: 1.25rem; 29 | color: var(--white-color); 30 | cursor: pointer; 31 | } 32 | &__logo{ 33 | width: 70px; 34 | } 35 | } -------------------------------------------------------------------------------- /assets/scss/components/_sidebar.scss: -------------------------------------------------------------------------------- 1 | /*=============== SIDEBAR ===============*/ 2 | .sidebar{ 3 | position: fixed; 4 | left: -100%; 5 | top: var(--header-height); 6 | width: 280px; 7 | height: 100%; 8 | padding: 2rem 1.5rem; 9 | background-color: var(--dark-color-light); 10 | backdrop-filter: blur(16px); 11 | -webkit-backdrop-filter: blur(16px); 12 | z-index: var(--z-fixed); 13 | transition: left .4s; 14 | 15 | &::after{ 16 | content: ''; 17 | position: absolute; 18 | right: 0; 19 | top: 0; 20 | width: 1px; 21 | height: 100%; 22 | background: var(--gradient-y); 23 | } 24 | &__container{ 25 | display: flex; 26 | flex-direction: column; 27 | row-gap: 2rem; 28 | padding-bottom: 3rem; 29 | height: 100%; 30 | } 31 | &__logo{ 32 | display: grid; 33 | grid-template-columns: repeat(2, max-content); 34 | column-gap: .5rem; 35 | 36 | &-img{ 37 | width: 37px; 38 | } 39 | &-text{ 40 | width: 76px; 41 | } 42 | } 43 | &__content{ 44 | position: relative; 45 | overflow: auto; 46 | padding-top: 2rem; 47 | 48 | &::-webkit-scrollbar{ 49 | display: none; 50 | } 51 | &::after{ 52 | content: ''; 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 1px; 58 | background: var(--gradient-x); 59 | } 60 | } 61 | &__list{ 62 | display: flex; 63 | flex-direction: column; 64 | row-gap: .25rem; 65 | } 66 | &__link{ 67 | &-floating{ 68 | display: none; 69 | } 70 | 71 | color: var(--text-color); 72 | display: grid; 73 | grid-template-columns: repeat(2, max-content); 74 | align-items: center; 75 | column-gap: 1.5rem; 76 | padding: 1rem; 77 | border-radius: .25rem; 78 | transition: background .3s; 79 | 80 | & i{ 81 | color: var(--white-color); 82 | font-size: 1.25rem; 83 | } 84 | &-name{ 85 | font-weight: var(--font-medium); 86 | transition: color .4s; 87 | } 88 | &:hover{ 89 | background-color: var(--white-color-light); 90 | backdrop-filter: blur(16px); 91 | -webkit-backdrop-filter: blur(16px); 92 | color: var(--white-color); 93 | } 94 | } 95 | &__title span{ 96 | display: block; 97 | position: relative; 98 | margin-block: 2rem 1.5rem; 99 | text-align: center; 100 | color: var(--white-color); 101 | font-size: var(--normal-font-size); 102 | 103 | &::before, 104 | &::after{ 105 | content: ''; 106 | position: absolute; 107 | top: 50%; 108 | width: 30%; 109 | height: 1px; 110 | } 111 | &::before{ 112 | background: linear-gradient(90deg, 113 | hsla(0, 0%, 0%, 0), 114 | hsl(210, 4%, 64%)); 115 | left: 0; 116 | } 117 | &::after{ 118 | background: linear-gradient(90deg, 119 | hsl(210, 4%, 64%), 120 | hsla(0, 0%, 0%, 0)); 121 | right: 0; 122 | } 123 | } 124 | &__perfil{ 125 | width: 55px; 126 | border-radius: 50%; 127 | border: 2px solid var(--white-color); 128 | } 129 | &__account{ 130 | display: flex; 131 | align-items: center; 132 | column-gap: .5rem; 133 | } 134 | &__name{ 135 | font-size: var(--normal-font-size); 136 | color: var(--white-color); 137 | margin-bottom: .25rem; 138 | } 139 | &__email{ 140 | font-size: var(--small-font-size); 141 | font-weight: var(--font-medium); 142 | } 143 | &__account i{ 144 | color: var(--white-color); 145 | font-size: 1.5rem; 146 | margin-left: auto; 147 | cursor: pointer; 148 | } 149 | } 150 | 151 | /* Show sidebar */ 152 | .show-sidebar{ 153 | left: 0; 154 | } 155 | 156 | /* Active link */ 157 | .active-link{ 158 | background-color: var(--white-color-light); 159 | backdrop-filter: blur(16px); 160 | -webkit-backdrop-filter: blur(16px); 161 | 162 | & span{ 163 | color: var(--white-color); 164 | } 165 | } -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | /*Color mode HSL(hue, saturation, lightness)*/ 10 | --white-color: hsl(210, 32%, 99%); 11 | --text-color: hsl(210, 4%, 55%); 12 | --dark-color-light: hsla(210, 4%, 4%, .1); 13 | --white-color-light: hsla(210, 4%, 99%, .1); 14 | --gradient-x: linear-gradient(90deg, 15 | hsla(0, 0%, 0%, 0), 16 | hsl(210, 4%, 64%), 17 | hsla(0, 0%, 0%, 0)); 18 | --gradient-y: linear-gradient(0, 19 | hsla(0, 0%, 0%, 0), 20 | hsl(210, 4%, 64%), 21 | hsla(0, 0%, 0%, 0)); 22 | 23 | /*========== Font and typography ==========*/ 24 | /*.5rem = 8px | 1rem = 16px ...*/ 25 | --body-font: 'Montserrat', sans-serif; 26 | 27 | --normal-font-size: .938rem; 28 | --small-font-size: .813rem; 29 | 30 | // Responsive typography 31 | @media screen and (min-width: 1024px){ 32 | --normal-font-size: 1rem; 33 | --small-font-size: .875rem; 34 | } 35 | 36 | /*========== Font weight ==========*/ 37 | --font-medium: 500; 38 | --font-semi-bold: 600; 39 | 40 | /*========== z index ==========*/ 41 | --z-tooltip: 10; 42 | --z-fixed: 100; 43 | } -------------------------------------------------------------------------------- /assets/scss/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | /*=============== LAYOUT ===============*/ 2 | .container{ 3 | margin-inline: 1.5rem; 4 | } 5 | 6 | .main{ 7 | padding-top: 5rem; 8 | } 9 | 10 | .bg-image{ 11 | position: absolute; 12 | left: 0; 13 | top: 0; 14 | width: 100%; 15 | height: 100%; 16 | object-fit: cover; 17 | object-position: center; 18 | z-index: -1; 19 | } 20 | -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'layout/layout'; 4 | @import 'components/header'; 5 | @import 'components/sidebar'; 6 | @import 'components/breakpoints'; 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Responsive sidebar menu - Bedimcode 14 | 15 | 16 | 17 | sidebar img 18 | 19 | 20 |
21 |
22 |
23 | 24 |
25 | 26 | 29 |
30 |
31 | 32 | 33 | 134 | 135 | 136 |
137 |

Sidebar Menu

138 |
139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu-youtube/ac2a7384ba805131acc527a26f61ac7f37acb78f/preview.png --------------------------------------------------------------------------------