hiveiq-src/hiveops-guide
4
0
Fork 0
Code Issues 10 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(guide): collapsible nav not toggling — reference open/searching directly (Svelte reactivity)

Browse Source 
isOpen() helper hid the dependency on `open` from Svelte's tracking, so clicks
updated state but not the view. Inline (searching || open[key]) instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Johannes
2026-07-01 12:30:14 -04:00
parent 9608b363ac
commit 3b80409718
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/GuideReader.svelte
+8 -9
View File
@@ -52,7 +52,6 @@
$: productApps = filtered.filter(a => a.app !== 'platform' && a.app !== 'technical'); $: productApps = filtered.filter(a => a.app !== 'platform' && a.app !== 'technical');
$: platformApp = filtered.find(a => a.app === 'platform') ?? null; $: platformApp = filtered.find(a => a.app === 'platform') ?? null;
$: technicalApp = filtered.find(a => a.app === 'technical') ?? null; $: technicalApp = filtered.find(a => a.app === 'technical') ?? null;
const isOpen = (key: string) => searching || !!open[key];
async function loadNav() { async function loadNav() {
loadingNav = true; loadingNav = true;
@@ -110,15 +109,15 @@
{#if productApps.length} {#if productApps.length}
<div class="nav-sec"> <div class="nav-sec">
<button class="sec-head" on:click={() => toggle('modules')}> <button class="sec-head" on:click={() => toggle('modules')}>
<span class="chev">{isOpen('modules') ? '▾' : '▸'}</span> Modules <span class="chev">{(searching || open['modules']) ? '▾' : '▸'}</span> Modules
</button> </button>
{#if isOpen('modules')} {#if (searching || open['modules'])}
{#each productApps as app (app.app)} {#each productApps as app (app.app)}
<div class="nav-app"> <div class="nav-app">
<button class="app-head" on:click={() => toggle('app:' + app.app)}> <button class="app-head" on:click={() => toggle('app:' + app.app)}>
<span class="chev">{isOpen('app:' + app.app) ? '▾' : '▸'}</span> {appLabel(app.app)} <span class="chev">{(searching || open['app:' + app.app]) ? '▾' : '▸'}</span> {appLabel(app.app)}
</button> </button>
{#if isOpen('app:' + app.app)} {#if (searching || open['app:' + app.app])}
{#each app.modules as m (m.module)} {#each app.modules as m (m.module)}
<button class="nav-item nested" class:active={m.module === activeModuleKey} <button class="nav-item nested" class:active={m.module === activeModuleKey}
on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button> on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button>
@@ -134,9 +133,9 @@
{#if platformApp} {#if platformApp}
<div class="nav-sec"> <div class="nav-sec">
<button class="sec-head" on:click={() => toggle('platform')}> <button class="sec-head" on:click={() => toggle('platform')}>
<span class="chev">{isOpen('platform') ? '▾' : '▸'}</span> Platform <span class="chev">{(searching || open['platform']) ? '▾' : '▸'}</span> Platform
</button> </button>
{#if isOpen('platform')} {#if (searching || open['platform'])}
{#each platformApp.modules as m (m.module)} {#each platformApp.modules as m (m.module)}
<button class="nav-item" class:active={m.module === activeModuleKey} <button class="nav-item" class:active={m.module === activeModuleKey}
on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button> on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button>
@@ -149,9 +148,9 @@
{#if technicalApp} {#if technicalApp}
<div class="nav-sec"> <div class="nav-sec">
<button class="sec-head" on:click={() => toggle('technical')}> <button class="sec-head" on:click={() => toggle('technical')}>
<span class="chev">{isOpen('technical') ? '▾' : '▸'}</span> Technical <span class="chev">{(searching || open['technical']) ? '▾' : '▸'}</span> Technical
</button> </button>
{#if isOpen('technical')} {#if (searching || open['technical'])}
{#each technicalApp.modules as m (m.module)} {#each technicalApp.modules as m (m.module)}
<button class="nav-item" class:active={m.module === activeModuleKey} <button class="nav-item" class:active={m.module === activeModuleKey}
on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button> on:click={() => selectModule(m.module)} title={m.module}>{m.title}</button>