mws.frontend.vue/src/layouts/MainLayout.vue

<template>
    <div
      class="flex h-dvh flex-col lg:grid"
      :class="sidebarOpen ? 'lg:grid-cols-[250px_1fr]' : 'lg:grid-cols-1'"
    >
    <div
      v-if="sidebarOpen"
      class="fixed inset-0 z-30 bg-black/40 lg:hidden"
      @click="sidebarOpen = false"
    ></div>
    <aside
      class="fixed inset-y-0 left-0 z-40 flex w-[250px] transform flex-col gap-2 bg-slate-800 p-4 text-slate-200 transition-transform duration-200 lg:static"
      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
    >
      <div class="mb-4 flex items-center justify-between text-xl font-bold text-white">
        <div class="flex items-center gap-2">
          <i class="pi pi-briefcase"></i>
          MWS
        </div>
        <button class="lg:hidden" aria-label="Close menu" @click="sidebarOpen = false">
          <i class="pi pi-times text-lg"></i>
        </button>
      </div>
      <nav class="flex flex-col gap-1">
        <router-link
          v-for="item in visibleNavItems"
          :key="item.key"
          class="nav-link"
          :to="item.to"
          @click="handleNavClick"
        >
          <i :class="item.icon"></i> {{ item.label }}
        </router-link>
        <router-link class="nav-link" to="/settings" @click="handleNavClick">
          <i class="pi pi-cog"></i> Settings
        </router-link>
      </nav>
      <div class="flex-1"></div>
      <div class="flex items-center gap-2 text-slate-300">
        <Avatar :label="initials" style="background: #3b82f6; color: #fff" size="normal" />
        <span>{{ auth.user?.displayName ?? auth.user?.username }}</span>
      </div>
    </aside>

    <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
      <div class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-2.5 dark:border-slate-800 dark:bg-slate-900 lg:px-6">
        <div class="flex items-center gap-2">
          <Button
            icon="pi pi-bars"
            rounded
            text
            :aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
            @click="sidebarOpen = !sidebarOpen"
          />
          <span class="truncate text-slate-500 dark:text-slate-400">{{ currentProject?.name ?? 'My Workspace' }}</span>
        </div>
        <div class="flex items-center gap-1">
          <Button
            :icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
            rounded
            text
            :aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
            @click="theme.toggle"
          />
          <Menu ref="menu" :model="menuItems" popup />
          <Button
            icon="pi pi-ellipsis-v"
            rounded
            text
            aria-label="Options"
            @click="toggleMenu"
          />
       </div>
      </div>
      <main class="flex-1 overflow-auto p-4 lg:p-6">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '../stores/auth'
import { useTheme } from '../composables/useTheme'
import { getProject } from '../services/backend'
import type { Project } from '../types'

const auth = useAuthStore()
const route = useRoute()
const menu = ref()
const sidebarOpen = ref(false)
const theme = useTheme()

const desktopMq = window.matchMedia('(min-width: 1024px)')
const isDesktop = ref(desktopMq.matches)
desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))

function handleNavClick() {
  if (!isDesktop.value) sidebarOpen.value = false
}

const navItems = [
  { key: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', to: '/dashboard' },
  { key: 'projects', label: 'Projects', icon: 'pi pi-folder-open', to: '/projects' },
  { key: 'accounts', label: 'Accounts', icon: 'pi pi-users', to: '/accounts' },
  { key: 'roles', label: 'Roles', icon: 'pi pi-shield', to: '/roles' },
]
const visibleNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))

const currentProject = ref<Project | null>(null)

async function loadCurrentProject(id: string | string[]) {
  try {
    currentProject.value = await getProject(String(id))
  } catch {
    currentProject.value = null
  }
}

watch(
  () => route.params.id,
  (id) => {
    if (id) void loadCurrentProject(id)
    else currentProject.value = null
  },
  { immediate: true },
)

const initials = computed(() => {
  const name = auth.user?.displayName ?? auth.user?.username ?? '?'
  return name.slice(0, 2).toUpperCase()
})

watch(
  () => route.fullPath,
  () => {
    if (!isDesktop.value) sidebarOpen.value = false
  },
)

const menuItems = computed(() => [
  {
    label: auth.user?.displayName ?? auth.user?.username,
    items: [
      {
        label: 'Logout',
        icon: 'pi pi-sign-out',
        command: () => {
          auth.logout()
          window.location.href = '/login'
        },
      },
    ],
  },
])

function toggleMenu(event: Event) {
  menu.value?.toggle(event)
}
</script>

<style scoped>
.nav-link {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #cbd5e1;
}
.nav-link:hover {
  background-color: #334155;
  color: #fff;
}
.nav-link.router-link-active {
  background-color: #3b82f6;
  color: #fff;
}
</style>