vuestic-ui
vuestic-ui copied to clipboard
<VaLayout> prop: fixed = true, => inaccessible menu button
Vuestic-ui version: 1.9.2
Description
I've tried to use a "fixed" prop of a VaLayout tag, but in this case, when a prop "fixed" is true, menu button is inaccessible when sidebar is active and scroll position > height of navbar. I thought that i made a simple mistake, but when i checked your own example of implementation for prop "fixed", i found the same behavior of menu button. I tried a many combinations of this prop on different tags, but its seem to be bug with this prop.
Check this code, its from docs page on https://ui.vuestic.dev/ui-elements/layout
<VaLayout
:left="{ fixed: true }"
:top="{ fixed: true }"
>
<template #top>
<VaNavbar
class="py-2"
shadowed
>
<template #left>
<VaButton
:icon="showSidebar ? 'menu_open' : 'menu'"
@click="showSidebar = !showSidebar"
/>
</template>
</VaNavbar>
</template>
<template #left>
<VaSidebar v-model="showSidebar">
<VaSidebarItem v-for="{ icon, title } in menu" :key="icon">
<VaSidebarItemContent>
<VaIcon :name="icon" />
<VaSidebarItemTitle>
{{ title }}
</VaSidebarItemTitle>
</VaSidebarItemContent>
</VaSidebarItem>
</VaSidebar>
</template>
<template #content>
<main class="p-4" style="height: 2000px">
Some text here
</main>
</template>
</VaLayout>
Hey, @bagrovYKT. Try to add order: 1
to :top="{ fixed: true, order: 1 }"
. This will make Navbar have bigger zIndex.
We'll need to update examples if this solution is helpful.
Hey, @bagrovYKT. Try to add
order: 1
to:top="{ fixed: true, order: 1 }"
. This will make Navbar have bigger zIndex.We'll need to update examples if this solution is helpful.
Thanks m0ksem! In future versions, I think, prop { order: 1 } must be set by default when { fixed: true }