<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { ref } from 'vue'
import jfapi from './jfapi'
import { OnClickOutside } from '@vueuse/components'
const menuOpen = ref(false)

const logout = () => {
  jfapi.Logout().then(() => {
    localStorage.removeItem('jf_views')
    localStorage.removeItem('jf_userid')
    localStorage.removeItem('jf_host')
    window.location.href = '/login'
  })
}
</script>
<template>
  <OnClickOutside @trigger="menuOpen = false">
    <div class="primary-nav no-select" v-if="!$route.meta.hideMenu">
      <div class="menu-toggle" @click="menuOpen = !menuOpen">
        <font-awesome-icon icon="fa-solid fa-bars" size="xl" />
      </div>
      <div class="menu" v-show="menuOpen">
        <RouterLink class="menu-item" to="/home" key="home">Home</RouterLink>
        <div class="menu-item">Settings</div>
        <div class="menu-item" @click="logout">Sign Out</div>
      </div>
    </div>
  </OnClickOutside>
  <div class="wrapper">
    <router-view v-slot="{ Component, route }">
      <transition name="fade">
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>
</template>

<style scoped>
.wrapper {
  margin: 0 auto;
}

.primary-nav {
  position: relative;
}

.menu-toggle {
  position: absolute;
  top: 20px;
  left: 20px;
}
.menu-toggle:hover {
  cursor: pointer;
  color: var(--color-text-faded);
}

.menu {
  position: absolute;
  top: 25px;
  left: 80px;
  background-color: var(--color-background-darker);
  padding: 1.5em;
  display: flex;
  align-items: baseline;
  flex-direction: column;
  gap: 1em;
  z-index: 100; /* always on top */
}
.menu-item {
  font-size: 14px;
}
.menu-item:hover {
  color: var(--color-text-faded);
  cursor: pointer;
  text-decoration: none;
}
.footer {
  height: 100px;
}
</style>
