feat: add Admin layout
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex h-dvh flex-col lg:grid"
|
||||
:class="sidebarOpen ? 'lg:grid-cols-[236px_1fr]' : 'lg:grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
v-if="sidebarOpen"
|
||||
class="fixed inset-0 z-30 bg-slate-950/60 backdrop-blur-sm lg:hidden"
|
||||
@click="sidebarOpen = false"
|
||||
></div>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-40 flex w-[236px] transform flex-col border-r px-3 py-4 transition-transform duration-200 lg:static"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
|
||||
style="background: var(--board); border-color: var(--hairline)"
|
||||
>
|
||||
<div class="mb-5 flex items-center justify-between px-2">
|
||||
<router-link to="/projects" class="flex items-center gap-2.5">
|
||||
<span
|
||||
class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold text-white"
|
||||
style="background: var(--primary)"
|
||||
>M</span
|
||||
>
|
||||
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em]" style="color: var(--ink)">
|
||||
Workspace
|
||||
</span>
|
||||
</router-link>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
text
|
||||
rounded
|
||||
severity="secondary"
|
||||
class="lg:hidden"
|
||||
aria-label="Close menu"
|
||||
@click="sidebarOpen = false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav class="flex flex-col gap-0.5">
|
||||
<router-link class="nav-link" to="/projects" @click="handleNavClick">
|
||||
<i class="pi pi-folder-open"></i> Projects
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="auth.canView('users')" class="nav-link" to="/users" @click="handleNavClick">
|
||||
<i class="pi pi-users"></i> Users
|
||||
</router-link>
|
||||
|
||||
<div v-if="auth.canView('masterdata') || auth.canView('permissions')">
|
||||
<button
|
||||
class="nav-link w-full"
|
||||
:class="{ 'router-link-active': isSettingsActive }"
|
||||
@click="settingsExpanded = !settingsExpanded"
|
||||
>
|
||||
<i class="pi pi-cog"></i> Settings
|
||||
<i class="pi ml-auto text-xs" :class="settingsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
|
||||
</button>
|
||||
<div v-show="settingsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
|
||||
<router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub submenu-link" to="/settings/masterdata" @click="handleNavClick">
|
||||
Master Data
|
||||
</router-link>
|
||||
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/roles" @click="handleNavClick">
|
||||
Roles
|
||||
</router-link>
|
||||
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/permissions" @click="handleNavClick">
|
||||
Permissions
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
</aside>
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<header
|
||||
class="flex items-center justify-between gap-3 border-b px-4 py-2.5 lg:px-6"
|
||||
style="background: var(--panel); border-color: var(--hairline)"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<Button
|
||||
icon="pi pi-bars"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
:aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
|
||||
@click="sidebarOpen = !sidebarOpen"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<Button
|
||||
:icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
:aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
@click="theme.toggle"
|
||||
/>
|
||||
<UserMenu />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 overflow-auto">
|
||||
<div class="mx-auto h-full w-full max-w-[1280px] p-4 sm:p-6 lg:px-8 lg:py-7">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useTheme } from '../composables/useTheme'
|
||||
import UserMenu from '../components/UserMenu.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const route = useRoute()
|
||||
const theme = useTheme()
|
||||
|
||||
const desktopMq = window.matchMedia('(min-width: 1024px)')
|
||||
const isDesktop = ref(desktopMq.matches)
|
||||
const sidebarOpen = ref(isDesktop.value)
|
||||
const settingsExpanded = ref(false)
|
||||
const isSettingsActive = computed(() => route.path.startsWith('/settings/'))
|
||||
const onDesktopChange = (e: MediaQueryListEvent) => {
|
||||
isDesktop.value = e.matches
|
||||
}
|
||||
desktopMq.addEventListener('change', onDesktopChange)
|
||||
onBeforeUnmount(() => desktopMq.removeEventListener('change', onDesktopChange))
|
||||
|
||||
function handleNavClick() {
|
||||
if (!isDesktop.value) sidebarOpen.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
(path) => {
|
||||
if (path.startsWith('/settings')) settingsExpanded.value = true
|
||||
if (!isDesktop.value) sidebarOpen.value = false
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem 0.875rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--ink-muted);
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.nav-link i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-link.router-link-active {
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-link-sub {
|
||||
position: relative;
|
||||
padding: 0.375rem 0.875rem;
|
||||
font-size: 0.8125rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.nav-link-sub.router-link-active {
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-link-sub.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
.app-dark .nav-link.router-link-active {
|
||||
color: #9ba6f8;
|
||||
}
|
||||
.nav-link.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
.submenu-link.router-link-active {
|
||||
background: transparent !important;
|
||||
color: #6a7cd0 !important;
|
||||
}
|
||||
.submenu-link.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 2px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
</style>
|
||||
+40
-230
@@ -12,10 +12,10 @@
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-40 flex w-[236px] transform flex-col border-r px-3 py-4 transition-transform duration-200 lg:static"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
|
||||
style="background: var(--panel); border-color: var(--hairline)"
|
||||
style="background: var(--board); border-color: var(--hairline)"
|
||||
>
|
||||
<div class="mb-5 flex items-center justify-between px-2">
|
||||
<router-link to="/dashboard" class="flex items-center gap-2.5">
|
||||
<router-link :to="auth.isAdmin ? '/projects' : '/select-project'" class="flex items-center gap-2.5">
|
||||
<span
|
||||
class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold text-white"
|
||||
style="background: var(--primary)"
|
||||
@@ -25,88 +25,44 @@
|
||||
Workspace
|
||||
</span>
|
||||
</router-link>
|
||||
<button
|
||||
class="text-slate-400 transition-colors hover:text-slate-900 dark:hover:text-white lg:hidden"
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
text
|
||||
rounded
|
||||
severity="secondary"
|
||||
class="lg:hidden"
|
||||
aria-label="Close menu"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<i class="pi pi-times text-base"></i>
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav class="flex flex-col gap-0.5">
|
||||
<router-link class="nav-link" to="/select-project" @click="handleNavClick">
|
||||
<i class="pi pi-arrow-left"></i> Back to Projects
|
||||
</router-link>
|
||||
|
||||
<!-- Projects expandable -->
|
||||
<div v-if="currentProject">
|
||||
<button
|
||||
class="nav-link w-full"
|
||||
:class="{ 'router-link-active': isProjectsActive }"
|
||||
@click="projectsExpanded = !projectsExpanded"
|
||||
>
|
||||
<i class="pi pi-folder-open"></i> Projects
|
||||
<i class="pi ml-auto text-xs" :class="projectsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
|
||||
</button>
|
||||
<div v-show="projectsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
|
||||
<router-link
|
||||
v-if="auth.canView('tasks')"
|
||||
class="nav-link nav-link-sub submenu-link"
|
||||
:to="{ name: 'tasks-board', params: { id: currentProject.id } }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i class="pi pi-check-square"></i> Tasks
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="auth.canView('documents')"
|
||||
class="nav-link nav-link-sub submenu-link"
|
||||
:to="{ name: 'documents', params: { id: currentProject.id } }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i class="pi pi-file"></i> Documents
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link nav-link-sub submenu-link"
|
||||
:to="{ name: 'members', params: { id: currentProject.id } }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i class="pi pi-users"></i> Members
|
||||
</router-link>
|
||||
</div>
|
||||
<nav v-if="currentProject" class="flex flex-col gap-0.5">
|
||||
<div class="truncate px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide" style="color: var(--ink-muted)">
|
||||
{{ currentProject.name }}
|
||||
</div>
|
||||
|
||||
<router-link
|
||||
v-for="item in topNavItems"
|
||||
:key="item.key"
|
||||
v-if="auth.canView('tasks')"
|
||||
class="nav-link"
|
||||
:to="item.to"
|
||||
:to="{ name: 'tasks-board', params: { id: currentProject.id } }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i :class="item.icon"></i> {{ item.label }}
|
||||
<i class="pi pi-check-square"></i> Tasks
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="auth.canView('documents')"
|
||||
class="nav-link"
|
||||
:to="{ name: 'documents', params: { id: currentProject.id } }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i class="pi pi-file"></i> Documents
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{ name: 'members', params: { id: currentProject.id } }"
|
||||
@click="handleNavClick"
|
||||
>
|
||||
<i class="pi pi-users"></i> Members
|
||||
</router-link>
|
||||
|
||||
<div v-if="auth.canView('masterdata') || auth.canView('permissions')">
|
||||
<button
|
||||
class="nav-link w-full"
|
||||
:class="{ 'router-link-active': isSettingsActive }"
|
||||
@click="settingsExpanded = !settingsExpanded"
|
||||
>
|
||||
<i class="pi pi-cog"></i> Settings
|
||||
<i class="pi ml-auto text-xs" :class="settingsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
|
||||
</button>
|
||||
<div v-show="settingsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
|
||||
<router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub submenu-link" to="/settings/masterdata" @click="handleNavClick">
|
||||
Master Data
|
||||
</router-link>
|
||||
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/roles" @click="handleNavClick">
|
||||
Roles
|
||||
</router-link>
|
||||
<router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/permissions" @click="handleNavClick">
|
||||
Permissions
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
@@ -146,24 +102,8 @@
|
||||
:aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
@click="theme.toggle"
|
||||
/>
|
||||
<button
|
||||
class="flex w-auto items-center gap-2.5 rounded-xl border px-2.5 py-1.5 text-left transition-colors hover:bg-slate-50 dark:hover:bg-white/5"
|
||||
style="border-color: var(--hairline)"
|
||||
aria-haspopup="true"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<Avatar :label="initials" :style="{ background: 'var(--primary)', color: '#fff' }" size="normal" />
|
||||
<span class="hidden min-w-0 sm:block">
|
||||
<span class="block truncate text-[13px] font-semibold" style="color: var(--ink)">
|
||||
{{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</span>
|
||||
<span class="block truncate text-[11px]" style="color: var(--ink-muted)">
|
||||
@{{ auth.user?.username }}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<UserMenu />
|
||||
</div>
|
||||
<Menu ref="menu" :model="menuItems" popup />
|
||||
</header>
|
||||
|
||||
<main class="flex-1 overflow-auto">
|
||||
@@ -172,73 +112,34 @@
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="profileDialog" header="Profile" :modal="true" style="width: min(480px, 92vw)">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<Avatar :label="initials" size="xlarge" :style="{ background: 'var(--primary)', color: '#fff' }" />
|
||||
<div>
|
||||
<div class="text-[15px] font-semibold" style="color: var(--ink)">
|
||||
{{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</div>
|
||||
<div class="text-[13px]" style="color: var(--ink-muted)">@{{ auth.user?.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<form @submit.prevent="onSaveProfile">
|
||||
<div class="field">
|
||||
<label for="prof-username">Username</label>
|
||||
<InputText id="prof-username" :model-value="auth.user?.username" disabled class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="prof-displayname">Display name</label>
|
||||
<InputText id="prof-displayname" v-model.trim="profileDisplayName" class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="prof-role">Role</label>
|
||||
<InputText id="prof-role" :model-value="auth.user?.roleName" disabled class="w-full" />
|
||||
</div>
|
||||
</form>
|
||||
<template #footer>
|
||||
<Button label="Cancel" severity="secondary" text @click="profileDialog = false" />
|
||||
<Button label="Save" :loading="profileSaving" @click="onSaveProfile" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useTheme } from '../composables/useTheme'
|
||||
import { getProject, getProjects, updateUser } from '../services/backend'
|
||||
import { errorMessage } from '../services/api'
|
||||
import { getProject, getProjects } from '../services/backend'
|
||||
import UserMenu from '../components/UserMenu.vue'
|
||||
import type { Project } from '../types'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const toast = useToast()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const menu = ref()
|
||||
const theme = useTheme()
|
||||
|
||||
const desktopMq = window.matchMedia('(min-width: 1024px)')
|
||||
const isDesktop = ref(desktopMq.matches)
|
||||
const sidebarOpen = ref(isDesktop.value)
|
||||
const settingsExpanded = ref(false)
|
||||
const isProjectsActive = computed(() => route.path.startsWith('/projects/'))
|
||||
const isSettingsActive = computed(() => route.path.startsWith('/settings/'))
|
||||
desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
|
||||
const onDesktopChange = (e: MediaQueryListEvent) => {
|
||||
isDesktop.value = e.matches
|
||||
}
|
||||
desktopMq.addEventListener('change', onDesktopChange)
|
||||
onBeforeUnmount(() => desktopMq.removeEventListener('change', onDesktopChange))
|
||||
|
||||
function handleNavClick() {
|
||||
if (!isDesktop.value) sidebarOpen.value = false
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ key: 'users', label: 'Users', icon: 'pi pi-users', to: '/users' },
|
||||
]
|
||||
const topNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
|
||||
|
||||
const projectsExpanded = ref(false)
|
||||
|
||||
const currentProject = ref<Project | null>(null)
|
||||
const projects = ref<Project[]>([])
|
||||
|
||||
@@ -254,6 +155,7 @@ async function loadProjects() {
|
||||
async function loadCurrentProject(id: string | string[]) {
|
||||
try {
|
||||
currentProject.value = await getProject(String(id))
|
||||
localStorage.setItem('mws_last_project', String(id))
|
||||
} catch {
|
||||
// keep existing project, don't clear on error
|
||||
}
|
||||
@@ -282,75 +184,18 @@ watch(
|
||||
(id) => {
|
||||
if (id) {
|
||||
void loadCurrentProject(id)
|
||||
projectsExpanded.value = true
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const profileDialog = ref(false)
|
||||
const profileDisplayName = ref('')
|
||||
const profileSaving = ref(false)
|
||||
|
||||
async function onSaveProfile() {
|
||||
if (!auth.user?.id) return
|
||||
if (!profileDisplayName.value) {
|
||||
toast.add({ severity: 'warn', summary: 'Display name required', life: 3000 })
|
||||
return
|
||||
}
|
||||
profileSaving.value = true
|
||||
try {
|
||||
const updated = await updateUser(auth.user.id, {
|
||||
displayName: profileDisplayName.value,
|
||||
isActive: true,
|
||||
})
|
||||
if (auth.user) {
|
||||
auth.user.displayName = updated.displayName
|
||||
localStorage.setItem('mws_user', JSON.stringify(auth.user))
|
||||
}
|
||||
profileDialog.value = false
|
||||
toast.add({ severity: 'success', summary: 'Profile updated', life: 3000 })
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
profileSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const initials = computed(() => {
|
||||
const name = auth.user?.displayName ?? auth.user?.username ?? '?'
|
||||
return name.slice(0, 2).toUpperCase()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
(path) => {
|
||||
if (path.startsWith('/settings')) settingsExpanded.value = true
|
||||
() => {
|
||||
if (!isDesktop.value) sidebarOpen.value = false
|
||||
},
|
||||
)
|
||||
|
||||
const menuItems = computed(() => [
|
||||
{
|
||||
label: auth.user?.displayName ?? auth.user?.username,
|
||||
items: [
|
||||
{ label: 'Profile', icon: 'pi pi-user', command: () => { profileDisplayName.value = auth.user?.displayName ?? ''; profileDialog.value = true } },
|
||||
{
|
||||
label: 'Logout',
|
||||
icon: 'pi pi-sign-out',
|
||||
command: () => {
|
||||
auth.logout()
|
||||
window.location.href = '/login'
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
function toggleMenu(event: Event) {
|
||||
menu.value?.toggle(event)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadProjects()
|
||||
void loadLastProject()
|
||||
@@ -383,27 +228,6 @@ onMounted(() => {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-link-sub {
|
||||
position: relative;
|
||||
padding: 0.375rem 0.875rem;
|
||||
font-size: 0.8125rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.nav-link-sub.router-link-active {
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-link-sub.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
.app-dark .nav-link.router-link-active {
|
||||
color: #9ba6f8;
|
||||
}
|
||||
@@ -417,18 +241,4 @@ onMounted(() => {
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
.submenu-link.router-link-active {
|
||||
background: transparent !important;
|
||||
color: #6a7cd0 !important;
|
||||
}
|
||||
.submenu-link.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 2px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<div class="min-h-0 flex-1">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user