_listing-chooser.qmd

::: column-page-inset-right
```{=html}

<style type="text/css">
.nav-tabs {
  margin-top: 0.5rem;
  border-bottom: none;
}

.callout {
  margin-top: 0;
}

.nav-tabs .nav-link {
  text-align: center;
  margin-right: 15px;
  margin-top: 10px;
  width: 147px;
  font-size: 0.8em;
  font-weight: 600;
}


.nav-tabs .nav-link, 
.nav-tabs .nav-link.active, 
.nav-tabs .nav-item.show .nav-link {
  border: 1px solid  rgb(222, 226, 230);
  border-radius: 10px;
  color: rgb(80,146,221);
}
.nav-tabs .nav-link:hover {
   border-color: rgb(80,146,221);
   border-width: 1px;
} 

.nav-tabs .nav-link.active, 
.nav-tabs .nav-item.show .nav-link {
  border-color: rgb(80,146,221);
  border-width: 2px;
}


.nav-tabs .nav-link i {
  display: block;
  font-size: 3rem;
  color: rgb(80,146,221);
  margin-bottom: 5px;
}

.quarto-listing {
  margin-top: 2em;
}

.quarto-listing .listing-name,
.quarto-listing .listing-author {
  white-space: nowrap;
}

.quarto-listing .listing-actions-group h3 {
  margin-top: 0;
}

 
</style>

<ul id="index-chooser" class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="listing-filters.html">
      <i class="bi bi-gear"></i>Shortcode/Filter
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="listing-journals.html">
      <i class="bi bi-journal-text"></i>Journal Articles
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="listing-formats.html">
      <i class="bi bi-file-earmark-richtext"></i>Custom Formats
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="listing-revealjs.html">
      <i class="bi bi-easel3"></i>Revealjs
    </a>
  </li>
</ul>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  // get file name
  const filename = window.location.pathname.split("/").slice(-1)[0];

  // latch active
  const toolLinks = window.document.querySelectorAll("#index-chooser a");
  for (const tool of toolLinks) {
    if (filename && filename !== "index.html") {
      if (tool.href.endsWith(filename)) {
        tool.classList.add("active");
      } 
    } else {
      if (tool.href.endsWith("listing-filters.html")) {
        tool.classList.add("active");
      }
    }
  }
  
  // move heading into table
  document.querySelector(".listing-actions-group").prepend(document.querySelector("h3.unlisted"));
});

</script>
```
:::