shadow-claw 1.40.1 → 1.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadow-claw",
-  "version": "1.40.1",
+  "version": "1.41.1",
   "type": "module",
   "license": "AGPL-3.0",
   "description": "ShadowClaw - multi-runtime AI assistant.",

package/src/cli/build/build.ts

@@ -186,23 +186,26 @@ export async function runBuild(options: RunBuildOptions = {}): Promise<void> {
 
     await run("npm run -s rolldown");
 
+    const siteConfigCandidate = await findFirstExistingPath(
+      getSiteConfigCandidates(),
+    );
+    const siteConfigPath = siteConfigCandidate || "pages/site-config.json";
+
     if (prerenderMainMemory) {
       await prerenderDsdShell({
         indexPath: "dist/public/index.html",
         sourcePath: "pages/main",
         prerenderPages,
+        siteConfigPath,
       });
     } else {
       await prerenderDsdShell({
         indexPath: "dist/public/index.html",
         noSeed: true,
+        siteConfigPath,
       });
     }
 
-    const siteConfigCandidate = await findFirstExistingPath(
-      getSiteConfigCandidates(),
-    );
-    const siteConfigPath = siteConfigCandidate || "pages/site-config.json";
     try {
       await applySiteConfig("dist/public", siteConfigPath);
     } catch {}
@@ -299,6 +302,7 @@ export async function runBuild(options: RunBuildOptions = {}): Promise<void> {
       routesPath,
       sourcePath: "pages/main",
       prerenderPages,
+      siteConfigPath,
     });
 
     await run("npm run -s build:service-worker");
@@ -509,27 +513,29 @@ export async function runBuild(options: RunBuildOptions = {}): Promise<void> {
     }
   }
 
-  // 7. Prerender DSD Shell
+  // 7. Prerender DSD Shell & 8. Apply site-config
+  const siteConfigCandidate = await findFirstExistingPath(
+    getSiteConfigCandidates(contentRoot),
+  );
+  const siteConfigPath =
+    siteConfigCandidate || join(contentRoot, "pages/site-config.json");
+
   const indexPath = join(distPublicDir, "index.html");
   if (prerenderMainMemory && (await pathExists(contentPagesMain))) {
     await prerenderDsdShell({
       indexPath,
       sourcePath: contentPagesMain,
       prerenderPages,
+      siteConfigPath,
     });
   } else {
     await prerenderDsdShell({
       indexPath,
       noSeed: true,
+      siteConfigPath,
     });
   }
 
-  // 8. Apply site-config
-  const siteConfigCandidate = await findFirstExistingPath(
-    getSiteConfigCandidates(contentRoot),
-  );
-  const siteConfigPath =
-    siteConfigCandidate || join(contentRoot, "pages/site-config.json");
   try {
     await applySiteConfig(distPublicDir, siteConfigPath);
   } catch {}
@@ -656,6 +662,7 @@ export async function runBuild(options: RunBuildOptions = {}): Promise<void> {
     routesPath,
     sourcePath: mainSourcePath,
     prerenderPages,
+    siteConfigPath,
   });
 
   // 11. Service Worker patch

package/src/cli/prerender/dsd-shell/prerender-dsd-shell.test.ts

