ilk commit

src/layouts/admin-inc/SideMenu.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    :class="['menu-side-w', globalStore.menuLoaded ? 'animate' : '']"
+    :style="[sideMenuPosition]">
+    <nav-side :menuData="menuData" />
+  </div>
+  <div
+    class="menu-side-shadow"
+    :class="ShowSideMenuShadow"
+    @click="globalStore.sideMenu = false"></div>
+</template>
+<script setup lang="ts">
+  import { ref, reactive, onMounted, computed } from 'vue'
+  import NavSide from '@/components/NavSide.vue'
+  import { useGlobalStore } from '@/stores/globalStore'
+  const globalStore = useGlobalStore()
+  import { useUsersStore } from '@/stores/usersStore'
+  const usersStore = useUsersStore()
+
+  globalStore.screenWidth = window.screen.width
+
+  if (globalStore.screenWidth < globalStore.breakPoints.tablet)
+    globalStore.sideMenu = false
+
+  var ShowSideMenuShadow = computed(() => {
+    if (
+      globalStore.screenWidth < globalStore.breakPoints.tablet &&
+      globalStore.sideMenu
+    ) {
+      return 'showme'
+    } else {
+      return ''
+    }
+  })
+
+  var sideMenuPosition = computed(() => {
+    if (globalStore.sideMenu) {
+      return 'left:0'
+    } else {
+      return 'left:-' + globalStore.sideMenuWidth + 'px'
+    }
+  })
+
+  const menuData = ref<Record<string, any>[]>([
+    {
+      title: 'Dashboard',
+      ico: 'dashboard',
+      desktop: 'hover',
+      mobile: 'click',
+      to: '/'
+    },
+    {
+      title: 'Piyangolar',
+      ico: 'draws',
+      show: !usersStore.isAccounting,
+      to: usersStore.isPanelUser ? '/piyangolar/piyango-listesi' : '',
+      showsub: !usersStore.isPanelUser,
+      sub: [
+        {
+          title: 'Yeni Piyango',
+          to: '/piyangolar/yeni-piyango',
+          show: usersStore.userApproveId === 4 && !usersStore.isPanelUser
+        },
+        {
+          title: 'Piyango Listesi',
+          to: '/piyangolar/piyango-listesi',
+          show: !usersStore.isPanelUser
+        }
+      ]
+    },
+    {
+      title: 'Üyeler',
+      ico: 'customers',
+      show: usersStore.isPanelUser && !usersStore.isAccounting,
+      sub: [
+        {
+          title: 'Üye Listesi',
+          to: '/uyeler/uye-liste'
+        },
+        {
+          title: 'Üye Tipleri',
+          to: '/uyeler/uye-tipleri'
+        }
+      ]
+    },
+    {
+      title: 'Kullanıcılar',
+      ico: 'users',
+      show: usersStore.isPanelUser,
+      sub: [
+        {
+          title: 'Yeni Kullanıcı',
+          to: '/kullanicilar/yeni-kullanici'
+        },
+        {
+          title: 'Kullanıcı Listesi',
+          to: '/kullanicilar/kullanici-liste'
+        },
+        {
+          title: 'Kullanıcı Rolleri',
+          to: '/kullanicilar/kullanici-roller'
+        },
+        {
+          title: 'Ayarlar',
+          to: '/kullanicilar/kullanici-ayarlari'
+        }
+      ]
+    },
+    {
+      title: 'Site Yönetimi',
+      ico: 'sitemanagement',
+      show: usersStore.isPanelUser && !usersStore.isAccounting,
+      sub: [
+        {
+          title: 'Yeni Sayfa',
+          to: '/site-yonetimi/yeni-sayfa'
+        },
+        {
+          title: 'Sayfa Listesi',
+          to: '/site-yonetimi/sayfa-listesi'
+        },
+        {
+          title: 'Menü Yönetimi',
+          to: '/site-yonetimi/menu-listesi'
+        }
+      ]
+    },
+    {
+      title: 'Muhasebe',
+      ico: 'accounting1',
+      show: usersStore.isPanelUser,
+      sub: [
+        {
+          title: 'Piyango Listesi',
+          to: '/muhasebe/piyango-listesi'
+        },
+        {
+          title: 'Ayarlar',
+          to: '/muhasebe/ayarlar'
+        }
+      ]
+    },
+    {
+      title: 'Sistem Günlüğü',
+      ico: 'logs',
+      to: '/logs',
+      show: usersStore.isPanelUser && !usersStore.isAccounting
+    },
+    {
+      title: 'Profil',
+      ico: 'customers',
+      to: '/profil',
+      show: !usersStore.isPanelUser
+    }
+  ])
+  const ResizeWindow = () => {
+    globalStore.screenWidth = window.screen.width
+    if (globalStore.screenWidth < globalStore.breakPoints.tablet)
+      globalStore.sideMenu = false
+  }
+  onMounted(() => {
+    const menuSideW = document.querySelector('.menu-side-w')
+    if (menuSideW) {
+      requestAnimationFrame(() => {
+        globalStore.sideMenuWidth = menuSideW.getBoundingClientRect().width
+        setTimeout(() => {
+          globalStore.menuLoaded = true
+        }, 100)
+      })
+    }
+    ResizeWindow()
+    window.addEventListener('resize', ResizeWindow)
+  })
+</script>