owlboard-svelte/src/lib/navigation/nav.svelte

<script>
    const links = [
      {
        title: "Home",
        path: "/",
        svgPath: "/images/navigation/home.svg"
      },
      {
        title: "PIS Finder",
        path: "/pis",
        svgPath: "/images/navigation/info.svg"
      },
      {
        title: "More",
        path: "/more",
        svgPath: "/images/navigation/more.svg"
      }
    ]
    import { page } from "$app/stores";
</script>

<footer>
  {#each links as item}
        <a href={item.path} class:active={$page.url.pathname == item.path}>
          <img src="{item.svgPath}" alt="{item.title}">
          <br>
          <span>{item.title}</span>
        </a>
  {/each}
</footer>

<style>
    footer {
        position: fixed;
        display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.123);
    }

   footer a {
        flex: 12;
        width: 30%;
        height: 100%;
        background-color: var(--overlay-color);
        border-style: solid;
        border-width: 1px;
        border-top: none;
        border-bottom: none;
        border-color: rgba(0, 0, 0, 0.24);
        text-decoration: double;
        font-weight: 600;
    }

    footer a.active {
        background-color: transparent;
    }

    img {
      height: 20px;
      width: 20px;
      margin: 0;
      margin-top: 3px;
      padding: 0;
    }

    span {
      margin: 0;
      margin-bottom: 3px;
      padding: 0;
    }
</style>