Animated sidebar (#649)

* Initial Commit

* Add transition
This commit is contained in:
Anirudh 2023-07-15 17:56:18 +05:30 committed by GitHub
parent af47a68632
commit dd19323280
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 10 deletions

View file

@ -27,10 +27,20 @@
.nav.active {
position: relative;
animation: nav-open 1000ms ease-in-out forwards;
left: 0;
opacity: 1;
}
@keyframes nav-open {
0% {
width: 0%;
}
100%{
width: 100%;
}
}
.nav-mask.active {
opacity: 1;
pointer-events: auto;
@ -38,9 +48,9 @@
@media (max-width: 767px) {
.nav {
width: calc(100% - 60px) ;
transition: all 0.5s;
width: calc(100% - 60px);
}
.nav-mask {
position: fixed;
z-index: 35;
@ -52,7 +62,6 @@
padding-left: 420px;
padding-top: 12px;
opacity: 0;
transition: all 0.5s;
pointer-events: none;
}
@ -63,6 +72,7 @@
.nav.active {
position: fixed;
animation: none;
}
}