diff --git a/web/src/multiview.ts b/web/src/multiview.ts index 522d2ce..ff9cdeb 100644 --- a/web/src/multiview.ts +++ b/web/src/multiview.ts @@ -338,6 +338,18 @@ export function createMultiView(opts: MultiViewOptions): MultiView { render(); } + // The floating ☰ that stands in for the collapsed tab bar on mobile (single + // tab), keeping the sidebar drawer reachable from the welcome + pane views. + function makeMobileFab(): HTMLButtonElement { + const fab = document.createElement("button"); + fab.type = "button"; + fab.className = "mv-mobile-fab"; + fab.title = "Sessions"; + fab.textContent = "☰"; + fab.addEventListener("click", () => opts.onToggleSidebar?.()); + return fab; + } + // ---- top-level render ---- function render(): void { @@ -351,6 +363,7 @@ export function createMultiView(opts: MultiViewOptions): MultiView { if (!tab.root) { pool.setVisible([]); pool.setFocus(null); + if (isMobile && layout.tabs.length === 1) canvas.appendChild(makeMobileFab()); canvas.appendChild(renderWelcome()); sidebar.setHighlights({ open: openSessions(layout), focused: null, colors: colorMap() }); persist(); @@ -385,15 +398,7 @@ export function createMultiView(opts: MultiViewOptions): MultiView { // With a single tab the tab bar (and its ☰) is hidden — float a ☰ so the // sidebar drawer stays reachable. - if (layout.tabs.length === 1) { - const fab = document.createElement("button"); - fab.type = "button"; - fab.className = "mv-mobile-fab"; - fab.title = "Sessions"; - fab.textContent = "☰"; - fab.addEventListener("click", () => opts.onToggleSidebar?.()); - wrap.appendChild(fab); - } + if (layout.tabs.length === 1) wrap.appendChild(makeMobileFab()); if (ls.length > 1) { const bar = document.createElement("div");