Add SoulSync logo to sidebar header next to app name

This commit is contained in:
Broque Thomas 2026-03-23 21:24:39 -07:00
parent f5177f9879
commit 96fa3fe388
2 changed files with 27 additions and 2 deletions

View file

@ -126,8 +126,13 @@
<div class="sidebar">
<!-- Header Section -->
<div class="sidebar-header">
<h1 class="app-name">SoulSync</h1>
<p class="app-subtitle">Music Sync & Manager</p>
<div class="sidebar-brand">
<img src="/static/trans2.png" alt="SoulSync" class="sidebar-logo">
<div class="sidebar-brand-text">
<h1 class="app-name">SoulSync</h1>
<p class="app-subtitle">Music Sync & Manager</p>
</div>
</div>
<div id="profile-indicator" class="profile-indicator" style="display: none;" title="Switch profile">
<div id="profile-indicator-avatar" class="profile-indicator-avatar"></div>
<span id="profile-indicator-name" class="profile-indicator-name"></span>

View file

@ -233,6 +233,26 @@ body {
}
/* Sidebar Header */
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-logo {
width: 38px;
height: 38px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
flex-shrink: 0;
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
gap: 0;
}
.sidebar-header {
min-height: 115px;
background: linear-gradient(180deg,