Alireza Ahmadi
67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
<template>
|
|
<v-navigation-drawer
|
|
v-model="showDrawer"
|
|
:temporary="isMobile"
|
|
:expand-on-hover="!isMobile"
|
|
:rail="!isMobile"
|
|
:permanent="!isMobile"
|
|
@click="isMobile ? $emit('toggleDrawer') : null"
|
|
>
|
|
<v-list-item
|
|
height="63"
|
|
prepend-avatar="@/assets/logo.svg"
|
|
title="S-UI"
|
|
>
|
|
<template v-slot:append v-if="isMobile">
|
|
<v-icon icon="mdi-close" />
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-list density="compact" nav>
|
|
<v-list-item link
|
|
v-for="item in menu"
|
|
:key="item.title"
|
|
:to="item.path"
|
|
:active="router.currentRoute.value.path == item.path">
|
|
<template v-slot:prepend>
|
|
<v-icon :icon="item.icon"></v-icon>
|
|
</template>
|
|
<v-list-item-title v-text="$t(item.title)"></v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
<template v-slot:append>
|
|
<v-list-item prepend-icon="mdi-logout" :title="$t('menu.logout')" @click="Logout"></v-list-item>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import router from '@/router'
|
|
import { logout } from '@/plugins/httputil'
|
|
|
|
const props = defineProps(['isMobile','displayDrawer'])
|
|
|
|
const showDrawer = computed((): boolean => {
|
|
return props.displayDrawer
|
|
})
|
|
|
|
const menu = [
|
|
{ title: 'pages.home', icon: 'mdi-home', path: '/' },
|
|
{ title: 'pages.inbounds', icon: 'mdi-cloud-download', path: '/inbounds' },
|
|
{ title: 'pages.clients', icon: 'mdi-account-multiple', path: '/clients' },
|
|
{ title: 'pages.outbounds', icon: 'mdi-cloud-upload', path: '/outbounds' },
|
|
{ title: 'pages.endpoints', icon: 'mdi-cloud-tags', path: '/endpoints' },
|
|
{ title: 'pages.rules', icon: 'mdi-routes', path: '/rules' },
|
|
{ title: 'pages.tls', icon: 'mdi-certificate', path: '/tls' },
|
|
{ title: 'pages.basics', icon: 'mdi-application-cog', path: '/basics' },
|
|
{ title: 'pages.admins', icon: 'mdi-account-tie', path: '/admins' },
|
|
{ title: 'pages.settings', icon: 'mdi-cog', path: '/settings' },
|
|
]
|
|
|
|
const Logout = async () => {
|
|
logout()
|
|
}
|
|
</script> |