├── preview.png
├── assets
├── img
│ ├── perfil.png
│ ├── sidebar-bg.jpg
│ ├── yt-logo.svg
│ ├── yt-logo-text.svg
│ └── yt-logo-full.svg
├── scss
│ ├── styles.scss
│ ├── layout
│ │ └── _layout.scss
│ ├── base
│ │ └── _base.scss
│ ├── components
│ │ ├── _header.scss
│ │ ├── _breakpoints.scss
│ │ └── _sidebar.scss
│ └── config
│ │ └── _variables.scss
├── js
│ └── main.js
└── css
│ └── styles.css
├── README.md
└── index.html
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu-youtube/HEAD/preview.png
--------------------------------------------------------------------------------
/assets/img/perfil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu-youtube/HEAD/assets/img/perfil.png
--------------------------------------------------------------------------------
/assets/img/sidebar-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-sidebar-menu-youtube/HEAD/assets/img/sidebar-bg.jpg
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 | }
--------------------------------------------------------------------------------
/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 | 
13 |
--------------------------------------------------------------------------------
/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/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/img/yt-logo.svg:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/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/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/_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/img/yt-logo-text.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/assets/img/yt-logo-full.svg:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Responsive sidebar menu - Bedimcode
14 |
15 |
16 |
17 | 
18 |
19 |
20 |
31 |
32 |
33 |
134 |
135 |
136 |
137 | Sidebar Menu
138 |
139 |
140 |
141 |
142 |
143 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
28 |
29 |