Added mobile optimization to the Sidebar styles.sass

This commit is contained in:
Mathias Wagner 2023-05-30 20:05:51 +02:00
parent 9b035276dd
commit 0699bf394b
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44

View File

@ -7,6 +7,7 @@ aside
border-right: $dark-gray 2px solid
height: 100vh
overflow: hidden
z-index: 5
.sidebar-hidden
display: none
@ -14,3 +15,20 @@ aside
@media screen and (max-width: 1024px)
aside
position: fixed
transition: .5s ease-in-out
.sidebar-hidden
display: block
opacity: 100
transform: translateX(-20rem)
.background-overlay
position: fixed
top: 0
left: 0
width: 100vw
height: 100vh
background-color: rgba(0, 0, 0, .5)
transition: .5s ease-in-out
z-index: 1
backdrop-filter: blur(1px)