vuestic-ui icon indicating copy to clipboard operation
vuestic-ui copied to clipboard

<VaLayout> prop: fixed = true, => inaccessible menu button

Open bagrovYKT opened this issue 1 year ago • 2 comments

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>

bagrovYKT avatar Feb 19 '24 01:02 bagrovYKT

Hey, @bagrovYKT. Try to add order: 1 to :top="{ fixed: true, order: 1 }". This will make Navbar have bigger zIndex.

Example

We'll need to update examples if this solution is helpful.

m0ksem avatar Feb 26 '24 17:02 m0ksem

Hey, @bagrovYKT. Try to add order: 1 to :top="{ fixed: true, order: 1 }". This will make Navbar have bigger zIndex.

Example

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 }

bagrovYKT avatar Feb 27 '24 01:02 bagrovYKT