Vuetify — App Bar and Drawer. Adding side menu and change toolbar on…
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

Photo by Maksym Kaharlytskyi on Unsplash

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.

Photo by chuttersnap on Unsplash

Conclusion

We can add a navigation drawer to our app bar.

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

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!