influence/layouts/default.vue

<template>
  <v-app>
    <div class="container">
      <headerLayout />
      <div class="content">
        <aside>
          <h2 class="aside--main--title">{{ useDtStore.menuInfo.pageRtName }}</h2>
          <div class="aside--list" v-show="useDtStore.menuInfo.menuId == 'menu01'">
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '0' }"
              @click="subMenuActv(0, '/view/mng', 'menu01', '관리자 관리')"
              >-관리자 리스트</v-btn
            >
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '1' }"
              @click="subMenuActv(1, '/view/mng/mngListDeleted', 'menu01', '관리자 관리')"
              >-삭제 관리자</v-btn
            >
          </div>
          <div class="aside--list" v-show="useDtStore.menuInfo.menuId === 'menu02'">
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '0' }"
              @click="subMenuActv(0, '/view/event/evtList', 'menu02', '이벤트 관리')"
              >-전체 이벤트</v-btn
            >
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '1' }"
              @click="
                subMenuActv(1, '/view/event/evtListPending', 'menu02', '이벤트 관리')
              "
              >-대기중 이벤트</v-btn
            >
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '2' }"
              @click="
                subMenuActv(2, '/view/event/evtListOngoing', 'menu02', '이벤트 관리')
              "
              >-진행중 이벤트</v-btn
            >
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '3' }"
              @click="
                subMenuActv(3, '/view/event/evtListClosed', 'menu02', '이벤트 관리')
              "
              >-마감된 이벤트</v-btn
            >
            <!-- <v-btn
              class="custom-btn"
              :class="{ actv: subActv == '1' }"
              @click="subMenuActv(1, '/view/media/pressKitlist', 'menu02', '이벤트 관리')"
              >-보도자료</v-btn
            > -->
          </div>
          <div class="aside--list" v-show="useDtStore.menuInfo.menuId == 'menu03'">
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '0' }"
              @click="subMenuActv(0, '/view/winner', 'menu03', '당첨자 관리', 1)"
              >-진행중 이벤트</v-btn
            >
            <v-btn
              class="custom-btn"
              :class="{ actv: useDtStore.menuInfo.menuIndex == '1' }"
              @click="subMenuActv(1, '/view/winner', 'menu03', '당첨자 관리', 2)"
              >-마감된 이벤트</v-btn
            >
          </div>
        </aside>
        <NuxtPage class="main" />
      </div>
      <!-- <footerLayout /> -->
    </div>
  </v-app>
</template>

<script setup>
  import headerLayout from "@/components/common/header";

  /************************************************************************
|    전역
************************************************************************/
  const { $dayjs, $log, $eventBus, $toast } = useNuxtApp();
  let pageId = "defaultLayout";
  const menuActive = ref("");
  const router = useRouter();
  const subActv = ref("");
  /************************************************************************
|    스토어
************************************************************************/
  const useDtStore = useDetailStore();

  /************************************************************************
|    함수 : 세팅
************************************************************************/
  const subMenuActv = (__IDX, __URL, __MENU_ID, __PAGE_RT_NAME, __PAGE_STATUS) => {
    useDtStore.menuInfo.menuIndex = __IDX;
    useDtStore.menuInfo.menuId = __MENU_ID;
    useDtStore.menuInfo.pageRtName = __PAGE_RT_NAME;
    useDtStore.menuInfo.pageStatus = __PAGE_STATUS;
    router.push({
      path: __URL,
    });
  };
  /************************************************************************
|    스코핑  : INIT
|    *scoped에 유의하여 세팅
************************************************************************/

  onMounted(() => {});
</script>