Subsection

usage

Page in a nested settings menu. The whole tree needs to be wrapped once in SubsectionsNav, and each level in the hierarchy is wrapped in Subsections component.

You can specify a path that you can use in an action to open the menu at a specific page, for example

InterkitClient.setUiKey("menuPath", "help/map")

Help would be top level subsection, map the subsection on the second level you want to open.

Source

<script>

  import { lang } from '../i18n.js'
  import { getContext } from 'svelte';
  const { registerSection, activeSection } = getContext("Subsections");

  export let title;
  export let path;

  const key = {};

  $: {
    console.log('Subsection $', key, title, path)
    registerSection({key, title, path})
  }

  registerSection({key, title, path});

</script>

<div class:active={key == $activeSection?.key} class="Subsection {path}">
  <slot></slot>
</div>

<style>

  div {
    display: none;
  }

  div.active {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: all;
    touch-action: auto;
    background-color: white;
    z-index: 1000;
  }


</style>