frontend/src/views/Header.vue

<script lang="ts" setup>
import router from "@/router.ts";
import {watch, ref, onMounted, onUnmounted} from "vue";
import {ArrowRightOutlined, DashboardOutlined,
  ExperimentOutlined, SettingOutlined} from "@ant-design/icons-vue";

const windowWidth = ref(window.innerWidth)

onMounted(() => {
  window.addEventListener('resize', () => {
    windowWidth.value = window.innerWidth
  })
})
onUnmounted(() => {
  window.removeEventListener('resize', () => {
    windowWidth.value = window.innerWidth
  })
})

const sessionActive = ref(false)
const toolsActive = ref(false)
watch(router.currentRoute, (to, from) => {
  console.log('router changed', to, from)

  const sessionActivePath = ['/sessions', '/sessions/', '/form', '/form/', '/output']

  if (sessionActivePath.includes(to.path)) {
    sessionActive.value = true
    toolsActive.value = false
    return
  }

  const toolsActivePath = ['/tools', '/tools/', '/benchmark', '/benchmark/', '/benchmark_detail', '/benchmark_detail/']
  if (toolsActivePath.includes(to.path)) {
    sessionActive.value = false
    toolsActive.value = true
    return
  }

  sessionActive.value = false
  toolsActive.value = false
})

const gotoSettings = (e: any) => {
  e.preventDefault()
  router.push('/settings')
}

const gotoProfiling = (e: any) => {
  e.preventDefault()
  router.push('/profiling')
}

const gotoHealthcheck = (e: any) => {
  e.preventDefault()
  router.push('/healthcheck')
}

</script>
<template>
  <nav class="header-nav">
    <div class="nav-left flex flex-row justify-between items-center">
      <router-link to="/" >
        <img
            alt="logo"
            src="/logo.webp"
            class="logo"
        />
      </router-link>

    </div>
    <div class="title">
      <div v-if="windowWidth >= 1280">
        <div class="primary">AVATAR
        </div>
        <div class="secondary">(power by AI)</div>
      </div>
      <h3 v-if="windowWidth < 1280"
          class="text-3xl font-medium text-primary-dark dark:text-ternary-light hidden sm:block"
          style="font-size: 22px; line-height: 60px; font-weight: 600;"
      >AVATAR</h3>
    </div>
    <div class="nav-right flex flex-row justify-between items-center">
<!--      <a-button type="link" href="/">-->
<!--        <span :style="router.currentRoute.value.path == '/' ? 'border-bottom: solid 2px; ' : ''" >Home</span>-->
<!--      </a-button>-->
<!--      <router-link to="/settings" >-->
<!--        <img-->
<!--            alt="logo"-->
<!--            src="/logo.webp"-->
<!--            class="logo"-->
<!--        />-->
<!--      </router-link>-->
      <a-button type="ghost" style="margin-right: 12px;"
                size="large" @click="gotoProfiling">
        <template #icon>
          <ExperimentOutlined style="font-size: 24px;"/>
        </template>
      </a-button>
      <a-button type="ghost" style="margin-right: 12px;"
                size="large" @click="gotoHealthcheck">
        <template #icon>
          <DashboardOutlined style="font-size: 24px;"/>
        </template>
      </a-button>
      <a-button type="ghost" size="large" @click="gotoSettings">
        <template #icon>
          <SettingOutlined style="font-size: 24px;"/>
        </template>
      </a-button>
<!--      <a-button type="link" target="_blank" >-->
<!--        <span>Contact</span>-->
<!--      </a-button>-->
    </div>
  </nav>
</template>
<style scoped lang="scss">
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 72px;
  background: aliceblue;
  box-shadow: 1px 1px 2px 1px #d9d9d9;
  top: 0;
  position: sticky;
  z-index: 99;
}

.nav-left {
  position: absolute;
  left: 20px;
  top: 12px;
}

.nav-right {
  .ant-btn {
    span {
      font-size: 15px;
      font-weight: 600;
    }
  }
}

.logo {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.nav-items {
  margin-left: 10px;
}

.nav-right {
  position: absolute;
  right: 20px;
  height: 64px;
  align-items: center;
  display: flex;
}

.title {
  margin-left: 84px;
  line-height: 48px;
  height: 54px;

  .primary {
    font-weight: bold;
    text-align: left;
    font-size: 16px;
    letter-spacing: -0.8px;
    font-family:  Courier,Menlo, monospace, 'SFMono-Regular', Consolas, 'Liberation Mono';
  }
  .secondary {
    font-family:  Courier,Menlo, monospace, 'SFMono-Regular', Consolas, 'Liberation Mono';
    text-align: left;
    font-size: 8px;
    letter-spacing: -0.2px;
    font-weight: 400;
    line-height: 20px;
    margin-top: -12px;
  }
}

.switch-icon {
  margin-left: 20px;
}
</style>