<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import jfapi from './jfapi'
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>
  <div class="primary-nav no-select" v-if="!$route.meta.isLoginPage">
    <div class="menu-toggle" @click="menuOpen = !menuOpen">
      <font-awesome-icon icon="fa-solid fa-bars" size="xl" />
    </div>
    <div class="menu" v-show="menuOpen">
      <div class="menu-item">Home</div>
      <div class="menu-item">Settings</div>
      <div class="menu-item" @click="logout">Sign Out</div>
    </div>
  </div>
  <div class="wrapper">
    <RouterView />
  </div>
  <div class="footer"></div>
</template>

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

.primary-nav {
  position: relative;
}

.menu-toggle {
  position: absolute;
  top: 30px;
  left: 30px;
}
.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;
}

.menu-item {
  font-size: 14px;
}
.menu-item:hover {
  color: var(--color-text-faded);
  cursor: pointer;
}
.footer {
  height: 100px;
}
</style>