@@ -502,11 +502,14 @@ describe("prerenderDsdShell purge flag pages", () => {
 
     it("applies sidebar visibility config to template", () => {
       const tpl =
-        '<li class="nav-item" data-page="chat">Chat</li><li class="nav-item" data-page="files">Files</li>';
+        '<li class="nav-item" data-page="chat">Chat</li><li class="nav-item" data-page="files">Files</li><shadow-claw-conversations></shadow-claw-conversations>';
       const modified = applySidebarVisibilityToTemplate(tpl, {
         chatHidden: true,
       });
       expect(modified).toContain('data-page="chat" hidden aria-hidden="true"');
+      expect(modified).toContain(
+        '<shadow-claw-conversations hidden aria-hidden="true">',
+      );
       expect(modified).not.toContain('data-page="files" hidden');
     });
 

package/src/cli/prerender/dsd-shell/prerender-dsd-shell.ts

@@ -675,7 +675,13 @@ export function applySidebarVisibilityToTemplate(
   };
 
   if (sidebarConfig.pagesHidden) hidePage("pages");
-  if (sidebarConfig.chatHidden) hidePage("chat");
+  if (sidebarConfig.chatHidden) {
+    hidePage("chat");
+    next = next.replace(
+      /(<shadow-claw-conversations)(?![^>]*\bhidden\b)([^>]*>)/iu,
+      '$1 hidden aria-hidden="true"$2',
+    );
+  }
   if (sidebarConfig.tasksHidden) hidePage("tasks");
   if (sidebarConfig.filesHidden) hidePage("files");
 
@@ -962,7 +968,13 @@ export async function prerenderDsdShell(
   let siteConfig: any = {};
   const configCandidatePaths = [
     options.siteConfigPath,
+    path.resolve("shadow-claw-config.json"),
+    path.resolve("shadow-claw.config.json"),
+    path.resolve("shadowclaw.config.json"),
+    path.resolve("pages/shadow-claw-config.json"),
+    path.resolve("pages/shadow-claw.config.json"),
     path.resolve("site-config.json"),
+    path.resolve("pages/site-config.json"),
   ].filter(Boolean) as string[];
 
   for (const cfgPath of configCandidatePaths) {

package/src/cli/prerender/pretty-paths/prerender-pretty-paths.ts

@@ -42,6 +42,7 @@ export interface PrerenderPrettyPathsOptions {
   indexPath?: string;
   prerenderPages?: string | number;
   silent?: boolean;
+  siteConfigPath?: string;
 }
 
 export interface PrerenderPrettyPathsResult {
@@ -64,6 +65,25 @@ export async function prerenderPrettyPaths(
     options.indexPath || path.join(publicDir, "index.html"),
   );
 
+  let siteConfig: any = {};
+  const configCandidatePaths = [
+    options.siteConfigPath,
+    path.resolve(path.dirname(sourcePath), "shadow-claw.config.json"),
+    path.resolve(path.dirname(sourcePath), "site-config.json"),
+    path.resolve("shadow-claw.config.json"),
+    path.resolve("site-config.json"),
+    path.join(publicDir, "shadow-claw.config.json"),
+    path.join(publicDir, "site-config.json"),
+  ].filter(Boolean) as string[];
+
+  for (const candidate of configCandidatePaths) {
+    try {
+      const raw = await readFile(candidate, "utf8");
+      siteConfig = JSON.parse(raw);
+      break;
+    } catch {}
+  }
+
   const rawPagesOpt =
     options.prerenderPages !== undefined
       ? options.prerenderPages
@@ -360,6 +380,7 @@ export async function prerenderPrettyPaths(
       shadowClawDsdTemplate = buildShadowClawDsdTemplateWithoutPages(
         shadowClawTemplateContent,
         shadowClawCssSource,
+        siteConfig.sidebar,
       );
     } else {
       const pagesDsdHost = buildPagesDsdHost(
@@ -375,6 +396,7 @@ export async function prerenderPrettyPaths(
         shadowClawTemplateContent,
         pagesDsdHost,
         shadowClawCssSource,
+        siteConfig.sidebar,
       );
     }
 

package/src/cli/prerender/utils/insert-before-closing-head.test.ts

@@ -1,5 +1,8 @@
 import { describe, it, expect } from "@jest/globals";
-import { insertBeforeClosingHead } from "./insert-before-closing-head.js";
+import {
+  findClosingHeadIndex,
+  insertBeforeClosingHead,
+} from "./insert-before-closing-head.js";
 
 describe("insertBeforeClosingHead", () => {
   it("inserts content before </head> tag when present", () => {
@@ -16,4 +19,34 @@ describe("insertBeforeClosingHead", () => {
     const result = insertBeforeClosingHead(html, tag);
     expect(result.startsWith(`${tag}\n`)).toBe(true);
   });
+
+  it("targets the first outer </head> tag when nested templates have their own head", () => {
+    const html =
+      '<!doctype html><html><head><title>Outer</title></head><body><template shadowrootmode="open"><head><title>Inner</title></head></template></body></html>';
+    const tag = '<script id="outer-test">true</script>';
+    const result = insertBeforeClosingHead(html, tag);
+    const outerIndex = result.indexOf(tag);
+    const firstHeadClose = result.indexOf("</head>");
+    const secondHeadClose = result.lastIndexOf("</head>");
+    expect(outerIndex).toBeLessThan(firstHeadClose);
+    expect(firstHeadClose).toBeLessThan(secondHeadClose);
+  });
+
+  it("ignores </head> string literals inside inlined <script> blocks", () => {
+    const html =
+      '<!doctype html><html><head><title>Outer</title><script>var x = "<head></head>";</script></head><body></body></html>';
+    const tag = '<link rel="stylesheet" href="theme.css" />';
+    const result = insertBeforeClosingHead(html, tag);
+    expect(result).toContain(`${tag}\n</head><body>`);
+    expect(findClosingHeadIndex(html)).toBe(html.lastIndexOf("</head>"));
+  });
+
+  it("ignores </head> inside comments and style blocks", () => {
+    const html =
+      "<!doctype html><html><head><!-- </head> --><style>/* </head> */</style></head><body></body></html>";
+    const tag = '<link rel="stylesheet" href="theme.css" />';
+    const result = insertBeforeClosingHead(html, tag);
+    expect(result).toContain(`${tag}\n</head><body>`);
+    expect(findClosingHeadIndex(html)).toBe(html.lastIndexOf("</head>"));
+  });
 });

package/src/cli/prerender/utils/insert-before-closing-head.ts

@@ -1,14 +1,28 @@
+/**
+ * Finds the index of the top-level </head> closing tag in an HTML document,
+ * skipping any occurrences of "</head>" inside <script>, <style>, <template>,
+ * or HTML comments (<!-- ... -->).
+ */
+export function findClosingHeadIndex(html: string): number {
+  const tokenRegex =
+    /<!--[\s\S]*?-->|<script\b[\s\S]*?<\/script>|<style\b[\s\S]*?<\/style>|<template\b[\s\S]*?<\/template>|<\/head>/gi;
+  let match: RegExpExecArray | null;
+  while ((match = tokenRegex.exec(html)) !== null) {
+    if (match[0].toLowerCase().startsWith("</head")) {
+      return match.index;
+    }
+  }
+  return -1;
+}
+
 export function insertBeforeClosingHead(
   html: string,
   contentToInsert: string,
 ): string {
-  const lastHeadIndex = html.lastIndexOf("</head>");
-  if (lastHeadIndex !== -1) {
+  const headIndex = findClosingHeadIndex(html);
+  if (headIndex !== -1) {
     return (
-      html.slice(0, lastHeadIndex) +
-      contentToInsert +
-      "\n" +
-      html.slice(lastHeadIndex)
+      html.slice(0, headIndex) + contentToInsert + "\n" + html.slice(headIndex)
     );
   }
   return `${contentToInsert}\n${html}`;

package/src/cli/site-config/apply.test.ts

@@ -202,6 +202,60 @@ describe("apply-site-config", () => {
         '<link href="favicon.svg" rel="apple-touch-icon" />',
       );
     });
+
+    it("injects slotted sidebar html into shadow-claw light DOM when slotHtml is configured", () => {
+      const config = {
+        sidebar: {
+          slotHtml: '<nav class="custom-nav"><a href="/about">About</a></nav>',
+        },
+      };
+
+      const patched = patchIndexHtml(baseHtml, config);
+      expect(patched).toContain('slot="sidebar"');
+      expect(patched).toContain('<a href="/about">About</a>');
+      expect(patched).toContain("<shadow-claw>");
+      expect(patched).toContain("</shadow-claw>");
+    });
+
+    it("renders and injects declarative sidebar sections into shadow-claw light DOM", () => {
+      const config = {
+        sidebar: {
+          sections: [
+            {
+              title: "Home",
+              headerHref: "/",
+              items: [{ title: "About", href: "/about" }],
+            },
+            {
+              title: "Links",
+              items: [
+                {
+                  title: "GitHub",
+                  href: "https://github.com/xt-ml/shadow-claw",
+                  target: "_blank",
+                },
+              ],
+            },
+          ],
+        },
+      };
+
+      const patched = patchIndexHtml(baseHtml, config);
+      expect(patched).toContain('slot="sidebar"');
+      expect(patched).toContain('class="sidebar-custom-sections"');
+      expect(patched).toContain('href="/" class="sidebar-link">Home</a>');
+      expect(patched).toContain('href="/about" class="sidebar-link">About</a>');
+      expect(patched).toContain(
+        'href="https://github.com/xt-ml/shadow-claw" target="_blank" rel="noopener noreferrer"',
+      );
+    });
+
+    it("injects customSidebarHtml parameter directly into shadow-claw light DOM", () => {
+      const customHtml =
+        '<div slot="sidebar" class="my-custom-sidebar"><p>Hello</p></div>';
+      const patched = patchIndexHtml(baseHtml, {}, customHtml);
+      expect(patched).toContain(customHtml);
+    });
   });
 
   describe("patchManifest", () => {
@@ -756,5 +810,41 @@ https://example.com/about`;
         ),
       ).rejects.toThrow();
     });
+
+    it("discovers pages/main/sidebar.html and injects it into dist/public/index.html", async () => {
+      const distPublicDir = path.join(tmpDir, "dist/public");
+      const repoDir = tmpDir;
+      const pagesMainDir = path.join(repoDir, "pages/main");
+      await mkdir(distPublicDir, { recursive: true });
+      await mkdir(pagesMainDir, { recursive: true });
+
+      const indexPath = path.join(distPublicDir, "index.html");
+      await writeFile(
+        indexPath,
+        "<!doctype html><html><head></head><body><shadow-claw></shadow-claw></body></html>",
+        "utf8",
+      );
+
+      const sidebarContent =
+        '<nav class="my-sidebar"><a href="/about">About Us</a></nav>';
+      await writeFile(
+        path.join(pagesMainDir, "sidebar.html"),
+        sidebarContent,
+        "utf8",
+      );
+
+      const siteConfigPath = path.join(repoDir, "shadow-claw.config.json");
+      const config = {
+        site: { title: "Custom Sidebar Site" },
+      };
+      await writeFile(siteConfigPath, JSON.stringify(config), "utf8");
+
+      const result = await applySiteConfig(distPublicDir, siteConfigPath);
+      expect(result.applied).toBe(true);
+
+      const patchedIndex = await readFile(indexPath, "utf8");
+      expect(patchedIndex).toContain('slot="sidebar"');
+      expect(patchedIndex).toContain("About Us");
+    });
   });
 });

package/src/cli/site-config/apply.ts

@@ -14,6 +14,11 @@ import { fileURLToPath } from "node:url";
 
 import { resolveCustomElementScripts } from "./custom-elements/resolve-custom-element-scripts.js";
 import { sanitizeEmbeddedCustomElementScripts } from "./custom-elements/sanitize-embedded-custom-element-scripts.js";
+import {
+  findClosingHeadIndex,
+  insertBeforeClosingHead,
+} from "../prerender/utils/insert-before-closing-head.js";
+import { applySidebarVisibilityToTemplate } from "../prerender/dsd-shell/prerender-dsd-shell.js";
 
 export interface SiteConfigSite {
   title?: string;
@@ -57,12 +62,44 @@ export interface SiteConfigPwa {
   screenshots?: any[];
 }
 
+export interface SiteConfigSidebarSectionItem {
+  title?: string;
+  label?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  active?: boolean;
+}
+
+export interface SiteConfigSidebarSection {
+  title?: string;
+  headerHref?: string;
+  items?: SiteConfigSidebarSectionItem[];
+  html?: string;
+}
+
+export interface SiteConfigSidebar {
+  pagesHidden?: boolean;
+  chatHidden?: boolean;
+  tasksHidden?: boolean;
+  filesHidden?: boolean;
+  defaultPage?: string;
+  slotHtml?: string;
+  slotPath?: string;
+  sections?: SiteConfigSidebarSection[];
+}
+
 export interface SiteConfig {
   site?: SiteConfigSite;
   branding?: SiteConfigBranding;
   theme?: SiteConfigTheme;
   pwa?: SiteConfigPwa;
-  pages?: { notFoundPath?: string };
+  sidebar?: SiteConfigSidebar;
+  pages?: {
+    notFoundPath?: string;
+    sortOrder?: string;
+    defaultPinnedPage?: string;
+  };
   notFoundPath?: string;
   manifestPath?: string;
   sitemapPath?: string;
@@ -83,21 +120,7 @@ export function escapeHtml(str: string): string {
     .replace(/'/g, "'");
 }
 
-export function insertBeforeClosingHead(
-  html: string,
-  contentToInsert: string,
-): string {
-  const lastHeadIndex = html.lastIndexOf("</head>");
-  if (lastHeadIndex !== -1) {
-    return (
-      html.slice(0, lastHeadIndex) +
-      contentToInsert +
-      "\n" +
-      html.slice(lastHeadIndex)
-    );
-  }
-  return `${contentToInsert}\n${html}`;
-}
+export { insertBeforeClosingHead, findClosingHeadIndex };
 
 const FLATTENED_STYLESHEET_PREFIXES = [
   "pages/resources/",
@@ -137,7 +160,67 @@ async function writeText(filePath: string, content: string): Promise<void> {
   await writeFile(filePath, content, "utf8");
 }
 
-export function patchIndexHtml(html: string, config: SiteConfig): string {
+export function renderSidebarSectionsHtml(
+  sections: SiteConfigSidebarSection[],
+): string {
+  if (!Array.isArray(sections) || sections.length === 0) {
+    return "";
+  }
+
+  const sectionsHtml = sections
+    .map((section, idx) => {
+      if (section.html) {
+        return section.html;
+      }
+      const sectionId = section.title
+        ? `sidebar-${section.title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`
+        : `sidebar-section-${idx + 1}`;
+
+      const headerContent = section.headerHref
+        ? `<a href="${escapeHtml(section.headerHref)}" class="sidebar-link">${escapeHtml(section.title || "")}</a>`
+        : `<span>${escapeHtml(section.title || "")}</span>`;
+
+      const headerHtml = section.title
+        ? `    <div class="sidebar-section-header">${headerContent}</div>`
+        : "";
+
+      const itemsHtml = (section.items || [])
+        .map((item) => {
+          const title = item.title || item.label || "";
+          const href = item.href || "#";
+          const targetAttr = item.target
+            ? ` target="${escapeHtml(item.target)}"`
+            : "";
+          const relAttr = item.rel
+            ? ` rel="${escapeHtml(item.rel)}"`
+            : item.target === "_blank"
+              ? ' rel="noopener noreferrer"'
+              : "";
+          const activeClass = item.active ? " active" : "";
+          const ariaCurrent = item.active ? ' aria-current="page"' : "";
+          return `    <div class="sidebar-item"><a href="${escapeHtml(href)}"${targetAttr}${relAttr} class="sidebar-link${activeClass}"${ariaCurrent}>${escapeHtml(title)}</a></div>`;
+        })
+        .join("\n");
+
+      return [
+        `  <section class="sidebar-section" id="${sectionId}">`,
+        headerHtml,
+        itemsHtml,
+        `  </section>`,
+      ]
+        .filter(Boolean)
+        .join("\n");
+    })
+    .join("\n");
+
+  return `<nav slot="sidebar" class="sidebar-custom-sections" aria-label="Site Navigation">\n${sectionsHtml}\n</nav>`;
+}
+
+export function patchIndexHtml(
+  html: string,
+  config: SiteConfig,
+  customSidebarHtml?: string,
+): string {
   let next = html;
 
   const site = config.site || {};
@@ -265,10 +348,26 @@ export function patchIndexHtml(html: string, config: SiteConfig): string {
   if (theme.stylesheet) {
     const stylesheetHref = resolveThemeStylesheetHref(theme.stylesheet);
     const themeCssTag = `<link rel="stylesheet" href="${escapeHtml(stylesheetHref)}" />`;
-    if (
-      !next.includes(`href="${stylesheetHref}"`) &&
-      !next.includes(`href="${escapeHtml(stylesheetHref)}"`)
-    ) {
+    const escapedHrefPattern = escapeHtml(stylesheetHref).replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\$&",
+    );
+    const rawHrefPattern = stylesheetHref.replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\$&",
+    );
+    const linkRegex = new RegExp(
+      `<link\\s+[^>]*href=["'](?:${rawHrefPattern}|${escapedHrefPattern})["'][^>]*>`,
+      "iu",
+    );
+    const closingHeadIdx = findClosingHeadIndex(next);
+    const headContent =
+      closingHeadIdx !== -1 ? next.slice(0, closingHeadIdx) : next;
+    const headWithoutScripts = headContent.replace(
+      /<script\b[\s\S]*?<\/script>/gi,
+      "",
+    );
+    if (!linkRegex.test(headWithoutScripts)) {
       if (/<link\s+rel="stylesheet"\s+href="index\.css"\s*\/?>/iu.test(next)) {
         next = next.replace(
           /(<link\s+rel="stylesheet"\s+href="index\.css"\s*\/?>)/iu,
@@ -313,6 +412,45 @@ export function patchIndexHtml(html: string, config: SiteConfig): string {
     next = insertBeforeClosingHead(next, `  ${siteConfigScript}`);
   }
 
+  const sidebarHtmlToInject =
+    customSidebarHtml ||
+    config.sidebar?.slotHtml ||
+    (config.sidebar?.sections
+      ? renderSidebarSectionsHtml(config.sidebar.sections)
+      : "");
+
+  if (sidebarHtmlToInject) {
+    let formattedSidebarHtml = sidebarHtmlToInject.trim();
+    if (
+      !/\bslot="sidebar(?:-nav|-content|-footer)?"/iu.test(formattedSidebarHtml)
+    ) {
+      formattedSidebarHtml = `<div slot="sidebar" class="sidebar-custom-sections">\n${formattedSidebarHtml}\n</div>`;
+    }
+
+    const existingMatch = next.match(
+      /<[^>]+?\bslot="sidebar(?:-nav|-content|-footer)?"[^>]*>[\s\S]*?<\/[^>]+>/iu,
+    );
+    if (existingMatch) {
+      next = next.replace(existingMatch[0], "");
+    }
+
+    if (next.includes("</shadow-claw>")) {
+      next = next.replace(
+        "</shadow-claw>",
+        `  ${formattedSidebarHtml}\n</shadow-claw>`,
+      );
+    } else if (next.includes("<shadow-claw></shadow-claw>")) {
+      next = next.replace(
+        "<shadow-claw></shadow-claw>",
+        `<shadow-claw>\n  ${formattedSidebarHtml}\n</shadow-claw>`,
+      );
+    }
+  }
+
+  if (config.sidebar) {
+    next = applySidebarVisibilityToTemplate(next, config.sidebar);
+  }
+
   return next;
 }
 
@@ -993,10 +1131,39 @@ export async function applySiteConfig(
 
   await copyCustomSiteFiles(config, distPublicDir, siteConfigPath);
 
+  const configDir = siteConfigPath
+    ? path.dirname(path.resolve(siteConfigPath))
+    : process.cwd();
+  const templateRootDir = getTemplateRootDir(configDir);
+
+  let sidebarHtml: string | undefined;
+  if (config.sidebar?.slotHtml) {
+    sidebarHtml = config.sidebar.slotHtml;
+  } else if (config.sidebar?.sections) {
+    sidebarHtml = renderSidebarSectionsHtml(config.sidebar.sections);
+  } else {
+    const sidebarCandidates = [
+      config.sidebar?.slotPath,
+      "pages/main/sidebar.html",
+      "pages/sidebar.html",
+      "sidebar.html",
+      "resources/sidebar.html",
+    ].filter(Boolean) as string[];
+
+    const candidatePaths = sidebarCandidates.flatMap((c) =>
+      getCandidateFilePaths(c, configDir, templateRootDir),
+    );
+    const foundSidebar = await findFirstExisting(candidatePaths);
+    if (foundSidebar) {
+      sidebarHtml = (await readText(foundSidebar)) ?? undefined;
+      console.log(`  Found slotted sidebar: ${foundSidebar}`);
+    }
+  }
+
   const indexPath = path.join(distPublicDir, "index.html");
   const indexHtml = await readText(indexPath);
   if (indexHtml) {
-    const patched = patchIndexHtml(indexHtml, config);
+    const patched = patchIndexHtml(indexHtml, config, sidebarHtml);
     await writeText(indexPath, patched);
     console.log("  Patched index.html");
   }

package/src/components/shadow-claw/shadow-claw.css

@@ -90,6 +90,10 @@ a:hover {
   transition: transform 0.2s ease;
 }
 
+.header-main-toggle {
+  display: var(--shadow-claw-header-main-toggle-display, block);
+}
+
 .header-main-toggle[aria-pressed="true"],
 .activity-log-toggle[aria-pressed="true"] {
   box-shadow: 0 0 0.5rem
@@ -279,6 +283,28 @@ a:hover {
   padding: 0.5rem;
 }
 
+.nav-menu:not(:has(.nav-item:not([hidden]))) {
+  display: none;
+}
+
+slot[name="sidebar"],
+slot[name="sidebar-nav"],
+slot[name="sidebar-content"],
+slot[name="sidebar-footer"] {
+  display: block;
+}
+
+::slotted([slot="sidebar"]),
+::slotted([slot="sidebar-nav"]),
+::slotted([slot="sidebar-content"]),
+::slotted([slot="sidebar-footer"]) {
+  display: block;
+}
+
+.sidebar-footer {
+  display: var(--shadow-claw-sidebar-footer-display, block);
+}
+
 .sidebar-spacer {
   flex: 1;
 }