sticky navigation drawer under app bar?

[rramsey]

Hi,

My app has this layout:

<v-app>
  <v-layout>
    <TopToolbar />
    <NavigationMenu />
    <v-main>
      <component :is="currentComponent">
      </component>
    </v-main>
  </v-layout>
</v-app>

Where TopTooblar is a component that implements a <v-app-bar></v-app-bar> and NavigationMenu implements <v-navigation-drawer><v-list></v-list></v-navigation-drawer>. So far so good. Since some of the components can be long, I'd like to make the navigation drawer stick as the user scrolls down the page. I'd also like the app bar to be sticky on mobile, but I'm not as concerned about that because the main usage will be on the desktop.

I've tried making the v-list and the navigation-drawer sticky, but that doesn't work. The navigation drawer API says there's a sticky attribute with no documentation, but that doesn't make the navigation-draw sticky, it just shortens it. The documentation for v-layout is pretty sparse.

I can think of a couple of different workarounds, but they seem overkill or brittle when there's a perfectly good css attribute that could work.

Any examples of this?

[rramsey]

Apparently part of the solution is to just forget about <v-layout></v-layout>. I'll still need to work w/the css a bit because the app-bar's bottom border is behind the nav drawer and look at how to handle scrolling, but flex or grid seems more flexible at this point.

[KaelWD]

VApp already implements VLayout, you don't need both.
The right sidebar on vuetifyjs.com is a sticky drawer: https://github.com/vuetifyjs/vuetify/blob/72e3224ca1799f6ca9a00b346aeb2330331e8de8/packages/docs/src/components/app/Toc.vue

[rramsey]

Hmm. The right sidebar doesn't really have the opportunity to be sticky for me. Since the header takes up the full width of the screen, when I scroll down the page the right side bar doesn't have the opportunity to be sticky. I think the vuetify definition of sticky may be different than the css definition.

See if this codepen works to show what I mean. https://codepen.io/rramsey/pen/poBMmXa Notice that as you scroll down, the header scrolls off the top of the page, the left side menu scrolls up until it is at 0 and then sticks there. That's my goal and I don't see the right sidebar on https://vuetifyjs.com/en/components/navigation-drawers/ behaving like that.