zterton-status/src/components/NavMenu.vue

<template>
  <nav
    class="flex items-center justify-between flex-wrap p-1 fixed w-full z-10 top-0 left-0"
    :class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-blue-900' : !isOpen}"
    @keydown.escape="isOpen = false"
  >
    <!--Logo etc-->
    <div class="flex items-center flex-shrink-0 text-white ml-2 mr-6">
      <a
        aria-current="page"
        href="/"
        class="router-link-active router-link-exact-active flex items-center text-white no-underline hover:text-white hover:no-underline"
        title="LibreCloud"
      >
        <span class="w-11 h-11 rounded-full mr-2">
          <img class="max-w-7xl w-32 h-rounded" src="/assets/images/logo.svg" alt="App">
        </span>
        <span class="hidden text-sm md:block mr-2">{{props.navtitle}}</span>
        <span
				  v-if="usetitle"
          class="text-xl pl-2"
        ><i class="em em-grinning"></i> {{ t(`nav.${props.title}`,props.title) }} </span>
      </a>
    </div>

    <!--Toggle button (hidden on large screens)-->
    <button
      type="button"
      class="block lg:hidden px-2 text-gray-300 hover:text-white focus:outline-none focus:text-white"
      :class="{ 'transition transform-180': isOpen }"
      @click.prevent="isOpen = !isOpen"
    >
      <svg
        class="h-6 w-6 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path
          v-show="isOpen"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
        />
        <path
          v-show="!isOpen"
          fill-rule="evenodd"
          d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
        />
      </svg>
    </button>

    <!--Menu-->
    <div
      class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
      :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
    >
      <ul
        class="pt-4 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"
      >
        <li v-for="item in items" :key="item.name_to" class="mr-3">
          <a
            class="inline-block py-2 px-4 text-white no-underline"
            :class="item.active ? '' : 'text-gray-400 no-underline hover:text-gray-200 hover:text-underline'"
            :href="item.href"
            @click.prevent="on_item(item)"
          > {{ t(`nav.${item.title}`,item.title) }} 
          </a>
        </li>
        <slot name="opslist" />
        <li class="p-1">
          <div class="bg-white flex items-center rounded-full shadow-xl">
            <slot name="search" />
          </div>
        </li>
        <slot name="lastitems" />
	      <li class="p-1" v-if="authData.auth !== ''">
					<router-link class="icon-btn text-2xl text-white no-underline" to="/logout" :title="t('button.logout')">
            <carbon-logout />
          </router-link>
        </li>
        <li class="p-1" v-else>
					<router-link class="icon-btn text-2xl text-white no-underline" to="/login" :title="t('button.login')">
            <carbon-login />
          </router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>
<script setup lang="ts">
import { SideMenuItemType } from '~/typs/cmpnts'
import { auth_data } from '~/hooks/utils'

const { t } = useI18n()

const props = defineProps<{
  navtitle: string
  usetitle: boolean
  title: string
  items: Array<SideMenuItemType>
}>()
const authData = auth_data()

const emit = defineEmits(['onNavMenu'])
const isOpen = ref(false)
const on_item = (item: SideMenuItemType) => {
  emit('onNavMenu', item)
}
</script>