first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,163 @@
+<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" class="student-layout__header" />
+          <RouterView />
+          <div class="student-layout__footer">
+            <Copyright />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+
+import StudentSidebar from '@/layouts/sidebars/StudentSidebar.vue'
+import HeaderBlock from '@/components/HeaderBlock.vue'
+import Copyright from '@/components/Copyright.vue'
+import { useUIStore } from '@/store/ui'
+
+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: 'menu',
+    to: { name: 'student-dashboard' },
+    active: route.name === 'student-dashboard',
+  },
+  {
+    title: 'دوره‌های من',
+    icon: 'book',
+    to: { name: 'student-courses' },
+    active: ['student-courses', 'student-course-details'].includes(route.name),
+  },
+  {
+    title: 'ویرایش پروفایل',
+    icon: 'user',
+    to: { name: 'student-profile' },
+    active: route.name === 'student-profile',
+  },
+])
+</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 {
+    padding: 1.25rem;
+  }
+
+  &__header {
+    margin-bottom: 1.25rem;
+
+    @media (min-width: 1024px) {
+      margin-bottom: 2.5rem;
+    }
+  }
+
+  &__footer {
+    position: fixed;
+    bottom: 0;
+    left: 1.25rem;
+    width: 100%;
+    padding: 0.5rem 0 1.25rem;
+    background-color: #f5f5f5;
+
+    @media (min-width: 1024px) {
+      width: fit-content;
+    }
+  }
+}
+</style>