madresebanoo
d63ab86e70
- roleMenuItems.js: merged menu builder that unions items from all user roles (student + missionary, student + counselor, etc.) additively - auth store: expose `roles` array in addition to singular `role`; wire in WordPress auth-status cookie sync so the public site can show/hide the account button - router guards: use roles.includes() instead of role === for multi-role access - layouts (Student/Counselor/Missionary): delegate menuItems to buildMergedMenuItems so dual-role users see sections from both roles - StudentSessionDetailsPage: contentKind now returns 'video' (not 'link') when session.videoUrl is set; adds embed iframe branch for online sessions - CertificateItem.vue: fix CSS order/alignment for desktop + mobile layout - StudentCertificatesPage.vue: map backend payload fields to component props with Jalaali date formatting - SessionFormPage: upload progress bar (%) during video uploads; embed_code textarea for online sessions (frontend-only; dormant until batch-2 backend migration is deployed) - wp-sync/auth-status-cookie.js: cookie helper for WordPress login-state sync [batch-1-low-risk]
147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<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 { useAuthStore } from '@/store/auth'
|
|
import { RouterView, useRoute } from 'vue-router'
|
|
import Copyright from '@/components/Copyright.vue'
|
|
import HeaderBlock from '@/components/HeaderBlock.vue'
|
|
import { buildMergedMenuItems } from '@/layouts/roleMenuItems'
|
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import StudentSidebar from '@/layouts/sidebars/StudentSidebar.vue'
|
|
|
|
const ui = useUIStore()
|
|
const auth = useAuthStore()
|
|
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(() => buildMergedMenuItems(auth.roles, route))
|
|
</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>
|