v-list -group is not aligned as v-list-item within list

Question

I have a navigation drawer with list which part of the items have sub lists. I cant figure out why my v-list-group is not properly aligned as the list-items. I tried playing with the class="v-list-item" to fix it but it did not worked The Home and Statistics items are v-list-item, The Reports is v-list-group with v-list-items within

Relevant Template:

    <v-navigation-drawer
      v-model="sidebarMenu"
      app
      floating
      :permanent="sidebarMenu"
      :mini-variant.sync="mini"
      color="grey darken-4"
    >
      <v-list dense>
        <v-list-item>
          <v-list-item-action>
            <v-icon @click.stop="sidebarMenu = !sidebarMenu">mdi-chevron-left</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list>
        <div v-for="(link, i) in links" :key="link.title">
          <v-list-item v-if="!link.subLinks" :key="i" :to="link.href" class="v-list-item">
            <v-list-item-icon>
              <v-icon color="primary">{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title class="primary--text">
                {{
                link.title
                }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-list-group v-else :key="link.title" no-action>
            <template v-slot:activator>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon color="primary">{{ link.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title class="primary--text">
                    {{
                    link.title
                    }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>

            <v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
              <v-list-item-content>
                <v-list-item-title class="primary--text">
                  {{
                  sublink.title
                  }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </div>
      </v-list>
    </v-navigation-drawer>

Script:

data: () => ({
    links: [
      {
        title: "Home",
        href: "/",
        icon: "mdi-home-outline"
      },
      {
        icon: "mdi-file-chart",
        title: "Reports",
        subLinks: [
          {
            title: "Sales",
            href: "/sales"
          },
          {
            title: "Orders",
            href: "/orders"
          },
          {
            title: "Inventory",
            href: "/inventory"
          }
        ]
      },
      {
        title: "Statistics",
        href: "/statistics",
        icon: "mdi-chart-bar"
      }
    ],

EDIT:

I changed the v-list to v-tree-view as @IVO GELOV suggested, It does looks better.

My little problem now is that i have to click on the text itself for routing. How can i make the all router-link row clickable?

<v-treeview :items="items" open-on-click item-key="name" activatable class="primary--text">
        <template slot="label" slot-scope="props">
          <v-icon color="primary" v-text="props.item.icon" class="pr-2"></v-icon>
          <router-link
            style="text-decoration: none"
            :to="props.item.href"
            v-if="props.item.href"
          >{{ props.item.name }}</router-link>
          <span v-else>{{ props.item.name }}</span>
        </template>
      </v-treeview>

<script>
export default {
  data: () => ({
    items: [
      {
        id: 0,
        name: "Home",
        icon: "mdi-home-outline",
        href: "/"
      },
      {
        id: 1,
        name: "Reports",
        icon: "mdi-file-chart",
        children: [
          {
            id: 2,
            name: "Sales",
            href: "/sales"
          },
          {
            id: 3,
            name: "Orders",
            href: "/orders"
          },
          {
            id: 4,
            name: "Inventory",
            href: "/inventory"
          }
        ]
      }
    ]
  })
};
</script>

Answer 1

Maybe you can do a quick hack like making an empty "v-list-item-icon" tag, so that it take some space in front of your title?

<v-list-item v-for="sublink in link.subLinks" :to="sublink.href" :key="sublink.title">
    <v-list-item-icon></v-list-item-icon>  //Empty Icon

    <v-list-item-content>
        <v-list-item-title class="primary--text">
           {{ sublink.title }}
        </v-list-item-title>
    </v-list-item-content>
</v-list-item>

Answer 2

I try to add a list-item instead the router-link and it works, its something like this.

   <v-treeview :items="items" open-on-click item-key="name" activatable>
    <template slot="label" slot-scope="props">
       <v-list-item link :href="props.item.href" v-text="props.item.name">
       </v-list-item>
    </template>
  </v-treeview>