🐛 Use abs position for nav
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user