Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make sidebar collapse centered and overlapping

Browse source 
Fix some styling stuff that was being done via JavaScript that can be
done via selectors.
This commit is contained in:
Eli Ribble 2026-01-29 14:56:02 +00:00
parent 4a99cb1166
commit aa3e22d814
No known key found for this signature in database
2 changed files with 25 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

26
scss/sidebar.scss
View file

@ -103,10 +103,34 @@
font-size: 1.5rem;
}
#sidebarToggle {
position: absolute;
left: calc(250px - 15px);
top: 50%;
transform: translateY(-50%);
z-index: 1050;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #dee2e6;
display: flex;
align-items: center;
transition: left 0.3s;
padding: 0;
}
#sidebarToggle i {
transition: transform 0.3s;
}
#sidebar.collapsed + #content #sidebarToggle i {
#sidebar.collapsed > #sidebarToggle {
left: calc(70px - 15px);
}
#sidebar > #sidebarToggle i {
position: relative;
left: 5px;
}
#sidebar.collapsed > #sidebarToggle i {
transform: rotate(180deg);
}

2
sync/template/authenticated.html
View file

@ -28,8 +28,6 @@
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('collapsed');
document.getElementById('content').classList.toggle('expanded');
document.getElementById('sidebarToggleIcon').classList.toggle('bi-chevron-left');
document.getElementById('sidebarToggleIcon').classList.toggle('bi-chevron-right');
});
</script>
</body>