🐛 Use abs position for nav

This commit is contained in:
2025-12-20 16:57:54 +08:00
parent 21952738fa
commit 884a758396

View File

@@ -3,25 +3,33 @@
<header <header
class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]" class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]"
> >
<div class="container mx-auto flex items-center justify-between px-5"> <div
class="container mx-auto flex items-center justify-between px-5 relative"
>
<nuxt-link-locale to="/"> <nuxt-link-locale to="/">
<nuxt-img src="/favicon.png" alt="Solsynth" class="w-8 h-8" /> <nuxt-img src="/favicon.png" alt="Solsynth" class="w-8 h-8" />
</nuxt-link-locale> </nuxt-link-locale>
<n-menu <div
class="absolute left-0 right-0 flex w-full justify-center"
v-if="breakpoints.isGreaterOrEqual('md')" v-if="breakpoints.isGreaterOrEqual('md')"
v-model:value="activeKey" >
mode="horizontal" <n-menu
:options="menuOptions" v-model:value="activeKey"
style="width: auto" mode="horizontal"
/> :options="menuOptions"
style="width: auto"
/>
</div>
<n-popover v-else trigger="hover"> <n-popover v-else trigger="hover">
<template #trigger> <template #trigger>
<n-button text> <div class="absolute left-0 right-0 flex w-full justify-center">
<template #icon> <n-button text>
<n-icon :component="MenuOutlined" /> <template #icon>
</template> <n-icon :component="MenuOutlined" />
</n-button> </template>
</n-button>
</div>
</template> </template>
<n-menu <n-menu
v-model:value="activeKey" v-model:value="activeKey"