ledger list and modal
This commit is contained in:
+51
-47
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user