├── README.md ├── index.html ├── script.js ├── style.css └── user.jpg /README.md: -------------------------------------------------------------------------------- 1 | # responsive-dashboard-sidebar 2 | 3 | ## Dive into Responsive Dashboard Sidebars! 📱💻 4 | 5 | Learn to create a dynamic sidebar using HTML, CSS, and JS. Craft a modern, adaptable design for various devices. Elevate your web skills! 🚀🎨🔧 6 | 7 | Get started here: [Tutorial Link](https://bit.ly/46lVDp0) 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Sidebar 13 | 14 | 15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 |
25 |

web developer

26 |

John Doe

27 |
28 |
29 |
30 |
31 |

Main

32 | 100 |
101 |
102 |

Settings

103 | 111 |
112 |
113 |
114 |

Account

115 | 129 |
130 |
131 |
132 |

133 | Fully Responsive
134 | Sidebar by OSC 135 |

136 |
137 |
138 | 139 | 140 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | $(".menu > ul > li").click(function (e) { 2 | // remove active from already active 3 | $(this).siblings().removeClass("active"); 4 | // add active to clicked 5 | $(this).toggleClass("active"); 6 | // if has sub menu open it 7 | $(this).find("ul").slideToggle(); 8 | // close other sub menu if any open 9 | $(this).siblings().find("ul").slideUp(); 10 | // remove active class of sub menu items 11 | $(this).siblings().find("ul").find("li").removeClass("active"); 12 | }); 13 | 14 | $(".menu-btn").click(function () { 15 | $(".sidebar").toggleClass("active"); 16 | }); 17 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900); 2 | 3 | /* Reset CSS */ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: "Inter", sans-serif; 9 | } 10 | body { 11 | background-color: #dbe2f4; 12 | } 13 | .container { 14 | display: flex; 15 | align-items: center; 16 | width: 100%; 17 | min-height: 100vh; 18 | } 19 | .sidebar { 20 | position: relative; 21 | width: 256px; 22 | height: 100vh; 23 | display: flex; 24 | flex-direction: column; 25 | gap: 20px; 26 | background-color: #fff; 27 | padding: 24px; 28 | border-radius: 30px; 29 | transition: all 0.3s; 30 | } 31 | .sidebar .head { 32 | display: flex; 33 | gap: 20px; 34 | padding-bottom: 20px; 35 | border-bottom: 1px solid #f6f6f6; 36 | } 37 | .user-img { 38 | width: 44px; 39 | height: 44px; 40 | border-radius: 50%; 41 | overflow: hidden; 42 | } 43 | .user-img img { 44 | width: 100%; 45 | object-fit: cover; 46 | } 47 | .user-details .title, 48 | .menu .title { 49 | font-size: 10px; 50 | font-weight: 500; 51 | color: #757575; 52 | text-transform: uppercase; 53 | margin-bottom: 10px; 54 | } 55 | .user-details .name { 56 | font-size: 14px; 57 | font-weight: 500; 58 | } 59 | .nav { 60 | flex: 1; 61 | } 62 | .menu ul li { 63 | position: relative; 64 | list-style: none; 65 | margin-bottom: 5px; 66 | } 67 | .menu ul li a { 68 | display: flex; 69 | align-items: center; 70 | gap: 10px; 71 | font-size: 14px; 72 | font-weight: 500; 73 | color: #757575; 74 | text-decoration: none; 75 | padding: 12px 8px; 76 | border-radius: 8px; 77 | transition: all 0.3s; 78 | } 79 | .menu ul li > a:hover, 80 | .menu ul li.active > a { 81 | color: #000; 82 | background-color: #f6f6f6; 83 | } 84 | .menu ul li .icon { 85 | font-size: 20px; 86 | } 87 | .menu ul li .text { 88 | flex: 1; 89 | } 90 | .menu ul li .arrow { 91 | font-size: 14px; 92 | transition: all 0.3s; 93 | } 94 | .menu ul li.active .arrow { 95 | transform: rotate(180deg); 96 | } 97 | .menu .sub-menu { 98 | display: none; 99 | margin-left: 20px; 100 | padding-left: 20px; 101 | padding-top: 5px; 102 | border-left: 1px solid #f6f6f6; 103 | } 104 | .menu .sub-menu li a { 105 | padding: 10px 8px; 106 | font-size: 12px; 107 | } 108 | .menu:not(:last-child) { 109 | padding-bottom: 10px; 110 | margin-bottom: 20px; 111 | border-bottom: 2px solid #f6f6f6; 112 | } 113 | .menu-btn { 114 | position: absolute; 115 | right: -14px; 116 | top: 3.5%; 117 | width: 28px; 118 | height: 28px; 119 | border-radius: 8px; 120 | display: flex; 121 | align-items: center; 122 | justify-content: center; 123 | cursor: pointer; 124 | color: #757575; 125 | border: 2px solid #f6f6f6; 126 | background-color: #fff; 127 | } 128 | .menu-btn:hover i { 129 | color: #000; 130 | } 131 | .menu-btn i { 132 | transition: all 0.3s; 133 | } 134 | .sidebar.active { 135 | width: 92px; 136 | } 137 | .sidebar.active .menu-btn i { 138 | transform: rotate(180deg); 139 | } 140 | .sidebar.active .user-details { 141 | display: none; 142 | } 143 | .sidebar.active .menu .title { 144 | text-align: center; 145 | } 146 | .sidebar.active .menu ul li .arrow { 147 | display: none; 148 | } 149 | .sidebar.active .menu > ul > li > a { 150 | position: relative; 151 | display: flex; 152 | align-items: center; 153 | justify-content: center; 154 | } 155 | .sidebar.active .menu > ul > li > a .text { 156 | position: absolute; 157 | left: 70px; 158 | top: 50%; 159 | transform: translateY(-50%); 160 | padding: 10px; 161 | border-radius: 4px; 162 | color: #fff; 163 | background-color: #000; 164 | opacity: 0; 165 | visibility: hidden; 166 | transition: all 0.3s; 167 | } 168 | .sidebar.active .menu > ul > li > a .text::after { 169 | content: ""; 170 | position: absolute; 171 | left: -5px; 172 | top: 20%; 173 | width: 20px; 174 | height: 20px; 175 | border-radius: 2px; 176 | background-color: #000; 177 | transform: rotate(45deg); 178 | z-index: -1; 179 | } 180 | .sidebar.active .menu > ul > li > a:hover .text { 181 | left: 50px; 182 | opacity: 1; 183 | visibility: visible; 184 | } 185 | .sidebar.active .menu .sub-menu { 186 | position: absolute; 187 | top: 0; 188 | left: 20px; 189 | width: 200px; 190 | border-radius: 20px; 191 | padding: 10px 20px; 192 | border: 1px solid #f6f6f6; 193 | background-color: #fff; 194 | box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.1); 195 | } 196 | 197 | .credits { 198 | margin: 0 auto; 199 | color: #fff; 200 | text-align: center; 201 | font-size: 3rem; 202 | } 203 | -------------------------------------------------------------------------------- /user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/responsive-dashboard-sidebar/958d2fccdfa49110fd0345ecb4dacf7dc645dcb7/user.jpg --------------------------------------------------------------------------------