├── README.md ├── assets ├── css │ └── styles.css ├── img │ └── perfil.jpg ├── js │ └── main.js └── scss │ └── styles.scss └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Sidebar Menu 2 | ## [Watch it on youtube](https://youtu.be/C6227evfBig) 3 | ### Responsive Sidebar Menu 4 | Beautiful and simple sidebar menu, contains a logo and link icons. Include in the header a button that shows and hides the sidebar. 5 | 6 | Don't forget to join the channel for more videos like this. 7 | [Bedimcode](https://www.youtube.com/c/Bedimcode) 8 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root{ 6 | --header-height: 3rem; 7 | --nav-width: 68px; 8 | 9 | /*===== Colors =====*/ 10 | --first-color: #4723D9; 11 | --first-color-light: #AFA5D9; 12 | --white-color: #F7F6FB; 13 | 14 | /*===== Font and typography =====*/ 15 | --body-font: 'Nunito', sans-serif; 16 | --normal-font-size: 1rem; 17 | 18 | /*===== z index =====*/ 19 | --z-fixed: 100; 20 | } 21 | 22 | /*===== BASE =====*/ 23 | *,::before,::after{ 24 | box-sizing: border-box; 25 | } 26 | 27 | body{ 28 | position: relative; 29 | margin: var(--header-height) 0 0 0; 30 | padding: 0 1rem; 31 | font-family: var(--body-font); 32 | font-size: var(--normal-font-size); 33 | transition: .5s; 34 | } 35 | 36 | a{ 37 | text-decoration: none; 38 | } 39 | 40 | /*===== HEADER =====*/ 41 | .header{ 42 | width: 100%; 43 | height: var(--header-height); 44 | position: fixed; 45 | top: 0; 46 | left: 0; 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | padding: 0 1rem; 51 | background-color: var(--white-color); 52 | z-index: var(--z-fixed); 53 | transition: .5s; 54 | } 55 | 56 | .header__toggle{ 57 | color: var(--first-color); 58 | font-size: 1.5rem; 59 | cursor: pointer; 60 | } 61 | 62 | .header__img{ 63 | width: 35px; 64 | height: 35px; 65 | display: flex; 66 | justify-content: center; 67 | border-radius: 50%; 68 | overflow: hidden; 69 | } 70 | 71 | .header__img img{ 72 | width: 40px; 73 | } 74 | 75 | /*===== NAV =====*/ 76 | .l-navbar{ 77 | position: fixed; 78 | top: 0; 79 | left: -30%; 80 | width: var(--nav-width); 81 | height: 100vh; 82 | background-color: var(--first-color); 83 | padding: .5rem 1rem 0 0; 84 | transition: .5s; 85 | z-index: var(--z-fixed); 86 | } 87 | 88 | .nav{ 89 | height: 100%; 90 | display: flex; 91 | flex-direction: column; 92 | justify-content: space-between; 93 | overflow: hidden; 94 | } 95 | 96 | .nav__logo, .nav__link{ 97 | display: grid; 98 | grid-template-columns: max-content max-content; 99 | align-items: center; 100 | column-gap: 1rem; 101 | padding: .5rem 0 .5rem 1.5rem; 102 | } 103 | 104 | .nav__logo{ 105 | margin-bottom: 2rem; 106 | } 107 | 108 | .nav__logo-icon{ 109 | font-size: 1.25rem; 110 | color: var(--white-color); 111 | } 112 | 113 | .nav__logo-name{ 114 | color: var(--white-color); 115 | font-weight: 700; 116 | } 117 | 118 | .nav__link{ 119 | position: relative; 120 | color: var(--first-color-light); 121 | margin-bottom: 1.5rem; 122 | transition: .3s; 123 | } 124 | 125 | .nav__link:hover{ 126 | color: var(--white-color); 127 | } 128 | 129 | .nav__icon{ 130 | font-size: 1.25rem; 131 | } 132 | 133 | /*Show navbar movil*/ 134 | .show{ 135 | left: 0; 136 | } 137 | 138 | /*Add padding body movil*/ 139 | .body-pd{ 140 | padding-left: calc(var(--nav-width) + 1rem); 141 | } 142 | 143 | /*Active links*/ 144 | .active{ 145 | color: var(--white-color); 146 | } 147 | 148 | .active::before{ 149 | content: ''; 150 | position: absolute; 151 | left: 0; 152 | width: 2px; 153 | height: 32px; 154 | background-color: var(--white-color); 155 | } 156 | 157 | /* ===== MEDIA QUERIES=====*/ 158 | @media screen and (min-width: 768px){ 159 | body{ 160 | margin: calc(var(--header-height) + 1rem) 0 0 0; 161 | padding-left: calc(var(--nav-width) + 2rem); 162 | } 163 | 164 | .header{ 165 | height: calc(var(--header-height) + 1rem); 166 | padding: 0 2rem 0 calc(var(--nav-width) + 2rem); 167 | } 168 | 169 | .header__img{ 170 | width: 40px; 171 | height: 40px; 172 | } 173 | 174 | .header__img img{ 175 | width: 45px; 176 | } 177 | 178 | .l-navbar{ 179 | left: 0; 180 | padding: 1rem 1rem 0 0; 181 | } 182 | 183 | /*Show navbar desktop*/ 184 | .show{ 185 | width: calc(var(--nav-width) + 156px); 186 | } 187 | 188 | /*Add padding body desktop*/ 189 | .body-pd{ 190 | padding-left: calc(var(--nav-width) + 188px); 191 | } 192 | } 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /assets/img/perfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu/bac0719476fdee8b082d4f45e14ef1a7a451bf85/assets/img/perfil.jpg -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*===== SHOW NAVBAR =====*/ 2 | const showNavbar = (toggleId, navId, bodyId, headerId) =>{ 3 | const toggle = document.getElementById(toggleId), 4 | nav = document.getElementById(navId), 5 | bodypd = document.getElementById(bodyId), 6 | headerpd = document.getElementById(headerId) 7 | 8 | // Validate that all variables exist 9 | if(toggle && nav && bodypd && headerpd){ 10 | toggle.addEventListener('click', ()=>{ 11 | // show navbar 12 | nav.classList.toggle('show') 13 | // change icon 14 | toggle.classList.toggle('bx-x') 15 | // add padding to body 16 | bodypd.classList.toggle('body-pd') 17 | // add padding to header 18 | headerpd.classList.toggle('body-pd') 19 | }) 20 | } 21 | } 22 | 23 | showNavbar('header-toggle','nav-bar','body-pd','header') 24 | 25 | /*===== LINK ACTIVE =====*/ 26 | const linkColor = document.querySelectorAll('.nav__link') 27 | 28 | function colorLink(){ 29 | if(linkColor){ 30 | linkColor.forEach(l=> l.classList.remove('active')) 31 | this.classList.add('active') 32 | } 33 | } 34 | linkColor.forEach(l=> l.addEventListener('click', colorLink)) -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap'); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root{ 6 | --header-height: 3rem; 7 | --nav-width: 68px; 8 | 9 | /*===== Colors =====*/ 10 | --first-color: #4723D9; 11 | --first-color-light: #AFA5D9; 12 | --white-color: #F7F6FB; 13 | 14 | /*===== Font and typography =====*/ 15 | --body-font: 'Nunito', sans-serif; 16 | --normal-font-size: 1rem; 17 | 18 | /*===== z index =====*/ 19 | --z-fixed: 100; 20 | } 21 | 22 | /*===== BASE =====*/ 23 | *,::before,::after{ 24 | box-sizing: border-box; 25 | } 26 | 27 | body{ 28 | position: relative; 29 | margin: var(--header-height) 0 0 0; 30 | padding: 0 1rem; 31 | font-family: var(--body-font); 32 | font-size: var(--normal-font-size); 33 | transition: .5s; 34 | } 35 | 36 | a{ 37 | text-decoration: none; 38 | } 39 | 40 | /*===== HEADER =====*/ 41 | .header{ 42 | width: 100%; 43 | height: var(--header-height); 44 | position: fixed; 45 | top: 0; 46 | left: 0; 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | padding: 0 1rem; 51 | background-color: var(--white-color); 52 | z-index: var(--z-fixed); 53 | transition: .5s; 54 | 55 | &__toggle{ 56 | color: var(--first-color); 57 | font-size: 1.5rem; 58 | cursor: pointer; 59 | } 60 | &__img{ 61 | width: 35px; 62 | height: 35px; 63 | display: flex; 64 | justify-content: center; 65 | border-radius: 50%; 66 | overflow: hidden; 67 | 68 | & img{ 69 | width: 40px; 70 | } 71 | } 72 | } 73 | 74 | /*===== NAV =====*/ 75 | .l-navbar{ 76 | position: fixed; 77 | top: 0; 78 | left: -30%; 79 | width: var(--nav-width); 80 | height: 100vh; 81 | background-color: var(--first-color); 82 | padding: .5rem 1rem 0 0; 83 | transition: .5s; 84 | z-index: var(--z-fixed); 85 | } 86 | 87 | .nav{ 88 | height: 100%; 89 | display: flex; 90 | flex-direction: column; 91 | justify-content: space-between; 92 | overflow: hidden; 93 | 94 | &__logo, &__link{ 95 | display: grid; 96 | grid-template-columns: max-content max-content; 97 | align-items: center; 98 | column-gap: 1rem; 99 | padding: .5rem 0 .5rem 1.5rem; 100 | } 101 | &__logo{ 102 | margin-bottom: 2rem; 103 | 104 | &-icon{ 105 | font-size: 1.25rem; 106 | color: var(--white-color); 107 | } 108 | &-name{ 109 | color: var(--white-color); 110 | font-weight: 700; 111 | } 112 | } 113 | 114 | &__link{ 115 | position: relative; 116 | color: var(--first-color-light); 117 | margin-bottom: 1.5rem; 118 | transition: .3s; 119 | 120 | &:hover{ 121 | color: var(--white-color); 122 | } 123 | } 124 | 125 | &__icon{ 126 | font-size: 1.25rem; 127 | } 128 | } 129 | 130 | /*Show navbar movil*/ 131 | .show{ 132 | left: 0; 133 | } 134 | 135 | /*Add padding body movil*/ 136 | .body-pd{ 137 | padding-left: calc(var(--nav-width) + 1rem); 138 | } 139 | 140 | /*Active links*/ 141 | .active{ 142 | color: var(--white-color); 143 | 144 | &::before{ 145 | content: ''; 146 | position: absolute; 147 | left: 0; 148 | width: 2px; 149 | height: 32px; 150 | background-color: var(--white-color); 151 | } 152 | } 153 | 154 | /* ===== MEDIA QUERIES=====*/ 155 | @media screen and (min-width: 768px){ 156 | body{ 157 | margin: calc(var(--header-height) + 1rem) 0 0 0; 158 | padding-left: calc(var(--nav-width) + 2rem); 159 | } 160 | .header{ 161 | height: calc(var(--header-height) + 1rem); 162 | padding: 0 2rem 0 calc(var(--nav-width) + 2rem); 163 | 164 | &__img{ 165 | width: 40px; 166 | height: 40px; 167 | 168 | & img{ 169 | width: 45px; 170 | } 171 | } 172 | } 173 | 174 | .l-navbar{ 175 | left: 0; 176 | padding: 1rem 1rem 0 0; 177 | } 178 | 179 | /*Show navbar desktop*/ 180 | .show{ 181 | width: calc(var(--nav-width) + 156px); 182 | } 183 | 184 | /*Add padding body desktop*/ 185 | .body-pd{ 186 | padding-left: calc(var(--nav-width) + 188px); 187 | } 188 | } 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Sidebar menu responsive 14 | 15 | 16 | 25 | 26 | 73 | 74 |

Components

75 | 76 | 77 | 78 | --------------------------------------------------------------------------------