fix

src/layouts/AdminLayout.vue

@@ -6,7 +6,11 @@
 
     <div class="admin-layout__content">
       <div class="admin-layout__inner">
-        <HeaderBlock :page-title="pageTitle" class="admin-layout__header" />
+        <HeaderBlock
+          :page-title="pageTitle"
+          :page-subtitle="pageSubtitle"
+          class="admin-layout__header"
+        />
         <div class="admin-layout__page">
           <RouterView />
         </div>
@@ -53,6 +57,7 @@ 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',

src/layouts/CounselorLayout.vue

@@ -6,7 +6,11 @@
 
     <div class="counselor-layout__content">
       <div class="counselor-layout__inner">
-        <HeaderBlock :page-title="pageTitle" class="counselor-layout__header" />
+        <HeaderBlock
+          :page-title="pageTitle"
+          :page-subtitle="pageSubtitle"
+          class="counselor-layout__header"
+        />
         <div class="counselor-layout__page">
           <RouterView />
         </div>
@@ -53,6 +57,7 @@ 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(() => [
   {

src/layouts/MissionaryLayout.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="missionary-layout">
+    <div class="missionary-layout__row">
+      <Transition name="fade">
+        <div
+          v-if="isMobile && ui.isSidebarOpen"
+          class="missionary-layout__backdrop"
+          @click="ui.setSidebarState(false)"
+        />
+      </Transition>
+
+      <Transition :name="isMobile ? 'slide-drawer' : ''">
+        <aside
+          v-if="(isMobile && ui.isSidebarOpen) || !isMobile"
+          class="missionary-layout__sidebar"
+          :class="{ 'missionary-layout__sidebar--mobile': isMobile }"
+        >
+          <StudentSidebar :menu-items="menuItems" />
+        </aside>
+      </Transition>
+
+      <div class="missionary-layout__content">
+        <div class="missionary-layout__inner">
+          <HeaderBlock
+            :page-title="pageTitle"
+            :page-subtitle="pageSubtitle"
+            class="missionary-layout__header"
+          />
+          <RouterView />
+          <div class="missionary-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: 'user-sound',
+    to: { name: 'missionary-requests' },
+    active: route.name === 'missionary-requests',
+  },
+  {
+    title: 'تیکت',
+    icon: 'envelope-open',
+    to: { name: 'missionary-tickets' },
+    active: route.name === 'missionary-tickets',
+  },
+])
+</script>
+
+<style lang="scss" scoped>
+.missionary-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>

src/layouts/StudentLayout.vue

@@ -21,7 +21,11 @@
 
       <div class="student-layout__content">
         <div class="student-layout__inner">
-          <HeaderBlock :page-title="pageTitle" class="student-layout__header" />
+          <HeaderBlock
+            :page-title="pageTitle"
+            :page-subtitle="pageSubtitle"
+            class="student-layout__header"
+          />
           <RouterView />
           <div class="student-layout__footer">
             <Copyright />
@@ -51,8 +55,15 @@ 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',
@@ -65,7 +76,6 @@ const menuItems = computed(() => [
       'student-exam',
       'student-courses',
       'student-course-details',
-      'student-dashboard',
     ].includes(route.name),
   },
   {

src/layouts/sidebars/AdminSidebar.vue

@@ -29,6 +29,7 @@
         </li>
       </ul>
     </nav>
+    <SidebarLogout />
   </aside>
 </template>
 
@@ -36,6 +37,7 @@
 import { RouterLink } from 'vue-router'
 import { gallery } from '@/utils/gallery'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
+import SidebarLogout from '@/layouts/sidebars/SidebarLogout.vue'
 
 defineProps({
   menuItems: { type: Array, default: () => [] },
@@ -46,7 +48,7 @@ const logo = gallery.logoPinkishRed
 
 <style lang="scss" scoped>
 .admin-sidebar {
-  height: 100%;
+  height: 100vh;
   width: 100%;
   background: #fff;
   padding: 1.5rem 1rem;

src/layouts/sidebars/CounselorSidebar.vue

@@ -18,12 +18,14 @@
         </li>
       </ul>
     </nav>
+    <SidebarLogout />
   </aside>
 </template>
 
 <script setup>
 import { gallery } from '@/utils/gallery'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
+import SidebarLogout from '@/layouts/sidebars/SidebarLogout.vue'
 
 defineProps({
   menuItems: { type: Array, default: () => [] },

src/layouts/sidebars/SidebarLogout.vue

@@ -0,0 +1,90 @@
+<template>
+  <button
+    type="button"
+    class="sidebar-logout"
+    :class="{ 'sidebar-logout--stacked': stacked }"
+    :style="{ color }"
+    @click="onLogout"
+  >
+    <SvgIcon name="power" :size="34" color="currentColor" />
+    <span class="sidebar-logout__labels">
+      <span class="sidebar-logout__title">خــروج</span>
+      <span class="sidebar-logout__subtitle">Logout</span>
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import useAuth from '@/composables/useAuth'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { useLogoutMutation } from '@/services/query/auth'
+
+defineProps({
+  color: { type: String, default: '#9a9a9a' },
+  stacked: { type: Boolean, default: false },
+})
+
+const router = useRouter()
+const { clearSession } = useAuth()
+const logoutMutation = useLogoutMutation()
+
+const onLogout = async () => {
+  try {
+    await logoutMutation.mutateAsync()
+  } catch {
+    /* ignore */
+  } finally {
+    clearSession()
+    router.push({ name: 'login' })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebar-logout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &__labels {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: start;
+  }
+
+  &--stacked {
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 0.625rem 0.25rem;
+  }
+
+  &--stacked &__labels {
+    align-items: center;
+    text-align: center;
+  }
+
+  &__title {
+    font-family: var(--font-family-fa);
+    font-size: 1rem;
+    font-weight: 500;
+  }
+
+  &__subtitle {
+    font-size: 0.9375rem;
+    opacity: 0.55;
+  }
+}
+</style>

src/layouts/sidebars/StudentSidebar.vue

@@ -18,12 +18,14 @@
         </li>
       </ul>
     </nav>
+    <SidebarLogout color="#fff" />
   </aside>
 </template>
 
 <script setup>
 import { gallery } from '@/utils/gallery'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
+import SidebarLogout from '@/layouts/sidebars/SidebarLogout.vue'
 
 defineProps({
   menuItems: { type: Array, default: () => [] },