AppFooter.vue

<script setup lang="ts"></script>

<template>
  <footer
    class="navbar navbar-expand-lg bd-navbar w-100 border-top border-secondary mt-auto p-2"
  >
    <nav class="container-xxl bd-gutter text-light justify-content-end">
      <ul class="m-0 p-0">
        <li>
          <router-link :to="{ name: 'imprint' }">Imprint</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'privacy' }">Privacy</router-link>
        </li>
        <li>
          <router-link :to="{ name: 'terms' }">Terms</router-link>
        </li>
        <li>
          <a href="https://gitlab.ub.uni-bielefeld.de/cmg/clowm">GitLab</a>
        </li>
      </ul>
    </nav>
  </footer>
</template>

<style scoped>
footer {
  background: rgb(255, 177, 45);
}

li {
  display: inline;
  margin-right: 0.5rem !important;
}

li:not(:first-child):before {
  content: "·";
  margin-right: 0.5rem !important;
  color: var(--bs-dark);
}

a {
  text-decoration: none;
  color: var(--bs-dark);
}

a:hover {
  text-decoration: underline;
  color: white;
}
</style>