feat(dashboard): handle API errors and enhance translations

resources/js/layouts/Layout.vue

@@ -2,17 +2,33 @@
 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-1 gap-4">
-            <li>
-                <a :href="dashboard.index().url">{{ t('dashboard.title') }}</a>
-            </li>
-            <li>
-                <a :href="history.index().url">{{ t('history.title') }}</a>
+        <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>