mirror of
https://github.com/unraid/api.git
synced 2026-01-29 12:09:08 -06:00
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script setup>
|
|
import { NuxtLink } from '#components';
|
|
|
|
import ModalsCe from '~/components/Modals.ce.vue';
|
|
import { useThemeStore } from '~/store/theme';
|
|
|
|
const themeStore = useThemeStore();
|
|
const { theme } = storeToRefs(themeStore);
|
|
|
|
// Get routes from Nuxt's server-side route generation
|
|
const { data: routes } = await useFetch('/api/routes');
|
|
|
|
// Watch for theme changes (satisfies linter by using theme)
|
|
watch(
|
|
theme,
|
|
() => {
|
|
// Theme is being watched for reactivity
|
|
console.debug('Theme changed:', theme.value);
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
function formatRouteName(name) {
|
|
if (!name) return 'Home';
|
|
// Convert route names like "web-components" to "Web Components"
|
|
return name
|
|
.replace(/-/g, ' ')
|
|
.split(' ')
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-black bg-white dark:text-white dark:bg-black">
|
|
<ClientOnly>
|
|
<div class="flex flex-row items-center justify-center gap-6 p-6 bg-white dark:bg-zinc-800">
|
|
<template v-for="route in routes" :key="route.path">
|
|
<NuxtLink
|
|
:to="route.path"
|
|
class="underline hover:no-underline focus:no-underline"
|
|
active-class="text-orange"
|
|
>
|
|
{{ formatRouteName(route.name) }}
|
|
</NuxtLink>
|
|
</template>
|
|
<ModalsCe />
|
|
</div>
|
|
<slot />
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
/* Import theme styles */
|
|
@import '@unraid/ui/styles';
|
|
@import '~/assets/main.css';
|
|
</style>
|