Skip to content

Commit 57a9ddb

Browse files
meroxdotdevmeroxdotdev
committed
chore: test new design
1 parent 265b65d commit 57a9ddb

File tree

2 files changed

+359
-55
lines changed

2 files changed

+359
-55
lines changed

‎_sass/layout/_sidebar.scss‎

Lines changed: 123 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
$btn-border-width: 3px;
77
$btn-mb: 0.5rem;
8-
$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
8+
$sidebar-display: 'sidebar-display';
99

1010
#sidebar {
1111
@include mx.pl-pr(0);
@@ -18,10 +18,13 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
1818
width: v.$sidebar-width;
1919
background: var(--sidebar-bg);
2020
border-right: 1px solid var(--sidebar-border-color);
21+
backdrop-filter: blur(20px) saturate(180%);
22+
-webkit-backdrop-filter: blur(20px) saturate(180%);
23+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
2124

2225
/* Hide scrollbar for IE, Edge and Firefox */
23-
-ms-overflow-style: none; /* IE and Edge */
24-
scrollbar-width: none; /* Firefox */
26+
-ms-overflow-style: none;
27+
scrollbar-width: none;
2528

2629
/* Hide scrollbar for Chrome, Safari and Opera */
2730
&::-webkit-scrollbar {
@@ -30,9 +33,9 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
3033

3134
@include bp.lt(bp.get(lg)) {
3235
@include mx.slide;
33-
34-
transform: translateX(-#{v.$sidebar-width}); /* hide */
36+
transform: translateX(-#{v.$sidebar-width});
3537
-webkit-transform: translateX(-#{v.$sidebar-width});
38+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3639

3740
[#{$sidebar-display}] & {
3841
transform: translateX(0);
@@ -59,7 +62,8 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
5962
height: 6.5rem;
6063
overflow: hidden;
6164
box-shadow: var(--avatar-border-color) 0 0 0 2px;
62-
transform: translateZ(0); /* fixed the zoom in Safari */
65+
transform: translateZ(0);
66+
border-radius: 50%; /* Retained from first code for consistency */
6367

6468
@include bp.sm {
6569
width: 7rem;
@@ -68,6 +72,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
6872

6973
img {
7074
transition: transform 0.5s;
75+
filter: contrast(1.05) saturate(1.05); /* Retained from first code for consistency */
7176

7277
&:hover {
7378
transform: scale(1.2);
@@ -78,7 +83,6 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
7883
.profile-wrapper {
7984
@include mx.mt-mb(2.5rem);
8085
@extend %clickable-transition;
81-
8286
padding-left: 2.5rem;
8387
padding-right: 1.25rem;
8488
width: 100%;
@@ -97,7 +101,6 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
97101
.site-title {
98102
@extend %clickable-transition;
99103
@extend %sidebar-link-hover;
100-
101104
font-family: inherit;
102105
font-weight: 900;
103106
font-size: 1.75rem;
@@ -114,10 +117,17 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
114117
color: var(--site-subtitle-color);
115118
margin-top: 0.25rem;
116119
word-spacing: 1px;
120+
line-height: 1.4;
117121
-webkit-user-select: none;
118122
-moz-user-select: none;
119123
-ms-user-select: none;
120124
user-select: none;
125+
transition: opacity 0.3s ease;
126+
opacity: 0.8;
127+
128+
&:hover {
129+
opacity: 1;
130+
}
121131
}
122132

123133
ul {
@@ -126,29 +136,62 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
126136
li.nav-item {
127137
opacity: 0.9;
128138
width: 100%;
139+
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
129140

130141
@include mx.pl-pr(1.5rem);
131142

132143
@include bp.xxxl {
133144
@include mx.pl-pr(2.75rem);
134145
}
135146

147+
&:hover {
148+
opacity: 1;
149+
transform: translateX(4px);
150+
}
151+
136152
a.nav-link {
137153
@include mx.pt-pb(0.6rem);
138-
139154
display: flex;
140155
align-items: center;
141-
border-radius: 0.75rem;
156+
border-radius: 12px;
142157
font-weight: 600;
158+
position: relative;
159+
overflow: hidden;
160+
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
161+
162+
// Subtle shine effect
163+
&::before {
164+
content: '';
165+
position: absolute;
166+
top: 0;
167+
left: -100%;
168+
width: 100%;
169+
height: 100%;
170+
background: linear-gradient(
171+
90deg,
172+
transparent 0%,
173+
rgba(255, 255, 255, 0.05) 50%,
174+
transparent 100%
175+
);
176+
transition: left 0.5s ease;
177+
}
143178

144179
&:hover {
145180
background-color: var(--sidebar-hover-bg);
181+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
182+
183+
&::before {
184+
left: 100%;
185+
}
146186
}
147187

148188
i {
149189
font-size: 95%;
150190
opacity: 0.8;
151-
margin-right: 1.5rem;
191+
margin-right: 1.25rem;
192+
transition: all 0.3s ease;
193+
width: 18px;
194+
text-align: center;
152195
}
153196

154197
span {
@@ -161,9 +204,18 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
161204
.nav-link {
162205
color: var(--sidebar-active-color);
163206
background-color: var(--sidebar-hover-bg);
207+
box-shadow:
208+
0 4px 12px rgba(0, 0, 0, 0.1),
209+
inset 3px 0 0 var(--sidebar-active-color);
210+
211+
i {
212+
opacity: 1;
213+
transform: scale(1.1);
214+
}
164215

165216
span {
166217
opacity: 1;
218+
font-weight: 700;
167219
}
168220
}
169221
}
@@ -189,21 +241,53 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
189241
%button {
190242
width: $btn-size;
191243
height: $btn-size;
192-
margin-bottom: $btn-mb; // multi line gap
244+
margin-bottom: $btn-mb;
193245
border-radius: 50%;
194246
color: var(--sidebar-btn-color);
195247
background-color: var(--sidebar-btn-bg);
196248
text-align: center;
197249
display: flex;
198250
align-items: center;
199251
justify-content: center;
252+
position: relative;
253+
overflow: hidden;
254+
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
200255

201256
&:not(:focus-visible) {
202-
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
257+
box-shadow:
258+
var(--sidebar-border-color) 0 0 0 1px,
259+
0 2px 8px rgba(0, 0, 0, 0.1);
260+
}
261+
262+
// Ripple effect
263+
&::before {
264+
content: '';
265+
position: absolute;
266+
top: 50%;
267+
left: 50%;
268+
width: 0;
269+
height: 0;
270+
border-radius: 50%;
271+
background: rgba(255, 255, 255, 0.2);
272+
transition: all 0.3s ease;
273+
transform: translate(-50%, -50%);
203274
}
204275

205276
&:hover {
206277
background-color: var(--sidebar-hover-bg);
278+
transform: translateY(-2px) scale(1.05);
279+
box-shadow:
280+
0 8px 25px rgba(0, 0, 0, 0.15),
281+
0 4px 10px rgba(0, 0, 0, 0.1);
282+
283+
&::before {
284+
width: 100%;
285+
height: 100%;
286+
}
287+
}
288+
289+
&:active {
290+
transform: translateY(0) scale(0.95);
207291
}
208292
}
209293

@@ -223,36 +307,54 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
223307

224308
i {
225309
line-height: $btn-size;
310+
z-index: 1;
311+
position: relative;
226312
}
227313

228314
#mode-toggle {
229315
@extend %button;
230316
@extend %sidebar-links;
231317
@extend %sidebar-link-hover;
318+
319+
&:hover {
320+
i {
321+
transform: rotate(180deg);
322+
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
323+
}
324+
}
232325
}
233326

234327
.icon-border {
235328
@extend %no-cursor;
236329
@include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
237-
238330
background-color: var(--sidebar-btn-color);
239331
content: '';
240332
width: $btn-border-width;
241333
height: $btn-border-width;
242334
border-radius: 50%;
243335
margin-bottom: $btn-mb;
336+
opacity: 0.6;
244337

245338
@include bp.xxxl {
246339
@include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
247340
}
248341
}
249-
} /* .sidebar-bottom */
250-
} /* #sidebar */
342+
}
343+
344+
[#{$sidebar-display}] {
345+
#main-wrapper {
346+
@include bp.lt(bp.get(lg)) {
347+
transform: translateX(v.$sidebar-width);
348+
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
349+
}
350+
}
351+
}
251352

252-
[#{$sidebar-display}] {
253-
#main-wrapper {
254-
@include bp.lt(bp.get(lg)) {
255-
transform: translateX(v.$sidebar-width);
353+
// Reduce motion for accessibility
354+
@media (prefers-reduced-motion: reduce) {
355+
* {
356+
transition-duration: 0.1s !important;
357+
animation: none !important;
256358
}
257359
}
258-
}
360+
}

0 commit comments

Comments
 (0)