<nav>
  <sb-nav-item title="Home" external icon="boxicons/bx-home" href="#home"></sb-nav-item>
  <sb-nav-item title="Tags" external icon="boxicons/bx-tag" href="#tags"></sb-nav-item>
  <sb-nav-item title="References" external icon="boxicons/bx-library" href="#references"></sb-nav-item>
  <sl-tooltip content="Graph">
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-network-chart"></sl-icon-button>
  </sl-tooltip>
  <sb-nav-item title="Random note" external icon="boxicons/bx-shuffle"></sb-nav-item>
  <sl-tooltip content="Search">
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-search"></sl-icon-button>
  </sl-tooltip>

  <sl-dialog id="slipbox-search-dialog" style="--body-spacing: 0 1em;">
    <sl-input size="small" pill slot="label" placeholder="Search notes" clearable>
      <sl-icon slot="prefix" name="bx-search" library="boxicons"></sl-icon>
    </sl-input>
    <div class="slipbox-search-dialog-results"></div>
  </sl-dialog>

  <sl-dialog id="slipbox-graph-dialog" style="--width: 100%;">
    <span slot="label">Zettelkasten graph</span>
    <div style="height: 100vh; margin: 0; padding: 0;">
      <hr style="color: transparent; font-size: 1px;" />
    </div>
  </sl-dialog>

  <script type="module">
  const searchDialog = document.querySelector('#slipbox-search-dialog')
  document.querySelector('sl-icon-button[name="bx-search"]').addEventListener('click', () => {
    searchDialog.show()
  })
  </script>
</nav>
