banu-front/src/layouts/AdminLayout.vue

<template>
  <div class="admin-layout">
    <aside v-if="!isMobile" class="admin-layout__sidebar">
      <AdminSidebar :menu-items="menuItems" />
    </aside>

    <div class="admin-layout__content">
      <div class="admin-layout__inner">
        <HeaderBlock
          :page-title="pageTitle"
          :page-subtitle="pageSubtitle"
          class="admin-layout__header"
        />
        <div class="admin-layout__page">
          <RouterView />
        </div>
        <div class="admin-layout__footer">
          <Copyright />
        </div>
      </div>
    </div>

    <Transition name="fade">
      <div
        v-if="isMobile && ui.isSidebarOpen"
        class="admin-layout__backdrop"
        @click="ui.setSidebarState(false)"
      />
    </Transition>
    <Transition name="slide-drawer">
      <aside
        v-if="isMobile && ui.isSidebarOpen"
        class="admin-layout__sidebar admin-layout__sidebar--mobile"
      >
        <AdminSidebar :menu-items="menuItems" />
      </aside>
    </Transition>
  </div>
</template>

<script setup>
import { useUIStore } from '@/store/ui'
import { RouterView, useRoute } from 'vue-router'
import Copyright from '@/components/Copyright.vue'
import HeaderBlock from '@/components/HeaderBlock.vue'
import AdminSidebar from '@/layouts/sidebars/AdminSidebar.vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'

const ui = useUIStore()
const route = useRoute()

const isMobile = ref(window.innerWidth < 1024)
const onResize = () => {
  isMobile.value = window.innerWidth < 1024
}
onMounted(() => window.addEventListener('resize', onResize))
onBeforeUnmount(() => window.removeEventListener('resize', onResize))

const pageTitle = computed(() => route.meta?.title || 'پیشخوان')
const pageSubtitle = computed(() => route.meta?.subtitle || '')

const educationRoutes = new Set([
  'admin-terms',
  'admin-add-term',
  'admin-edit-term',
  'admin-courses',
  'admin-add-course',
  'admin-edit-course',
  'admin-term-courses',
  'admin-sessions',
  'admin-add-session',
  'admin-edit-session',
  'admin-course-sessions',
  'admin-assignments',
  'admin-exams',
  'admin-add-exam',
  'admin-edit-exam',
])

const menuItems = computed(() => [
  {
    title: 'پیشـخوان',
    icon: 'menu',
    to: { name: 'admin-dashboard' },
    active: route.name === 'admin-dashboard',
  },
  {
    title: 'تایید هویت کاربران',
    icon: 'user',
    to: { name: 'admin-user-verification' },
    active: route.name === 'admin-user-verification',
  },
  {
    title: 'مدیریت کاربران',
    icon: 'users',
    to: { name: 'admin-users' },
    active: ['admin-users', 'admin-add-user', 'admin-edit-user'].includes(route.name),
  },
  {
    title: 'مدیریت آمـوزش',
    icon: 'file',
    active: educationRoutes.has(route.name),
    children: [
      {
        title: 'مدیریت ترم',
        to: { name: 'admin-terms' },
        active: ['admin-terms', 'admin-add-term', 'admin-edit-term'].includes(route.name),
      },
      {
        title: 'مدیریت دوره‌ها',
        to: { name: 'admin-courses' },
        active: [
          'admin-courses',
          'admin-add-course',
          'admin-edit-course',
          'admin-term-courses',
        ].includes(route.name),
      },
      {
        title: 'مدیریت جلسه',
        to: { name: 'admin-sessions' },
        active: [
          'admin-sessions',
          'admin-add-session',
          'admin-edit-session',
          'admin-course-sessions',
        ].includes(route.name),
      },
      {
        title: 'مدیریت تکالیف',
        to: { name: 'admin-assignments' },
        active: route.name === 'admin-assignments',
      },
      {
        title: 'مدیریت آزمون‌ها',
        to: { name: 'admin-exams' },
        active: ['admin-exams', 'admin-add-exam', 'admin-edit-exam'].includes(route.name),
      },
    ],
  },
  {
    title: 'مدیریت پیام‌ها',
    icon: 'chat',
    to: { name: 'admin-messages' },
    active: route.name === 'admin-messages',
  },
  {
    title: 'مدیریت خدمات',
    icon: 'users-three',
    active: ['admin-services', 'admin-service-types'].includes(route.name),
    children: [
      {
        title: 'درخواست‌های خدمت',
        to: { name: 'admin-services' },
        active: route.name === 'admin-services',
      },
      {
        title: 'انواع خدمات',
        to: { name: 'admin-service-types' },
        active: route.name === 'admin-service-types',
      },
    ],
  },
  {
    title: 'مدیریت مشاوره',
    icon: 'chat',
    to: { name: 'admin-consultations' },
    active: route.name === 'admin-consultations',
  },
  {
    title: 'مدیریت مبلغین',
    icon: 'user-sound',
    to: { name: 'admin-missionary-requests' },
    active: route.name === 'admin-missionary-requests',
  },
  {
    title: 'گواهینامه‌ها',
    icon: 'certificate',
    to: { name: 'admin-certificates' },
    active: route.name === 'admin-certificates',
  },
])
</script>

<style lang="scss" scoped>
.admin-layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background-color: #f3f3f3;

  &__sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 16.6667%;
    min-height: 100vh;
    z-index: 30;
    padding: 1rem;
    display: none;

    @media (min-width: 1024px) {
      display: block;
    }

    &--mobile {
      display: block;
      width: 70%;
      max-width: 18rem;

      @media (min-width: 640px) {
        width: 50%;
      }
    }
  }

  &__content {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;

    @media (min-width: 1024px) {
      width: 83.3333%;
      margin-right: auto;
    }
  }

  &__inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1.25rem;
  }

  &__header {
    margin-bottom: 1.25rem;

    @media (min-width: 1024px) {
      margin-bottom: 2.5rem;
    }
  }

  &__page {
    overflow: auto;
  }

  &__footer {
    margin-top: auto;
    padding-top: 0.5rem;
    background-color: #f5f5f5;

    @media (min-width: 1024px) {
      width: fit-content;
      margin-right: auto;
    }
  }

  &__backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 20%);
  }
}
</style>