98 lines
3.5 KiB
Vue
98 lines
3.5 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">
|
|
<UIcon
|
|
name="i-heroicons-rocket-launch"
|
|
class="text-primary-500" />
|
|
<h1
|
|
class="font-semibold text-black dark:text-white text-center">
|
|
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': isCoopSection,
|
|
}">
|
|
Co-Op in 6 Months
|
|
</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>
|
|
<UButton
|
|
color="gray"
|
|
variant="ghost"
|
|
disabled
|
|
class="px-3 py-2 text-sm text-black dark:text-white rounded-md opacity-60 cursor-not-allowed">
|
|
Downloads
|
|
</UButton>
|
|
</nav>
|
|
<nav
|
|
v-if="isCoopSection"
|
|
class="mt-2 flex items-center justify-center gap-1"
|
|
role="navigation"
|
|
aria-label="Co-Op in 6 Months sub navigation">
|
|
<NuxtLink
|
|
v-for="item in coopMenu[0]"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
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 === item.to,
|
|
}">
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</header>
|
|
<NuxtPage />
|
|
</UContainer>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtPage />
|
|
</template>
|
|
</NuxtLayout>
|
|
<NuxtRouteAnnouncer />
|
|
</div>
|
|
</UApp>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const coopMenu = [
|
|
[
|
|
{ label: "Dashboard", to: "/" },
|
|
{ label: "Revenue Mix", to: "/mix" },
|
|
{ label: "Budget", to: "/budget" },
|
|
{ label: "Scenarios", to: "/scenarios" },
|
|
{ label: "Cash", to: "/cash" },
|
|
{ label: "Glossary", to: "/glossary" },
|
|
],
|
|
];
|
|
|
|
const route = useRoute();
|
|
const isCoopSection = computed(() => route.path === "/coop-planner");
|
|
</script>
|