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 { useRoute, useRouter } from "vue-router";
import { useCookies } from "vue3-cookies";
import { watch, ref } from "vue";

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

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" });
}

const activeRoute = ref("");

watch(
  () => route.name,
  (to) => {
    if (typeof to === "string") {
      if (to.startsWith("bucket")) {
        activeRoute.value = "buckets";
      } else if (to.startsWith("s3_keys")) {
        activeRoute.value = "s3_keys";
      } else {
        activeRoute.value = "";
      }
    } else {
      activeRoute.value = "";
    }
  }
);

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

<template>
  <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-dark">
    <div class="container-fluid text-light">
      <router-link class="navbar-brand ms-3" 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>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup"
        aria-expanded="false"
        aria-label="Toggle navigation"
        v-if="store.authenticated && store.user != null"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
        class="collapse navbar-collapse"
        id="navbarNavAltMarkup"
        v-if="store.authenticated && store.user != null"
      >
        <div class="navbar-nav">
          <router-link
            class="nav-link"
            :aria-current="activeRoute === 'buckets' ? 'page' : null"
            :to="{ name: 'buckets' }"
            :class="{ active: activeRoute === 'buckets' }"
          >
            Buckets
          </router-link>
          <router-link
            class="nav-link"
            :to="{ name: 's3_keys' }"
            :aria-current="activeRoute === 's3_keys' ? 'page' : null"
            :class="{ active: activeRoute === 's3_keys' }"
          >
            S3 Keys
          </router-link>
        </div>
      </div>

      <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>