Vuetify — App Bar and Drawer

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Toggle Navigation Drawers

We can toggle the navigation drawer by using the v-app-bar-nav-icon component.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="mx-auto overflow-hidden" height="400">
          <v-app-bar color="deep-purple" dark>
            <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>

             <v-toolbar-title>Title</v-toolbar-title>
          </v-app-bar>

          <v-navigation-drawer v-model="drawer" absolute temporary>
            <v-list nav dense>
              <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-home</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>Home</v-list-item-title>
                </v-list-item>

<v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-account</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>Account</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-navigation-drawer>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    drawer: false
  }),
};
</script>

We have the v-navigation-drawer to display a menu on the left side.

When it’s displayed depends on the drawer state.

If it’s true , then it’ll be displayed.

When we click on the v-app-ba-nav-icon , then we make it true .

Scroll Threshold

We can set a scroll threshold on the v-app-bar .

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="overflow-hidden">
          <v-app-bar
            absolute
            color="#43a047"
            dark
            shrink-on-scroll
            prominent
            src="https://picsum.photos/1920/1080?random"
            fade-img-on-scroll
            scroll-target="#scrolling"
            scroll-threshold="500"
          >
            <template v-slot:img="{ props }">
              <v-img v-bind="props" gradient="to top right, rgba(55,236,186,.7), lightblue"></v-img>
            </template>

            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Title</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-app-bar>
          <v-sheet id="scrolling" class="overflow-y-auto" max-height="600">
            <v-container style="height: 1500px;"></v-container>
          </v-sheet>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    drawer: false,
  }),
};
</script>

We added the scroll-threshold prop to make the toolbar change from a taller toolbar with a background image to one with that has a solid background without an image.

The fade-img-on-scroll prop lets us make the image on the app bar disappear when we scroll.

Also, we’ve to set the scroll-target to the selector of the div we’re watching for scrolling.

Conclusion

We can add a navigation drawer to our app bar.

Also, we can make the app bar display differently when we scroll.