app/app.vue

105 lines
3.7 KiB
Vue

<template>
<UApp>
<div class="min-h-screen bg-white dark:bg-neutral-950">
<UToaster />
<NuxtLayout>
<template v-if="$route.meta.layout !== 'template'">
<UContainer class="bg-transparent">
<header class="py-6">
<div class="relative flex items-center justify-center">
<NuxtLink
to="/"
class="flex items-center gap-2 hover:opacity-80 transition-opacity">
<h1
class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold">
Urgent Tools
</h1>
</NuxtLink>
<div class="absolute right-0">
<ColorModeToggle />
</div>
</div>
<nav
class="mt-4 flex items-center justify-center gap-1"
role="navigation"
aria-label="Main navigation">
<NuxtLink
to="/coop-planner"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800': isCoopBuilderSection,
}">
Budget Builder
</NuxtLink>
<!-- Coach feature - hidden for now -->
<!-- <NuxtLink
to="/coach/skills-to-offers"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800': $route.path.startsWith('/coach'),
}"
>
Coach
</NuxtLink> -->
<NuxtLink
to="/wizards"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800':
$route.path === '/wizards',
}">
Wizards
</NuxtLink>
<NuxtLink
to="/resources"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800':
$route.path === '/resources',
}">
More Resources & Templates
</NuxtLink>
</nav>
<div class="py-8">
<CoopBuilderSubnav v-if="isCoopBuilderSection" />
<WizardSubnav v-if="isWizardSection" />
</div>
</header>
<NuxtPage />
</UContainer>
</template>
<template v-else>
<NuxtPage />
</template>
</NuxtLayout>
<NuxtRouteAnnouncer />
</div>
</UApp>
</template>
<script setup lang="ts">
const route = useRoute();
const isCoopBuilderSection = computed(
() =>
route.path === "/coop-planner" ||
route.path === "/coop-builder" ||
route.path === "/" ||
route.path === "/mix" ||
route.path === "/budget" ||
route.path === "/project-budget" ||
route.path === "/settings" ||
route.path === "/glossary"
);
const isWizardSection = computed(
() => route.path === "/wizards" || route.path.startsWith("/templates/")
);
// Run migrations on app startup
onMounted(() => {
const { migrate, needsMigration } = useMigrations();
if (needsMigration()) {
migrate();
}
});
</script>