Retain title and icon on navigation drawer

Viewed 184

I'm currently using Vue and vuetify to build a navigation drawer container. I have just about what I am looking for... However, when I click on the drawer icon, I lose the Title and the drawer icon. I want those to both stay there even when the drawer is open.

Is there any way to achieve this by using simply vuetify? I can obviously add a custom title in and then add an icon in as well. Here is my code and here are some screenshots to better help with what I'm trying to achieve. I've looked through the documentation, and I've also looked at the props for the navigation drawer. Hoping someone has a good workaround. enter image description here enter image description here

code:

<template>
  <v-card height="100%" flat>
    <v-app-bar elevation="0" class="transparent">
      <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 prepend v-model="drawer" absolute temporary>
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="blue--text text--accent-4"
        >
          <v-list-item @click="setTitle(TitleList[0])" to="/home">
            <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 @click="setTitle(TitleList[1])" to="/about">
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title>About</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[2])" to="/investments">
            <v-list-item-icon>
              <v-icon>mdi-currency-usd</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Investments</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[3])" to="/contact">
            <v-list-item-icon>
              <v-icon>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-divider></v-divider>
    <router-view></router-view>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      group: null,
      Title: "Home",
      TitleList: ["Home", "About", "Investments", "Contact"],
    };
  },
  methods: {
    setTitle(value) {
      this.Title = value;
    },
  },
};
</script>
1 Answers

I think you're problem will be solved if do not passing absolute prop for v-navigation-drawer.

Related