jennie/app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: enhance UI components and navigation structure, implement export functionality for wizard steps, and update routing for improved user experience

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-16 13:17:36 +01:00
parent 37ab8d7bab
commit d7e52293e4
18 changed files with 3802 additions and 3318 deletions
Download patch file Download diff file Expand all files Collapse all files

138
app.vue
View file

@ -3,80 +3,96 @@
<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-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 text-black dark:text-white">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 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 === '/' }"
>
Dashboard
<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>
<NuxtLink
to="/mix"
<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': $route.path === '/mix' }"
>
Revenue Mix
:class="{
'bg-neutral-100 dark:bg-neutral-800': isCoopSection,
}">
Co-Op in 6 Months
</NuxtLink>
<NuxtLink
to="/budget"
<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 === '/budget' }"
>
Budget
:class="{
'bg-neutral-100 dark:bg-neutral-800':
$route.path === '/wizards',
}">
Wizards
</NuxtLink>
<NuxtLink
to="/scenarios"
<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 === '/scenarios' }"
>
Scenarios
</NuxtLink>
<NuxtLink
to="/cash"
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 === '/cash' }"
>
Cash
</NuxtLink>
<NuxtLink
to="/glossary"
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 === '/glossary' }"
>
Glossary
</NuxtLink>
<NuxtLink
to="/templates"
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('/templates') }"
>
Templates
:class="{
'bg-neutral-100 dark:bg-neutral-800':
route.path === item.to,
}">
{{ item.label }}
</NuxtLink>
</nav>
</div>
<ColorModeToggle />
</header>
</header>
<NuxtPage />
</UContainer>
</template>
<template v-else>
<NuxtPage />
</UContainer>
</template>
<template v-else>
<NuxtPage />
</template>
</NuxtLayout>
</template>
</NuxtLayout>
<NuxtRouteAnnouncer />
</div>
</UApp>
</template>
<script setup lang="ts">
// noop
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>