feat: add themed sidebar logo

src/client/app.ts

@@ -87,6 +87,7 @@ const timelineSelection = mustGet("timeline-selection");
 const timelineBrush = mustGet("timeline-brush");
 const themeToggle = mustGet("theme-toggle");
 const themeToggleIcon = mustGet("theme-toggle-icon");
+const panelLogo = mustGet("panel-logo");
 const sidebarCollapseButton = mustGet("sidebar-collapse");
 const sidebarCollapseIcon = mustGet("sidebar-collapse-icon");
 const timelineCollapseButton = mustGet("timeline-collapse");
@@ -203,6 +204,10 @@ async function createThumbnailObjectUrl(blob) {
   return URL.createObjectURL(thumbnailBlob);
 }
 
+function setBrandLogo(theme) {
+  panelLogo.src = theme === "dark" ? "/assets/logo-dark.svg" : "/assets/logo-light.svg";
+}
+
 function setTheme(theme, persist = true) {
   const resolvedTheme = theme === "light" ? "light" : "dark";
   document.body.dataset.theme = resolvedTheme;
@@ -210,6 +215,7 @@ function setTheme(theme, persist = true) {
     localStorage.setItem("theme", resolvedTheme);
   }
   setMapTheme(resolvedTheme);
+  setBrandLogo(resolvedTheme);
 
   if (resolvedTheme === "dark") {
     themeToggle.setAttribute("aria-label", "Switch to light mode");

src/server/app-assets.ts

@@ -215,6 +215,10 @@ export const APP_STYLES = `      :root {
         display: none;
       }
 
+      aside.sidebar-collapsed .panel-logo {
+        display: none;
+      }
+
       .card {
         min-width: 0;
         padding: 10px;
@@ -274,10 +278,18 @@ export const APP_STYLES = `      :root {
       .panel-toolbar {
         display: flex;
         justify-content: space-between;
-        align-items: center;
+        align-items: flex-start;
         gap: 8px;
       }
 
+      .panel-logo {
+        display: block;
+        width: min(150px, calc(100% - 40px));
+        height: auto;
+        object-fit: contain;
+        flex: 0 1 auto;
+      }
+
       .theme-toggle {
         width: 40px;
         height: 40px;

src/server/page-template.ts

@@ -49,6 +49,14 @@ ${APP_STYLES}
               </svg>
             </span>
           </button>
+          <img
+            class="panel-logo"
+            id="panel-logo"
+            src="/assets/logo-light.svg"
+            alt="mapix"
+            width="156"
+            height="66"
+          />
         </div>
         <label>
           Share URL