How to change selectedItem icon and text color v-model Vuetify?

Question

I am trying to have this design but I am new for Vuetify, does anyone has to idea for this implementatiton? I have checked Vuetify documentation but it is already implemented what I understand.

In this code I have a sidebar and inside this sidebarI have list for icon and text.

  <v-list>
      <v-list-item-group v-model="selectedItem" color="colorsYellowDark">
        <v-list-item v-for="(item, i) in items" :key="i">
          <v-list-item-icon>
            <ph-house  v-if="item.text =='Dashboard'"></ph-house>
            <ph-users-three  v-if="item.text =='Employees'"></ph-users-three>
            <ph-archive-tray v-if="item.text =='Extraction requests'"></ph-archive-tray>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

here script

<script>
import { PhHouse, PhUsersThree, PhArchiveTray } from "phosphor-vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Sidebar",
  components: {
    PhHouse,
    PhUsersThree,
    PhArchiveTray,
  },
  provide: {
      size: 32,
      weight: "bold",
      mirrored: false
    },
  data() {
    return {
      drawer: true,
      selectedItem: 1,

      items: [
        { text: "Dashboard" },
        { text: "Employees" },
        { text: "Extraction requests"},

      ],
      mini: true,
    };
  },
};
</script>

my implementation is:

what do I need to have?

Answer 1

You can add a custom active-class class to v-list and modify it according to your need, also you can use dark and flat property

 new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ selected: [2], items: [ { text: 'Dashboard', icon: 'mdi-home' }, { text: 'Employees', icon: 'mdi-account-multiple' }, { text: 'Extraction requests', icon: 'mdi-star' }, ], }), })

 .active-item { color: #fbc80f;important: font-weight; bold: border-left; 3px solid: border-left-color; #fbc80f; }

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div id="app"> <v-app id="inspire"> <v-card class="mx-auto" max-width="500" > <v-list color='#313c49' dark flat> <v-list-item-group v-model="selected" active-class="active-item" > <template v-for="(item, index) in items"> <v-list-item:key="item.text"> <v-list-item-icon> <v-icon v-text="item.icon"></v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> <v-divider v-if="index < items.length - 1":key="index" ></v-divider> </template> </v-list-item-group> </v-list> </v-card> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>