ktc-reborn/components/Base/Header.vue

<template>
  <header
    class="w-full flex justify-between gap-5 bg-background-100 p-3 animate__animated animate__fadeInDown animate__faster z-10"
  >
    <ISandwich
      class="w-8 h-8 hover:opacity-50 cursor-pointer duration-150"
      @click="sideBar.show()"
    />

    <div class="flex-auto flex items-center font-semibold">
      UserName
    </div>

    <IMoreVertical
      class="w-8 h-8 hover:opacity-50 cursor-pointer duration-150"
      @click="show"
    />

    <div
      v-if="showMenu"
      class="fixed top-0 left-0 w-screen h-screen bg-transparent"
    >
      <div
        class="w-full h-full flex justify-end items-start"
        :class="showAnim ? 'animate__animated animate__fadeIn' : 'animate__animated animate__fadeOut'"
        style="--animate-duration: 200ms"
        @click="hide"
      >
        <div class="m-3 w-44 flex flex-col divide-y-2 divide-stone-700 drop-shadow-lg">
          <button
            v-for="(item, idx) in menu"
            :key="idx"
            class="flex gap-5 p-3 items-center bg-background-100 hover:bg-stone-700 animate__animated animate__fadeInDown duration-150"
            :class="{
              'rounded-t-md': idx === 0,
              'rounded-b-md': idx === menu.length - 1,
            }"
            :style="`--animate-duration: ${(idx + 1) * 50}ms`"
            @click="item.action"
          >
            <img
              :src="`/icons/bug-report.svg`"
              class="w-7 h-7"
              :alt="item.icon"
            >
            <p v-text="item.name" />
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useDebug } from '~/store/useDebug'
import { useSideBar } from '~/store/useSideBar'
// import { useUser } from '~/store/useUser'

const sideBar = useSideBar()
// const user = useUser()
const debug = useDebug()
const showMenu = ref(false)
const showAnim = ref(false)
function hide() {
  showAnim.value = false
  setTimeout(() => {
    showMenu.value = false
  }, 100)
}
function show() {
  showMenu.value = true
  showAnim.value = true
}
const menu = [
  {
    name: 'Debug',
    icon: 'bug-report',
    action: () => debug.show(),
  },
  {
    name: 'Debug',
    icon: 'bug-report',
    action: () => debug.show(),
  },
]
</script>