NavbarTop.vue

<script setup lang="ts">
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import { reactive, onBeforeUnmount, onMounted } from "vue";
import { MiscellaneousService } from "@/client";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import { useCookies } from "vue3-cookies";

const router = useRouter();
const store = useAuthStore();
const { cookies } = useCookies();

const api_connection = reactive({ connected: true, timer: null });
let timer: ReturnType<typeof setInterval> | undefined = undefined;
function checkApiHealth() {
  MiscellaneousService.miscellaneousHealthCheck()
    .then(() => {
      api_connection.connected = true;
    })
    .catch(() => {
      api_connection.connected = false;
    });
}

function logout() {
  store.logout();
  cookies.remove("bearer");
  router.push({ name: "login" });
}

onMounted(() => {
  checkApiHealth();
  timer = setInterval(checkApiHealth, 10000);
});
onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<template>
  <nav class="navbar fixed-top navbar-expand-lg text-bg-dark">
    <div class="container-fluid">
      <router-link class="navbar-brand ms-3 text-light" to="/">
        <img
          src="/src/assets/images/denbi.svg"
          alt=""
          width="24"
          height="24"
          class="d-inline-block align-text-top me-2"
        />
        S3 Proxy
      </router-link>
      <span
        v-if="!api_connection.connected"
        class="navbar-text text-bg-danger p-1"
      >
        Backend not reachable
      </span>
      <div
        class="dropdown d-flex me-3"
        v-if="store.authenticated && store.user != null"
      >
        <a
          href="#"
          class="d-flex align-items-center text-white text-decoration-none dropdown-toggle-split"
          id="dropdownUser1"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <strong class="me-2">{{ store.user.display_name }}</strong>
          <bootstrap-icon icon="person-circle" fill="white" />
        </a>
        <ul
          class="dropdown-menu dropdown-menu-dark text-small shadow"
          aria-labelledby="dropdownUser1"
        >
          <li><hr class="dropdown-divider" /></li>
          <li>
            <a class="dropdown-item pseudo-link" @click="logout">Sign out</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<style scoped>
.pseudo-link {
  cursor: pointer;
}
</style>