ledger list and modal

This commit is contained in:
Sirttas
2026-05-17 19:19:01 +02:00
parent f9ae0d142a
commit 8005e7a45b
19 changed files with 843 additions and 95 deletions
+51 -47
View File
@@ -1,12 +1,12 @@
<script setup lang="ts">
import { Dropdown } from '@/components';
import { RouterLink } from 'vue-router';
import {Dropdown} from '@/components';
import {RouterLink} from 'vue-router';
const links = [
{ name: "Ledger", path: "/legers" },
{ name: "Market", path: "/market" },
{ name: "Reprocess", path: "/reprocess" },
{ name: "Tools", path: "/tools" }
{name: "Ledger", path: "/ledgers"},
{name: "Market", path: "/market"},
{name: "Reprocess", path: "/reprocess"},
{name: "Tools", path: "/tools"}
];
@@ -15,35 +15,35 @@ 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: '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>
<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: '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>
@@ -54,22 +54,26 @@ const logout = async () => {
}
.router-link-active {
@apply bg-emerald-500 hover:bg-emerald-700;
@apply bg-emerald-500 hover:bg-emerald-700;
}
.user-dropdown {
@apply w-full;
:deep(>div) {
@apply w-full;
:deep(>div) {
@apply w-full;
>div {
@apply w-full bg-slate-800;
}
}
:deep(>button) {
@apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
}
&.dropdown-open:deep(>button) {
@apply bg-slate-800 rounded-b-none;
> div {
@apply w-full bg-slate-800;
}
}
:deep(>button) {
@apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
}
&.dropdown-open:deep(>button) {
@apply bg-slate-800 rounded-b-none;
}
}
</style>