<script setup lang="ts">
import {Dropdown} from '@/components';
import {RouterLink} from 'vue-router';
import {routeNames} from '@/routes';

const links = [
  {name: "Ledger", path: "/ledgers"},
  {name: "Rules", path: "/rules"},
  {name: "Market", path: "/market"},
  {name: "Reprocess", path: "/reprocess"},
  {name: "Tools", path: "/tools"}
];


const logout = async () => {
}
</script>

<template>
  <aside class="fixed top-0 left-0 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
    <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700 flex flex-col">
      <div class="mb-2 border-b-2 border-emerald-500">
        <Dropdown class="mb-2 user-dropdown">
          <template #button>
            <span>NAME</span>
          </template>
          <ul>
            <li>
              <RouterLink class="sidebar-button py-0.5 px-2" to="/characters">Characters</RouterLink>
            </li>
            <li>
              <RouterLink class="sidebar-button py-0.5 px-2" :to="{name: routeNames.about}">About EVE Online</RouterLink>
            </li>
            <li>
              <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
            </li>
          </ul>
        </Dropdown>
      </div>
      <ul class="space-y-2 font-medium">
        <li v-for="link in links" :key="link.name">
          <RouterLink :to="link.path" class="sidebar-button p-2">
            <span>{{ link.name }}</span>
          </RouterLink>
        </li>
      </ul>
    </div>
  </aside>
</template>

<style scoped>
@reference "tailwindcss";

.sidebar-button {
  @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
}

.router-link-active {
  @apply bg-emerald-500 hover:bg-emerald-700;
}

.user-dropdown {
  @apply w-full;
}

.user-dropdown :deep(>div) {
  @apply w-full;

  > div {
    @apply w-full bg-slate-800;
  }
}

.user-dropdown :deep(>button) {
  @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
}

.user-dropdown.dropdown-open :deep(>button) {
  @apply bg-slate-800 rounded-b-none;
}
</style>
