Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance sidebar animations: improve open/close transitions and add reveal effects for sidebar elements.

Browse Source
This commit is contained in:
Vishnu
2025-05-09 10:18:13 +05:30
parent c3b18aff78
commit 49da64140c
5 changed files with 146 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/src/styles/layout/sidebar.scss
View File

@@ -1437,9 +1437,11 @@
width: 100%;
height: 100%;
font-size: var(--font-size-regular);
background: linear-gradient(0deg,
rgba(37, 24, 51, 0) 0%,
rgba(52, 41, 61, 0.5) 100%);
background: linear-gradient(
0deg,
rgba(37, 24, 51, 0) 0%,
rgba(52, 41, 61, 0.5) 100%
);
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
@@ -1480,26 +1482,48 @@
.sidebar-left-wrapper,
.sidebar-right-wrapper {
height: calc(54vh + 150px);
transition: height 0.2s ease-in-out;
.sidebar-left-container {
height: 100%;
.sidebar-left-content-container{
max-height: 80%;
.widget-left-sideBar{
height: 80%;
.widget2D.widgets-wrapper{
min-height: 50vh;
height: 60%;
}
}
}
}
}
.sidebar-left-wrapper.closed,
.sidebar-right-wrapper.closed {
height: 52px;
}
animation: closeSidebar 0.2s linear forwards;
}
.sidebar-left-wrapper.open,
.sidebar-right-wrapper.open {
height: fit-content;
animation: openSidebar 0.2s linear;
.sidebar-right-container,
.sidebar-left-container {
opacity: 0;
animation: revealSmooth 0.3s 0.1s linear forwards;
}
}
@keyframes revealSmooth {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes closeSidebar{
from{
height: 60%;
}
to{
height: 52px;
}
}
@keyframes openSidebar{
from{
height: 52px;
}
to{
height: 60%;
}
}