app/app.vue

66 lines
2.5 KiB
Vue

<template>
<UApp>
<UToaster />
<UContainer>
<header class="py-4 flex items-center justify-between">
<div class="flex items-center gap-4">
<NuxtLink to="/" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
<UIcon name="i-heroicons-rocket-launch" class="text-primary-500" />
<h1 class="font-semibold">Urgent Tools</h1>
</NuxtLink>
<nav class="hidden md:flex items-center gap-1" role="navigation" aria-label="Main navigation">
<NuxtLink
to="/"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/' }"
>
Dashboard
</NuxtLink>
<NuxtLink
to="/mix"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/mix' }"
>
Revenue Mix
</NuxtLink>
<NuxtLink
to="/budget"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/budget' }"
>
Budget
</NuxtLink>
<NuxtLink
to="/scenarios"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/scenarios' }"
>
Scenarios
</NuxtLink>
<NuxtLink
to="/cash"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/cash' }"
>
Cash
</NuxtLink>
<NuxtLink
to="/glossary"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/glossary' }"
>
Glossary
</NuxtLink>
</nav>
</div>
<ColorModeToggle />
</header>
<NuxtPage />
</UContainer>
<NuxtRouteAnnouncer />
</UApp>
</template>
<script setup lang="ts">
// noop
</script>