diff --git a/src/layouts/HeaderSidebar.vue b/src/layouts/HeaderSidebar.vue index 0d25757..d7d6bf0 100644 --- a/src/layouts/HeaderSidebar.vue +++ b/src/layouts/HeaderSidebar.vue @@ -25,7 +25,7 @@ v-if="(!endpoint.requireAuth || loggedIn) && (endpoint.requireRole === undefined || hasRole(endpoint.requireRole))" v-ripple :active="selected === endpoint.name" - :to="endpoint.url" + v-bind="endpointLinkProps(endpoint)" :title="endpoint.name" role="link" @click="changeSelected(endpoint.name)" @@ -82,22 +82,36 @@ import { init, loggedInUserClaims, login, logout, useCurrentUser } from 'src/ts/ import { Dark, LocalStorage } from 'quasar'; import { DocumentSpecificIdentity } from '../ts/models.ts'; +type Endpoint = { + name: string; + url: string; + icon: string; + requireAuth: boolean; + external?: boolean; + requireRole?: DocumentSpecificIdentity[]; +}; + onMounted(() => { init(); }); const leftDrawerOpen = ref(false); -const endpoints = [ +const endpoints: Endpoint[] = [ { name: '檢視法令', url: '/legislation', icon: 'gavel', requireAuth: false }, { name: '檢視公文', url: '/document', icon: 'description', requireAuth: false }, { name: '編輯法令', url: '/manage/legislation', icon: 'edit', requireAuth: true }, { name: '編輯公文', url: '/manage/document', icon: 'draw', requireAuth: true }, { name: '評委文書', url: '/document/judicial', icon: 'balance', requireAuth: false }, + { name: '線上聲請平台', url: 'https://cksc-jc.notion.site/38a4465929c78260b6d681378aba8efc', icon: 'launch', external: true, requireAuth: false }, { name: '管理帳號', url: '/manage/accounts', icon: 'badge', requireAuth: true, - requireRole: [DocumentSpecificIdentity.Chairman, DocumentSpecificIdentity.Speaker, DocumentSpecificIdentity.JudicialCommitteeChairman], + requireRole: [ + DocumentSpecificIdentity.Chairman, + DocumentSpecificIdentity.Speaker, + DocumentSpecificIdentity.JudicialCommitteeChairman, + ], }, { name: '關於與使用條款', url: '/about', icon: 'info', requireAuth: false }, ]; @@ -121,6 +135,20 @@ function changeSelected(name: string) { selected.value = name; } +function endpointLinkProps(endpoint: { url: string; external?: boolean }) { + if (endpoint.external) { + return { + href: endpoint.url, + target: '_blank', + rel: 'noopener noreferrer', + }; + } + + return { + to: endpoint.url, + }; +} + function toggleFullscreen() { if (document.fullscreenElement) { void document.exitFullscreen();