radiator-web/src/components/VNav.vue

<template>
  <nav class="bg-gray-800">
    <div class="max-w-7xl mx-auto px-2 sm:px-6">
      <div class="relative flex items-center justify-between h-16">
        <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
          <!-- Mobile menu button-->
          <button
            @click="open = !open"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
            aria-expanded="false"
          >
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed. -->
            <!--
              Heroicon name: outline/menu

              Menu open: "hidden", Menu closed: "block"
            -->
            <svg
              class="h-6 w-6"
              v-if="!open"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
            <!-- Icon when menu is open. -->
            <!--
              Heroicon name: outline/x

              Menu open: "block", Menu closed: "hidden"
            -->
            <svg
              class="h-6 w-6"
              v-else
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <div
          class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"
        >
          <div class="flex-shrink-0 flex items-center">
            <!--<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
                 alt="Workflow">
            <img class="hidden lg:block h-8 w-auto"
                 src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">-->
            <div class="block h-8 w-auto py-1 text-white" v-text="title" />
          </div>
          <div class="hidden sm:block sm:ml-6">
            <div class="flex space-x-4">
              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
              <router-link
                v-for="{ name, to } in items"
                :key="name"
                v-text="name"
                :to="{ name: to }"
                class="px-3 py-2 rounded-md text-sm font-medium"
                :class="
                  activeRoute === to
                    ? ['bg-gray-900', 'text-white']
                    : ['text-gray-300', 'hover:bg-gray-700', 'hover:text-white']
                "
              />
            </div>
          </div>
        </div>
        <div
          class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
        >
          <router-link
            :to="{ name: 'Login', query: { logout: true } }"
            class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
            >{{ isLoggedIn ? "Logout" : "Login" }}</router-link
          >
        </div>
      </div>
    </div>

    <!--
      Mobile menu, toggle classes based on menu state.

      Menu open: "block", Menu closed: "hidden"
    -->
    <div class="sm:hidden" :class="{ hidden: !open }">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
        <a
          v-for="{ name, to } in items"
          :key="name"
          v-text="name"
          :to="{ name: to }"
          class="block px-3 py-2 rounded-md text-base font-medium"
          :class="
            activeRoute === to
              ? ['bg-gray-900', 'text-white']
              : ['text-gray-300', 'hover:bg-gray-700', 'hover:text-white']
          "
        />
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
//stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue

import { ref, reactive, computed, watch } from "vue";
import { useRoute } from "vue-router";
import { isLoggedIn as isLoggedinFromAPI } from "../api";

export default {
  name: "VNav",
  setup() {
    const title = "radiator";
    const open = ref(false);
    const items = reactive([
      {
        name: "Dashboard",
        to: "Home",
      },
      {
        name: "Sites",
        to: "Sites",
      },
      {
        name: "Settings",
        to: "Settings",
      },
    ]);
    const route = useRoute();
    const activeRoute = computed(() => route.name);

    const isLoggedIn = ref(false);
    const getLoginStatus = async () => {
      isLoggedIn.value = await isLoggedinFromAPI();
    };
    watch(activeRoute, getLoginStatus);

    return { title, open, items, activeRoute, isLoggedIn };
  },
};
</script>

<style scoped></style>