sposchedule

1
<script setup lang="ts">
2
  import Menu from 'primevue/menu';
3
  import { ref } from 'vue';
4
  import { useAppStore } from '@/stores/app';
5

6
  const { isNavbarActive } = useAppStore();
7

8
  const items = ref([
9
    {
10
      label: 'Семестры',
11
      icon: 'pi pi-hourglass',
12
      route: '/admin/semesters',
13
    },
14
    {
15
      label: 'Корпуса',
16
      icon: 'pi pi-building',
17
      route: '/admin/buildings',
18
    },
19
    {
20
      label: 'Группы',
21
      icon: 'pi pi-users',
22
      route: '/admin/groups',
23
    },
24
    {
25
      label: 'Предметы',
26
      icon: 'pi pi-book',
27
      route: '/admin/subjects',
28
    },
29
    {
30
      label: 'Преподаватели',
31
      icon: 'pi pi-user',
32
      route: '/admin/teachers',
33
    },
34
    {
35
      label: 'Расписание',
36
      icon: 'pi pi-calendar',
37
      route: '/admin/schedules/main',
38
    },
39
    {
40
      label: 'Изменения',
41
      icon: 'pi pi-calendar-plus',
42
      route: '/admin/schedules/changes',
43
    },
44
    {
45
      label: 'Звонки',
46
      icon: 'pi pi-bell',
47
      route: '/admin/bells',
48
    },
49
    {
50
      label: 'Аналитика',
51
      icon: 'pi pi-chart-bar',
52
      route: '/analytics',
53
    },
54
    {
55
      label: 'История',
56
      icon: 'pi pi-list',
57
      route: '/admin/history',
58
    },
59
  ]);
60
</script>
61

62
<template>
63
  <div
64
    :class="{ 'active-navbar': isNavbarActive }"
65
    class="transition-transform fixed z-50 w-80 top-16 left-0 basis-80 flex-grow-0 lg:min-h-screen md:bg-surface-200 md:dark:bg-surface-950"
66
  >
67
    <div class="flex flex-col py-4 px-4">
68
      <Menu :model="items" class="w-full p-4">
69
        <template #item="{ item, props }">
70
          <RouterLink
71
            v-if="item.route"
72
            v-slot="{ href, navigate }"
73
            :to="item.route"
74
            custom
75
          >
76
            <a
77
              :class="{
78
                '!text-primary-500 font-bold': $route.path === item.route,
79
              }"
80
              :href="href"
81
              v-bind="props.action"
82
              @click="navigate"
83
            >
84
              <span :class="item.icon" />
85
              <span class="ml-2">{{ item.label }}</span>
86
            </a>
87
          </RouterLink>
88
          <a
89
            v-else
90
            :class="{
91
              '!text-primary-500 font-bold': $route.path === item.route,
92
            }"
93
            :href="item.url"
94
            :target="item.target"
95
            v-bind="props.action"
96
          >
97
            <span :class="item.icon" />
98
            <span class="ml-2">{{ item.label }}</span>
99
          </a>
100
        </template>
101
      </Menu>
102
    </div>
103
  </div>
104
</template>
105

106
<style>
107
  .active-navbar {
108
    transform: translateX(-100%);
109
  }
110
</style>
111