Files
tootaio.com/app/layouts/default.vue
xiaomai 31a4103f9b feat(ui): implement dynamic dropdown navigation and refactor project cards
Replaced the static navigation with a dynamic, internationalized dropdown menu powered by a new `useNavLinks` composable. The
navigation items are now sourced from i18n files. The featured project cards on the homepage have been refactored to use the
`<UPageCard>` component, and the content schema is updated with `spotlight` and `highlight` options for enhanced display.
2025-11-06 07:44:41 +08:00

59 lines
1.5 KiB
Vue

<template>
<UPage>
<UHeader
:ui="{
left: 'flex items-center gap-1.5',
center: 'hidden lg:flex lg:flex-16',
right: 'flex items-center justify-end gap-1.5',
}"
>
<template #title> Tootaio Studio </template>
<template #default>
<UNavigationMenu
:items="navLinks"
variant="link"
class="w-full justify-center"
/>
</template>
<template #body>
<UNavigationMenu :items="navLinks" orientation="vertical" />
</template>
<template #right>
<UColorModeButton />
<UButton
icon="twemoji:flag-china"
:variant="$i18n.locale == 'zh-CN' ? 'outline' : 'ghost'"
class="cursor-pointer"
color="neutral"
:disabled="$i18n.locale == 'zh-CN'"
@click="setLocale('zh-CN')"
/>
<UButton
icon="twemoji:flag-united-states"
:variant="$i18n.locale == 'en' ? 'outline' : 'ghost'"
class="cursor-pointer"
color="neutral"
:disabled="$i18n.locale == 'en'"
@click="setLocale('en')"
/>
</template>
</UHeader>
<UMain>
<slot />
</UMain>
<UFooter>
<template #left>
&copy; {{ new Date().getFullYear() }} Tootaio Studio. All rights
reserved.
</template>
</UFooter>
</UPage>
</template>
<script lang="ts" setup>
const { setLocale } = useI18n();
const navLinks = useNavLinks();
</script>
<style></style>