Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added mobile optimization to the Sidebar styles.sass

Browse Source
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
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/common/components/Sidebar/styles.sass
View File

@ -7,6 +7,7 @@ aside
border-right: $dark-gray 2px solid border-right: $dark-gray 2px solid
height: 100vh height: 100vh
overflow: hidden overflow: hidden
z-index: 5
.sidebar-hidden .sidebar-hidden
display: none display: none
@ -14,3 +15,20 @@ aside
@media screen and (max-width: 1024px) @media screen and (max-width: 1024px)
aside aside
position: fixed 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)