Folder-browse sidebar with pinned Edit Nav links, via Body HTML Injection

[djlongy]

Wiki.js 3 has no sidebar mode that renders the page tree (background in #6573). Until it does, this is a workaround that runs entirely from Admin > Theme > Body HTML Injection. You paste it once, and after that everything is maintained through the normal UI:

• Browse list: built from the page tree API, so new, moved and renamed pages appear on their own. It follows the page you open, with an "Up one level" row and a clickable folder trail, similar to v2's Browse mode.
• Pinned links: the native Edit Nav menu still renders above the tree, so static links are managed in the editor as usual, including per-path override / hide modes.
• Search: a box at the top filters every page and folder in the wiki, listed flat with the folder each one lives in.
• Collapsible tree: the Browse section folds away, leaving the pinned links. The state is remembered per browser.
• Resizable sidebar: drag the drawer edge to resize it, double-click the edge to reset.

A page named like its folder (compute beside compute/) is shown as that folder's own page, which matches how v2 named folders.

I'm aware this isn't the prettiest or most elegant solution. I'm sharing it as a suggestion of what a more refined, native version could look like, rather than as something finished.

Caveats

• It relies on internals that may change between betas: GET /_api/sites/<id>/tree, the .sidebar-nav and .w-drawer class names, and the Vue router on #app.__vue_app__. If any of them move, the script falls back to the stock menu instead of breaking the page.
• It reads up to 10 levels deep in pages of 1000 entries, re-read on navigation at most once a minute.
• Visitors with no read rights get an empty tree, and the stock menu is left as it is.
• Tested on 3.0.0-beta.655. Opening any page with ?navdemo once adds a fake four-level folder with 50 entries per level to check how it behaves at depth (its links 404). ?navdemo=0 removes it.

The CFG object at the top of the script holds the options (folders first, sort key, counts, follow-page, width limits).

Body HTML Injection (click to expand)

<!-- Folder-browse sidebar for Wiki.js 3, modelled on the v2 Browse mode. Paste into Admin > Theme > Body HTML Injection. Pinned links come from the native Edit Nav menu. -->
<style>
  /* Pinned links come from the native Edit Nav menu. Cap them so the browse list keeps most of the drawer. */
  body.dyn-nav-on .sidebar-nav { flex: none; max-height: 35vh; overflow-y: auto; }
  #dyn-nav { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 6px 4px 0; border-top: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 13px; line-height: 1.35; }
  #dyn-nav .row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; color: inherit; text-decoration: none; }
  #dyn-nav .row:hover { background: rgba(255,255,255,.08); }
  #dyn-nav .row.current { background: rgba(255,255,255,.2); font-weight: 600; }
  #dyn-nav .row svg { flex: none; width: 18px; height: 18px; fill: currentColor; opacity: .85; }
  #dyn-nav .row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #dyn-nav .row .sub { display: block; font-size: 11px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #dyn-nav .crumb { padding-top: 2px; padding-bottom: 2px; min-height: 26px; }
  #dyn-nav .crumb.here { font-weight: 600; cursor: default; }
  #dyn-nav .crumb.here:hover { background: none; }
  #dyn-nav .count { font-size: 11px; opacity: .55; }
  #dyn-nav hr { border: 0; border-top: 1px solid rgba(255,255,255,.15); margin: 6px 4px; }
  #dyn-nav .heading { padding: 6px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
  #dyn-nav .empty { padding: 6px 8px; opacity: .6; font-style: italic; }
  /* Search sits above the pinned Edit Nav links, the browse list below them */
  #dyn-nav-tools { flex: none; padding: 8px 8px 6px; }
  body:not(.dyn-nav-on) #dyn-nav-tools { display: none; }
  #dyn-nav .toggle { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
  #dyn-nav .toggle svg { transition: transform .15s; }
  #dyn-nav.collapsed .toggle svg { transform: rotate(-90deg); }
  /* Collapsed: the list hides unless a search is running, and the pinned links get the space */
  #dyn-nav.collapsed:not(.searching) { flex: none; }
  #dyn-nav.collapsed:not(.searching) .list { display: none; }
  body.dyn-nav-on:has(#dyn-nav.collapsed:not(.searching)) .sidebar-nav { flex: 1 1 auto; max-height: none; }
  #dyn-nav .list { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
  #dyn-nav-tools input { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: rgba(0,0,0,.2); color: #fff; font-size: 12px; }
  #dyn-nav-tools input::placeholder { color: rgba(255,255,255,.6); }
  /* Resizable sidebar. The drawer's width is the --w-drawer-width property Wiki.js sets inline; an !important
     rule outranks an inline one, and the slide-out animation reads the same property, so both follow. The
     icon-only mini rail is left alone. */
  html.dyn-nav-sized .w-drawer.bg-sidebar:not(:has(.sidebar-mini)) { --w-drawer-width: min(var(--dyn-nav-w), 90vw) !important; }
  /* The grip hangs off the drawer's edge, so the drawer has to be its positioning box (an overlaying one is already fixed) */
  .w-drawer.bg-sidebar:not(.w-drawer--overlay) { position: relative; }
  #dyn-nav-grip { position: absolute; top: 0; bottom: 0; right: -3px; width: 7px; cursor: col-resize; z-index: 50; touch-action: none; }
  .w-drawer--right #dyn-nav-grip { right: auto; left: -3px; }
  #dyn-nav-grip:hover, #dyn-nav-grip.drag { background: rgba(255,255,255,.35); }
  html.dyn-nav-dragging, html.dyn-nav-dragging * { cursor: col-resize !important; user-select: none !important; }
</style>
<script>
(() => {
  // A second copy (pasted in Head and Body, say) would fight this one over the sidebar and freeze the page
  if (window.__dynNav) return;
  window.__dynNav = true;
  // Knobs to experiment with
  const CFG = {
    upRow: true,          // an "Up one level" row above the folder trail
    trail: true,          // v2's folder trail: root and every folder down to the current one, each clickable
    followPage: true,     // the sidebar moves to the folder of each page you open (v2 did this on every page load)
    mergeFolderPage: true,// a page named like its folder (compute + compute/) shows inside that folder, first
    foldersFirst: true,   // folders above pages
    sortBy: 'title',      // 'title' | 'fileName'
    counts: true,         // number of entries next to each folder
    filter: true,         // search box: matches anywhere in the wiki, listed flat with their folder
    width: { min: 200, max: 720 }, // drag the sidebar's edge to resize; double-click the edge to reset. Remembered per browser
    refreshSeconds: 60,   // re-read the tree on navigation at most this often, so new pages show up
    demo: false           // true, or open any page with ?navdemo once: adds a fake 4-level, 50-per-folder "demo" folder (its links 404). ?navdemo=0 turns it off
  };
  try {
    const q = new URLSearchParams(location.search).get('navdemo');
    if (q !== null) localStorage.setItem('dynNav.demo', q === '0' ? '' : '1');
    CFG.demo ||= !!localStorage.getItem('dynNav.demo');
  } catch {}
  const demoItems = () => {
    const out = [];
    (function gen(folderPath, depth) {
      for (let p = 1; p <= 50; p++) out.push({ type: 'page', folderPath, fileName: `doc-${p}`, title: `Doc ${p} (L${depth})` });
      if (depth === 4) return;
      for (let f = 1; f <= 3; f++) { const name = `level${depth + 1}-${f}`; out.push({ type: 'folder', folderPath, fileName: name }); gen(`${folderPath}/${name}`, depth + 1); }
    })('demo', 1);
    out.push({ type: 'folder', folderPath: '', fileName: 'demo' });
    return out;
  };

  // Material Design Icons paths, the set v2 used
  const ICON = {
    up: 'M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z',
    folder: 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z',
    open: 'M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z',
    down: 'M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z',
    page: 'M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'
  };

  let site, nav, tools, list, lastFetch = 0, folders = null, pagesByHref = {}, cwd = null, query = '';

  const api = async (p) => {
    const r = await fetch('/_api/' + p, { credentials: 'same-origin' });
    if (!r.ok) throw new Error(p + ' ' + r.status);
    return r.json();
  };

  async function fetchTree() {
    site ??= await api('sites/' + location.hostname);
    const { primary, forcePrefix } = site.locales;
    const prefix = forcePrefix ? '/' + primary : '';
    const items = [];
    for (let offset = 0; ; offset += 1000) {
      const page = await api(`sites/${site.id}/tree?depth=10&types=folder,page&limit=1000&offset=${offset}&locale=${primary}`);
      items.push(...page);
      if (page.length < 1000) break;
    }
    if (CFG.demo) items.push(...demoItems());
    return { items, prefix };
  }

  function buildTree({ items, prefix }) {
    const root = { kind: 'folder', path: '', title: '/ (root)', children: [] };
    const byPath = { '': root }, byHref = {};
    const pathOf = (i) => (i.folderPath ? i.folderPath + '/' : '') + i.fileName;
    const folderAt = (path) => {
      if (byPath[path]) return byPath[path];
      const cut = path.lastIndexOf('/');
      const parent = folderAt(cut < 0 ? '' : path.slice(0, cut));
      const f = { kind: 'folder', path, parent, title: path.slice(cut + 1), children: [] };
      parent.children.push(f);
      return (byPath[path] = f);
    };
    items.filter((i) => i.type === 'folder').forEach((i) => folderAt(pathOf(i)));
    for (const i of items.filter((i) => i.type === 'page')) {
      const path = pathOf(i), href = prefix + '/' + path, title = i.title || i.fileName;
      const own = CFG.mergeFolderPage && byPath[path];
      const parent = own ? byPath[path] : folderAt(i.folderPath || '');
      const p = { kind: 'page', path, href, title, parent, own: !!own };
      // The folder takes the page's title, the way v2 named a folder after its page
      if (own) { own.title = title; own.page = p; } else parent.children.push(p);
      byHref[decodeURIComponent(href)] = p;
    }
    const key = (n) => (CFG.sortBy === 'title' ? n.title : n.path.split('/').pop()).toLowerCase();
    const sort = (n) => {
      n.children.sort((a, b) => (CFG.foldersFirst && a.kind !== b.kind ? (a.kind === 'folder' ? -1 : 1) : key(a).localeCompare(key(b), undefined, { numeric: true })));
      n.children.forEach((c) => c.children && sort(c));
    };
    sort(root);
    return { byPath, byHref };
  }

  const router = () => document.querySelector('#app')?.__vue_app__?.config.globalProperties.$router;
  const here = () => decodeURIComponent(location.pathname).replace(/\/$/, '');

  function row(cls, icon, text, opts = {}) {
    const el = document.createElement(opts.href ? 'a' : 'div');
    el.className = 'row ' + cls;
    if (opts.href) el.href = opts.href;
    if (opts.cd !== undefined) el.dataset.cd = opts.cd;
    if (opts.indent) el.style.paddingLeft = 8 + opts.indent * 10 + 'px';
    el.innerHTML = `<svg viewBox="0 0 24 24"><path d="${ICON[icon]}"/></svg>`;
    const label = document.createElement('span');
    label.className = 'label'; label.textContent = text; label.title = opts.sub ? opts.sub + '/' + text : text;
    if (opts.sub !== undefined) { const s = document.createElement('span'); s.className = 'sub'; s.textContent = '/' + opts.sub; label.append(s); }
    el.append(label);
    if (opts.count !== undefined && CFG.counts) { const c = document.createElement('span'); c.className = 'count'; c.textContent = opts.count; el.append(c); }
    if (opts.href && decodeURIComponent(opts.href) === here()) el.classList.add('current');
    return el;
  }

  const entries = (f) => f.children.length + (f.page ? 1 : 0);

  function draw() {
    if (!folders || !list) return;
    const frag = document.createDocumentFragment(), add = (el) => frag.append(el);
    const heading = (t) => { const h = document.createElement('div'); h.className = 'heading'; h.textContent = t; add(h); };

    if (query) {
      const hits = [];
      for (const f of Object.values(folders.byPath)) if (f.path && (f.title.toLowerCase().includes(query) || f.path.toLowerCase().includes(query))) hits.push(f);
      for (const p of Object.values(folders.byHref)) if (!p.own && (p.title.toLowerCase().includes(query) || p.path.toLowerCase().includes(query))) hits.push(p);
      heading(`${hits.length > 200 ? 'First 200 of ' : ''}${hits.length} match${hits.length === 1 ? '' : 'es'}`);
      for (const n of hits.slice(0, 200)) {
        const sub = n.parent?.path || '';
        add(n.kind === 'folder' ? row('item', 'folder', n.title, { cd: n.path, sub }) : row('item', 'page', n.title, { href: n.href, sub }));
      }
    } else {
      const f = folders.byPath[cwd] ?? folders.byPath[''];
      if (f.path) {
        if (CFG.upRow) add(row('up', 'up', 'Up one level', { cd: f.parent.path }));
        if (CFG.trail) {
          const chain = [];
          for (let a = f; a; a = a.parent) chain.unshift(a);
          chain.forEach((a, i) => add(row('crumb' + (a === f ? ' here' : ''), 'open', a.title, { cd: a === f ? undefined : a.path, indent: i })));
        }
        add(document.createElement('hr'));
        if (f.page) add(row('item', 'page', f.page.title, { href: f.page.href }));
        heading('Current directory');
      }
      for (const n of f.children) add(n.kind === 'folder' ? row('item', 'folder', n.title, { cd: n.path, count: entries(n) }) : row('item', 'page', n.title, { href: n.href }));
      if (!f.children.length && !f.page) { const e = document.createElement('div'); e.className = 'empty'; e.textContent = 'Empty folder'; add(e); }
    }
    list.replaceChildren(frag);
  }

  function cd(path) {
    cwd = path;
    draw();
    list.scrollTop = 0;
  }

  // The folder a page lives in. A folder's own page (compute for compute/) opens that folder, so you see what is under it
  function folderOfCurrent() {
    const p = folders?.byHref[here()];
    if (!p) return null;
    return p.own ? p.path : p.parent.path;
  }

  const CKEY = 'dynNav.collapsed';

  function buildShell() {
    nav = document.createElement('nav');
    nav.id = 'dyn-nav';
    try { nav.classList.toggle('collapsed', !!localStorage.getItem(CKEY)); } catch {}
    if (CFG.filter) {
      tools = document.createElement('div');
      tools.id = 'dyn-nav-tools';
      tools.innerHTML = '<input type="search" placeholder="Search all pages">';
      tools.querySelector('input').addEventListener('input', (e) => {
        query = e.target.value.trim().toLowerCase();
        nav.classList.toggle('searching', !!query);
        draw();
      });
    }
    nav.append(row('toggle', 'down', 'Browse'));
    list = document.createElement('div');
    list.className = 'list';
    nav.append(list);
    nav.addEventListener('click', (e) => {
      const el = e.target.closest('.row');
      if (!el) return;
      if (el.classList.contains('toggle')) {
        const c = nav.classList.toggle('collapsed');
        try { c ? localStorage.setItem(CKEY, '1') : localStorage.removeItem(CKEY); } catch {}
        return;
      }
      if (el.dataset.cd !== undefined) {
        if (query) { query = ''; tools.querySelector('input').value = ''; nav.classList.remove('searching'); }
        return cd(el.dataset.cd);
      }
      if (el.tagName === 'A') {
        if (e.ctrlKey || e.metaKey || e.shiftKey || e.button) return; // new tab etc.
        e.preventDefault();
        const r = router();
        r ? r.push(el.getAttribute('href')) : (location.href = el.href);
      }
    });
  }

  function onNavigate() {
    if (cwd === null || CFG.followPage) { const f = folderOfCurrent(); if (f !== null || cwd === null) cwd = f ?? ''; }
    draw();
    nav.querySelector('.row.current')?.scrollIntoView({ block: 'nearest' });
  }

  async function refresh(force) {
    if (force || Date.now() - lastFetch >= CFG.refreshSeconds * 1000) {
      lastFetch = Date.now();
      try {
        const data = await fetchTree();
        const on = data.items.length > 0; // anonymous with no read rights gets nothing: keep the stock menu
        document.body.classList.toggle('dyn-nav-on', on);
        if (!on) return;
        folders = buildTree(data);
        if (cwd !== null && !folders.byPath[cwd]) cwd = null; // the folder went away
      } catch (e) {
        console.warn('[dyn-nav]', e);
        document.body.classList.remove('dyn-nav-on');
        return;
      }
    }
    onNavigate();
  }

  // Sidebar width: stored per browser, applied through a CSS variable on <html>
  const WKEY = 'dynNav.width';
  const setWidth = (w) => {
    if (!w) { document.documentElement.classList.remove('dyn-nav-sized'); return; }
    document.documentElement.style.setProperty('--dyn-nav-w', w + 'px');
    document.documentElement.classList.add('dyn-nav-sized');
  };
  try { setWidth(+localStorage.getItem(WKEY) || 0); } catch {}

  const grip = document.createElement('div');
  grip.id = 'dyn-nav-grip';
  grip.title = 'Drag to resize, double-click to reset';
  grip.addEventListener('pointerdown', (e) => {
    const drawer = grip.parentElement, rect = drawer.getBoundingClientRect();
    const fromRight = drawer.classList.contains('w-drawer--right');
    let w = rect.width;
    grip.setPointerCapture(e.pointerId);
    grip.classList.add('drag');
    document.documentElement.classList.add('dyn-nav-dragging');
    const move = (ev) => {
      w = Math.round(Math.min(CFG.width.max, Math.max(CFG.width.min, fromRight ? rect.right - ev.clientX : ev.clientX - rect.left)));
      setWidth(w);
    };
    const up = () => {
      grip.removeEventListener('pointermove', move);
      grip.classList.remove('drag');
      document.documentElement.classList.remove('dyn-nav-dragging');
      try { localStorage.setItem(WKEY, w); } catch {}
    };
    grip.addEventListener('pointermove', move);
    grip.addEventListener('pointerup', up, { once: true });
    e.preventDefault();
  });
  grip.addEventListener('dblclick', () => { setWidth(0); try { localStorage.removeItem(WKEY); } catch {} });

  // The drawer is redrawn by Vue (login, layout switch, narrow view), so keep re-attaching after the stock menu
  let hooked = false;
  new MutationObserver(() => {
    const stock = document.querySelector('.sidebar-nav');
    if (!stock) return;
    if (!nav) { buildShell(); refresh(true); }
    if (stock.nextElementSibling !== nav) stock.after(nav);
    if (tools && stock.previousElementSibling !== tools) stock.before(tools);
    const drawer = stock.closest('.w-drawer');
    if (drawer && grip.parentElement !== drawer) drawer.append(grip);
    const r = router();
    if (r && !hooked) { hooked = true; r.afterEach(() => setTimeout(() => refresh(false), 0)); }
  }).observe(document.body, { childList: true, subtree: true });
})();
</script>