SideNav.astro

<nav id="sidebar" class="absolute z-10 w-full pt-12 lg:relative lg:w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7 hidden lg:block">  <ul class="pl-8 font-code mb-20">
    <li class="heading">guide</li>
    <li><a href="/">why?</a></li>
    <li><a href="/guide/start">get started</a></li>
    <li><a href="/guide/todo">common patterns</a></li>
    <li><a href="/guide/todo">sveltekit ssr</a></li>
    <li class="heading">app</li>
    <li><a href="/app/firebase-app">&ltFirebaseApp&gt</a></li>
    <li><a href="/app/context">getFirebaseContext</a></li>
    <li class="heading">auth</li>
    <li><a href="/auth/user-store">userStore</a></li>
    <li><a href="/auth/signed-in">&ltSignedIn&gt</a></li>
    <li><a href="/auth/signed-out">&ltSignedOut&gt</a></li>
    <li class="heading">firestore</li>
    <li><a href="/firestore/doc-store">docStore</a></li>
    <li><a href="/firestore/collection-store">collectionStore</a></li>
    <li><a href="/firestore/doc-component">&ltDoc&gt</a></li>
    <li><a href="/firestore/collection-component">&ltCollection&gt</a></li>
    <li class="heading">storage</li>
    <li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
    <li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
    <li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
    <li class="heading">analytics</li>
    <li><a href="/guide/todo">&ltPageView&gt</a></li>
    <li class="heading">aboutCreator</li>
    <li><a href="/about/jeff-delaney">&ltJeffDelaney&gt</a></li>
    <li><a href="/about/contributors">&ltContributors&gt</a></li>
  </ul>
</nav>

<style>
  li {
    @apply dark:text-gray4 my-2;
  }
  .heading {
    @apply my-6 text-gray6 dark:text-white;
  }
  a {
    @apply text-blue-600 dark:text-blue-400 !important;
  }
</style>