<script setup lang="ts">
import { t } from 'i18next';
import dashboard from '@/routes/dashboard';
import history from '@/routes/history';
import { Link, router, 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>
