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

<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(--panel); 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">
          <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
          class="text-slate-400 transition-colors hover:text-slate-900 dark:hover:text-white 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>
        </div>

        <router-link
          v-for="item in topNavItems"
          :key="item.key"
          class="nav-link"
          :to="item.to"
          @click="handleNavClick"
        >
          <i :class="item.icon"></i> {{ item.label }}
        </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"
          />
          <Select
            v-if="currentProject"
            :model-value="currentProject.id"
            :options="projects"
            option-label="name"
            option-value="id"
            placeholder="Select project"
            class="w-[200px]"
            @change="onProjectChange"
          />
        </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"
          />
          <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>
        </div>
        <Menu ref="menu" :model="menuItems" popup />
      </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>

    <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 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))

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[]>([])

async function loadProjects() {
  try {
    const res = await getProjects(1, 100)
    projects.value = res.items
  } catch {
    projects.value = []
  }
}

async function loadCurrentProject(id: string | string[]) {
  try {
    currentProject.value = await getProject(String(id))
  } catch {
    // keep existing project, don't clear on error
  }
}

async function loadLastProject() {
  if (currentProject.value) return
  const last = localStorage.getItem('mws_last_project')
  if (last) {
    try {
      currentProject.value = await getProject(last)
    } catch { /* ignore */ }
  }
}

function onProjectChange(e: { value: string }) {
  const projectId = e.value
  if (projectId) {
    localStorage.setItem('mws_last_project', projectId)
    router.push({ name: 'tasks-board', params: { id: projectId } })
  }
}

watch(
  () => route.params.id,
  (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()
})
</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>