2025_Vuejs_Mpi_Panel/src/layouts/admin-inc/SideMenu.vue

<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.isSuperAdmin,
      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: 'Slider Yönetimi',
          to: '/site-yonetimi/slider-listesi'
        },
        {
          title: 'Popup Yönetimi',
          to: '/site-yonetimi/popup-listesi'
        }
      ]
    },
    {
      title: 'Muhasebe',
      ico: 'accounting1',
      show: usersStore.isPanelUser,
      sub: [
        {
          title: 'Piyango Listesi',
          to: '/muhasebe/piyango-listesi'
        },
        {
          title: 'İzin Bedel Oranı',
          to: '/muhasebe/izin-bedel-orani'
        },
        {
          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>