banu-front/src/layouts/CounselorLayout.vue

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

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

    <Transition name="fade">
      <div
        v-if="isMobile && ui.isSidebarOpen"
        class="counselor-layout__backdrop"
        @click="ui.setSidebarState(false)"
      />
    </Transition>
    <Transition name="slide-drawer">
      <aside
        v-if="isMobile && ui.isSidebarOpen"
        class="counselor-layout__sidebar counselor-layout__sidebar--mobile"
      >
        <CounselorSidebar :menu-items="menuItems" />
      </aside>
    </Transition>
  </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 CounselorSidebar from '@/layouts/sidebars/CounselorSidebar.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>
.counselor-layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background-color: #f3f3f3;

  &__sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 16.6667%;
    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>