In carbon-components-svelte TreeView: how to share the tree on multiple route pages?

Question

I added the TreeView in __layout.svelte, and on:select I use svelte's goto() to jump to a path defined for the selected id.

But there are several issues:

• If I pass the url of a sub page on the tree, the left tree can't be selected correctly, it always select the default one.
• Similarly, If I click a link, the left tree can't be selected correctly.

I saw the left tree from document works well.
How is that done?

Questions:

• So, how to change / init the activeId properly, when the id is not selected by click items in the tree?
• Is there a better way to share the tree among multiple route pages?

Answer 1

(As mentioned in comment by @H.B , using <SideNav> from UIShell instead of <TreeView> solved the problem.)

You may refer to this example from the document.

Here is part of my code in __layout.svelte:

<script>
  import "../../app.css";
  import "carbon-components-svelte/css/all.css";

  import {
    SideNav,
    SideNavItems,
    SideNavMenu,
    SideNavMenuItem,
    SideNavLink,
    SideNavDivider,
    Content,
    Grid,
    Row,
    Column,
  } from "carbon-components-svelte";

  let isSideNavOpen = true;
</script>

<SideNav bind:isOpen={isSideNavOpen}>
  <SideNavItems>
    <SideNavLink href="/home" text="Home"/>
    <SideNavLink href="/home/content" text="Contents"/>
    <SideNavMenu text="Menu">
      <SideNavMenuItem href="/home" text="Home 1"/>
      <SideNavMenuItem href="/home" text="Home 2"/>
    </SideNavMenu>
    <SideNavDivider/>
    <SideNavLink href="/" text="Index"/>
  </SideNavItems>
</SideNav>

<Content>
  <Grid>
    <Row>
      <Column>
        <slot></slot>
      </Column>
    </Row>
  </Grid>
</Content>

Tips:

• Should add <slot> inside <Content>, otherwise the side nav might overlap part of the slot.

BTW, I'm using this in svelte-kit.