banu-front/src/layouts/StudentLayout.vue

<template>
  <div class="student-layout">
    <div class="student-layout__row">
      <Transition name="fade">
        <div
          v-if="isMobile && ui.isSidebarOpen"
          class="student-layout__backdrop"
          @click="ui.setSidebarState(false)"
        />
      </Transition>

      <Transition :name="isMobile ? 'slide-drawer' : ''">
        <aside
          v-if="(isMobile && ui.isSidebarOpen) || !isMobile"
          class="student-layout__sidebar"
          :class="{ 'student-layout__sidebar--mobile': isMobile }"
        >
          <StudentSidebar :menu-items="menuItems" />
        </aside>
      </Transition>

      <div class="student-layout__content">
        <div class="student-layout__inner">
          <HeaderBlock
            :page-title="pageTitle"
            :page-subtitle="pageSubtitle"
            class="student-layout__header"
          />
          <RouterView />
          <div class="student-layout__footer">
            <Copyright />
          </div>
        </div>
      </div>
    </div>
  </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 { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import StudentSidebar from '@/layouts/sidebars/StudentSidebar.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 menuItems = computed(() => [
  {
    title: 'داشبورد',
    icon: 'monitor',
    to: { name: 'student-dashboard' },
    active: route.name === 'student-dashboard',
  },
  {
    title: 'آموزش',
    icon: 'graduation-cap',
    to: { name: 'student-terms' },
    active: [
      'student-terms',
      'student-term-details',
      'student-lesson-details',
      'student-session-details',
      'student-exam',
      'student-courses',
      'student-course-details',
    ].includes(route.name),
  },
  {
    title: 'خدمات',
    icon: 'folder-simple-star',
    to: { name: 'student-services' },
    active: route.name === 'student-services',
  },
  {
    title: 'گواهینامه',
    icon: 'certificate',
    to: { name: 'student-certificates' },
    active: route.name === 'student-certificates',
  },
  {
    title: 'ویرایش پروفایل',
    icon: 'user-circle-check',
    to: { name: 'student-profile' },
    active: route.name === 'student-profile',
  },
  {
    title: 'تیکت',
    icon: 'envelope-open',
    to: { name: 'student-tickets' },
    active: route.name === 'student-tickets',
  },
])
</script>

<style lang="scss" scoped>
.student-layout {
  min-height: 100dvh;
  width: 100%;
  background-color: #f5f5f5;
  overflow: hidden;

  &__row {
    width: 100%;
    height: 100%;

    @media (min-width: 1024px) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 0.25rem;
    }
  }

  &__sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    height: 100%;
    min-height: 100dvh;
    width: 70%;

    @media (min-width: 1024px) {
      position: static;
      width: auto;
      flex-basis: 16.6667%;
    }

    &--mobile {
      width: 70%;
      max-width: 20rem;
    }
  }

  &__backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    backdrop-filter: blur(4px);
  }

  &__content {
    flex-basis: 83.3333%;
    width: 100%;

    @media (min-width: 1024px) {
      height: 100%;
    }

    @media (min-width: 1280px) {
      flex-basis: 93%;
    }
  }

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

  &__header {
    margin-bottom: 1.25rem;

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

  &__footer {
    margin-top: auto;
    padding: 0.5rem 0 1.25rem;
  }
}
</style>