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

Make logo change with sidebar collapse

Browse source
This commit is contained in:
Eli Ribble 2026-01-28 22:33:32 +00:00
parent 5d4a7a4155
commit 20eda6a1d8
No known key found for this signature in database
2 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

24
scss/sidebar.scss
View file

@ -1,3 +1,16 @@
.logo-container {
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.logo {
max-width: 100%;
height: auto;
transition: all 0.3s ease;
}
#sidebar {
background-color: $off-white;
min-height: 100vh;
@ -12,7 +25,14 @@
width: 70px;
padding: 20px 10px;
}
/* Logo style when sidebar is collapsed */
#sidebar.collapsed .logo-container {
width: 100%;
}
#sidebar.collapsed .logo-img {
max-width: 40px; /* smaller size for collapsed state */
}
#content {
transition: all 0.3s;
margin-left: 250px;
@ -26,10 +46,12 @@
.sidebar-header {
padding-bottom: 20px;
border-bottom: 1px solid #dee2e6;
border-bottom: 1px solid $off-black;
margin-bottom: 20px;
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: center; /* Center for the logo */
}
.sidebar-menu {

4
sync/template/components/sidebar.html
View file

@ -1,7 +1,9 @@
{{define "sidebar"}}
<div id="sidebar">
<div class="sidebar-header">
<img src="/static/img/nidus-logo-256-transparent.png" width="128"/>
<div class="logo-container">
<img class="logo" src="/static/img/nidus-logo-256-transparent.png"/>
</div>
</div>
<ul class="sidebar-menu">