Sirttas
82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<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>
|