fix: ticket

src/layouts/CounselorLayout.vue

@@ -0,0 +1,144 @@
+<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" 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 { 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 CounselorSidebar from '@/layouts/sidebars/CounselorSidebar.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 menuItems = computed(() => [
+  {
+    title: 'مشاوره',
+    icon: 'chat',
+    to: { name: 'counselor-consultations' },
+    active: route.name === 'counselor-consultations',
+  },
+])
+</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%;
+    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 {
+    padding: 1.25rem;
+  }
+
+  &__header {
+    margin-bottom: 1.25rem;
+
+    @media (min-width: 1024px) {
+      margin-bottom: 2.5rem;
+    }
+  }
+
+  &__page {
+    overflow: auto;
+  }
+
+  &__footer {
+    padding-top: 0.5rem;
+    margin-top: 2.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>

src/layouts/StudentLayout.vue

@@ -95,6 +95,12 @@ const menuItems = computed(() => [
     to: { name: 'student-consultants' },
     active: route.name === 'student-consultants',
   },
+  {
+    title: 'تیکت‌های من',
+    icon: 'chat-centered-dots',
+    to: { name: 'student-tickets' },
+    active: route.name === 'student-tickets',
+  },
   {
     title: 'گواهینامه ها',
     icon: 'scroll',

src/layouts/sidebars/CounselorSidebar.vue

@@ -0,0 +1,94 @@
+<template>
+  <aside class="counselor-sidebar">
+    <div class="counselor-sidebar__logo">
+      <img :src="logo" alt="banu" />
+    </div>
+    <nav class="counselor-sidebar__nav">
+      <ul>
+        <li v-for="item in menuItems" :key="item.title" class="counselor-sidebar__item">
+          <component
+            :is="item.to ? 'RouterLink' : 'div'"
+            :to="item.to"
+            class="counselor-sidebar__link"
+            :class="{ 'counselor-sidebar__link--active': item.active }"
+          >
+            <SvgIcon v-if="item.icon" :name="item.icon" :size="22" />
+            <span>{{ item.title }}</span>
+          </component>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>
+
+<script setup>
+import { gallery } from '@/utils/gallery'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+
+defineProps({
+  menuItems: { type: Array, default: () => [] },
+})
+
+const logo = gallery.logoPinkishRed
+</script>
+
+<style lang="scss" scoped>
+.counselor-sidebar {
+  height: 100%;
+  width: 100%;
+  background: #fff;
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  border-radius: 1rem;
+
+  &__logo {
+    display: flex;
+    justify-content: center;
+
+    img {
+      height: 3.5rem;
+      object-fit: contain;
+    }
+  }
+
+  &__nav {
+    flex: 1;
+    overflow-y: auto;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.625rem 0.875rem;
+    border-radius: 9999px;
+    font-family: var(--font-family-fa);
+    font-size: 0.875rem;
+    color: #4b5563;
+    text-decoration: none;
+    transition: background-color 0.15s, color 0.15s;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-primary);
+      color: #fff;
+    }
+
+    &--active {
+      background: var(--color-primary);
+      color: #fff;
+    }
+  }
+}
+</style>