@acms-subir/core 0.3.13 → 0.3.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @acms-subir/core
 
+## 0.3.14
+
+### Patch Changes
+
+- 97e5313: The admin sidebar shows the site's logo (Design → logo, with its dark-mode variant) in place of the framework mark when one is set.
+
 ## 0.3.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "publishConfig": {
     "access": "public"
   },

package/src/layouts/Admin.astro

@@ -185,11 +185,19 @@ const themeOpts = [
     <div class="shell" id="acms-shell">
       <aside class="sidebar" aria-label="Admin navigation">
         <div class="brand">
-          <svg width="20" height="20" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
-            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
-            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
-          </svg>
+          {/* the site's own logo (Design) replaces the framework mark */}
+          {settings.siteLogo ? (
+            <>
+              <img class:list={['brand-logo', { 'logo-light': !!settings.siteLogoDark }]} src={settings.siteLogo} alt="" />
+              {settings.siteLogoDark && <img class="brand-logo logo-dark" src={settings.siteLogoDark} alt="" />}
+            </>
+          ) : (
+            <svg width="20" height="20" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
+              <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
+              <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
+              <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
+            </svg>
+          )}
           <span class="brand-name" title={`v${BRAND.version} · ${BRAND.stack}`}>{siteName}</span>
           <button class="icon-btn" type="button" id="acms-rail-toggle" aria-label="Collapse sidebar" title="Collapse sidebar">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.side} /></svg>

package/src/styles/admin.css

@@ -132,6 +132,9 @@ kbd {
 }
 .brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 12px; min-width: 0; }
 .brand-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.brand-logo { height: 20px; width: auto; max-width: 96px; object-fit: contain; flex: none; }
+.brand .logo-dark, :root[data-theme='dark'] .brand .logo-light { display: none; }
+:root[data-theme='dark'] .brand .logo-dark { display: block; }
 .brand-sub { font-size: 11px; color: var(--faint); margin-top: -2px; }
 .icon-btn {
   display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
@@ -224,6 +227,7 @@ kbd {
 .shell.is-rail .nav-item span, .shell.is-rail .nav-item .count, .shell.is-rail .nav-group > summary,
 .shell.is-rail .account .who, .shell.is-rail .account > svg { display: none; }
 .shell.is-rail .brand { padding: 6px 0 12px; flex-direction: column; }
+.shell.is-rail .brand-logo { max-width: 40px; }
 .shell.is-rail .side-search { width: auto; padding: 7px; }
 .shell.is-rail .nav-item { justify-content: center; padding: 8px; }
 .shell.is-rail .nav-scroll { margin: 4px 0 0; padding: 0; }