37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { t } from 'i18next';
|
|
import dashboard from '@/routes/dashboard';
|
|
import history from '@/routes/history';
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { computed } from 'vue';
|
|
|
|
const page = usePage();
|
|
const currentUrl = computed(() => page.url);
|
|
|
|
const navItems = [
|
|
{ href: dashboard.index().url, label: 'dashboard.title' },
|
|
{ href: history.index().url, label: 'history.title' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="fixed top-0 bottom-0 left-0 w-64 bg-primary p-4">
|
|
<img src="/storage/logo.svg" class="mb-4 mix-blend-plus-lighter" />
|
|
<ul class="flex flex-1 flex-col gap-2">
|
|
<li v-for="item in navItems" :key="item.href">
|
|
<Link
|
|
:href="item.href"
|
|
:class="
|
|
currentUrl === item.href
|
|
? 'block rounded-lg bg-white/10 p-2 font-semibold text-white'
|
|
: 'block rounded-lg p-2 text-white/70 hover:bg-white/5 hover:text-white'
|
|
"
|
|
>
|
|
{{ t(item.label) }}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="absolute top-0 right-0 bottom-0 left-64 p-4"><slot /></div>
|
|
</template>
|