feat(VNavigationDrawer): adding top property for navigation drawer component in vuetify 2

[MehdiKhoshnevisz]

Description

In one of my font-end projects, I use vuetify2 components. I created a menu component that is opens/expands from the left on the desktop view and opens/expands from the top on the mobile view (which is a hamburger menu).

So, to create this component I've used v-navigation-drawer that it's fine for the desktop view but, on the mobile screen, I couldn't open it from the top!

To solve this problem I've added top property as well as bottom property in vuetify2.
resolves #18606

Markup:

<template>
  <v-container>
    <v-card class="mx-auto overflow-hidden" height="400" width="344">
      <v-system-bar color="deep-purple darken-3"></v-system-bar>

      <v-app-bar color="deep-purple accent-4" dark>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      </v-app-bar>

      <!-- Just need to add top property on component -->
      <v-navigation-drawer v-model="drawer" absolute top>
        <v-list nav dense>
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item v-for="(item, index) in items" :key="index">
              <v-list-item-title>{{ item }}</v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>

      <v-card-text>
        The navigation drawer will appear from the top on smaller size
        screens.
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    drawer: false,
    group: null,
    items: ['Foo', 'Bar', 'Fizz', 'Buzz']
  }),
  watch: {
    group() {
      this.drawer = false;
    }
  }
};
</script>

[MehdiKhoshnevisz]

Hey @MajesticPotatoe
Couldn't understand why the check failed!

[MajesticPotatoe]

Hey @MajesticPotatoe Couldn't understand why the check failed!

Nothing on your end, just something with gh actions it seems

[MehdiKhoshnevisz]

could be merged? @johnleider

[johnleider]

If this is a fix it should go to v2-stable.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vuetify-2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2024 5:14am

[MehdiKhoshnevisz]

If this is a fix it should go to v2-stable.

It's done. can you review it again? @johnleider
Thanks.