<nav>
  <sl-tooltip>
    <div slot="content">
      Home
      <sl-icon library="boxicons" name="bx-link-external"></sl-icon>
    </div>
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-home"></sl-icon-button>
  </sl-tooltip>
  <sl-tooltip content="Tags">
    <div slot="content">
      Tags
      <sl-icon library="boxicons" name="bx-link-external"></sl-icon>
    </div>
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-tag"></sl-icon-button>
  </sl-tooltip>
  <sl-tooltip content="Graph">
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-network-chart"></sl-icon-button>
  </sl-tooltip>
  <sl-tooltip>
    <div slot="content">
      Random note
      <sl-icon library="boxicons" name="bx-link-external"></sl-icon>
    </div>
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-shuffle"></sl-icon-button>
  </sl-tooltip>
  <sl-tooltip>
    <div slot="content">
      References
      <sl-icon library="boxicons" name="bx-link-external"></sl-icon>
    </div>
    <sl-icon-button style="font-size: 1.25rem;" library="boxicons" name="bx-library"></sl-icon-button>
  </sl-tooltip>
  <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>
      <a href="https://lunrjs.com/guides/searching.html" target="_blank" slot="help-text">Search help</a>
      <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" label="Zettelkasten graph" style="--width: 100%;">
    <div style="height: 100vh; margin: 0; padding: 0;">
      <hr style="color: transparent; font-size: 1px;" />
    </div>
  </sl-dialog>

  <script type="module">
import { registerIconLibrary } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.46/dist/shoelace.js'

registerIconLibrary('boxicons', {
  resolver: name => {
    let folder = 'regular'
    if (name.substring(0, 4) === 'bxs-') folder = 'solid'
    if (name.substring(0, 4) === 'bxl-') folder = 'logos'
    return `https://cdn.jsdelivr.net/npm/boxicons@2.0.7/svg/${folder}/${name}.svg`
  },
  mutator: svg => svg.setAttribute('fill', 'currentColor')
})

  document.querySelector('sl-icon-button[name="bx-home"]').addEventListener('click', () => {
    window.location = '#home'
  })

  document.querySelector('sl-icon-button[name="bx-tag"]').addEventListener('click', () => {
    window.location = '#tags'
  })

  document.querySelector('sl-icon-button[name="bx-library"]').addEventListener('click', () => {
    window.location = '#references'
  })

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