add a crude responsive collapsible sidebar

This commit is contained in:
El RIDO
2020-06-27 13:36:53 +02:00
parent e35a26c916
commit 8537f396b3
4 changed files with 65 additions and 7 deletions

View File

@@ -205,3 +205,49 @@ li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
.modal .modal-content button {
margin: 0.5em 0;
}
/* sidebar */
#menu-toggle {
position: absolute;
top: 145px;
left: -3.3ch;
transform: rotate(90deg);
transition: all 0.5s ease;
}
main.toggled #menu-toggle {
left: 220px;
}
@media (max-width: 768px) {
#menu-toggle {
position: static;
margin-bottom: 1em;
transform: rotate(0);
}
}
main {
padding-left: 0;
transition: all 0.5s ease;
}
main.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
padding-left: 4ch;
overflow-y: scroll;
overflow-x: hidden;
transition: all 0.5s ease;
}
main.toggled #sidebar-wrapper {
width: 250px;
}