Vuetify text displaying on the right side of the v-navigation-drawer - vue.js

Question

I am a new programmer and trying to make a non-toggling side bar, like admin page.
The router-view doesnt display on the right side of the page.
I know that I don't have a href link for each of the navigation list, where and how can I do that?
also, is the Apps causing conflict with the sellingSummary page?
and am I inserting the router-view in the wrong place?
I need help, thank you !!!!
image
<template>
<div>
<v-app id="inspire">
<v-navigation-drawer
stateless
value="true"
>
<v-list>
<v-list-group
no-action
prepend-icon="account_circle"
value="true"
>
<v-list-tile slot="activator">
<v-list-tile-title>admins</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-for="(admin, i) in admins"
:key="i"
#click=""
>
<v-list-tile-title v-text="admin[0]"></v-list-tile-title>
<v-list-tile-action>
<v-icon v-text="admin[1]"></v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-navigation-drawer>
<div>
<router-view></router-view>
</div>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
admins: [
['Management', 'people_outline'],
['Settings', 'settings']
]
}
}
}
</script>
./router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import AppS from '#/components/SellingPage/AppS'
import sellingSummary from '#/components/SellingPage/subPage/sellingSummary'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/SellingPage',
name: 'AppS',
component: AppS
},
{
path: '/SellingPage',
name: 'sellingSummary',
component: sellingSummary
}
]
})
./components/SellingPage/subPage/sellingSummary
<template>
<div>
<p>Hi, first</p>
</div>
</template>
./components/SellingPage/AppS
<template>
<div>
<app-header></app-header>
<v-card>
<app-selling>
</app-selling>
</v-card>
</div>
</template>
<script>
import Header from '../Header.vue';
import Selling from './Selling.vue';
export default {
components: {
'app-header': Header,
'app-selling': Selling
}
}
</script>

Answer 1

<v-navigation-drawer
disable-route-watcher
enable-resize-watcher
:clipped="clipped"
v-model="sideNav"
dark
app
>
try this

Answer 2

For starters, you can't have two routes in your router configured for different components. The Router will only use the first entry.
In your component Vue file add the following property in the data property
drawer: true,
Example:
export default {
data: () => ({
drawer: true
})
}
The Navigation drawer has an item data property which can be used to loop through existing menu items.
In some of the properties, you can add a path attribute directing to an existing path on the router when that menu item is pressed.
Here is an example:
https://codepen.io/wernerm/pen/rzqqbR