ilk commit

src/components/NavSide.vue

@@ -0,0 +1,52 @@
+<template>
+  <nav>
+    <ul>
+      <template v-for="(nav, i) in menuData">
+        <li
+          @mouseover="OpenMenu(i, 'd')"
+          @mouseleave="CloseMenu"
+          v-if="nav.show === undefined || nav.show">
+          <nav-item :itemData="nav" @click="OpenMenu(i, 'm')" />
+          <template
+            v-if="nav.sub !== undefined && (nav.showsub === undefined || nav.showsub)">
+            <nav
+              class="menu-sub menu-side-sub menu-sub-left"
+              v-if="openedSub === i"
+              @click="OpenMenu(i, 'm')">
+              <ul>
+                <template v-for="(sub, j) in nav.sub">
+                  <li v-if="sub.show === undefined || sub.show">
+                    <nav-item :itemData="sub" />
+                  </li>
+                </template>
+              </ul>
+            </nav>
+          </template>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import NavItem from '@/components/NavItem.vue'
+
+  interface NavObj {
+    [key: string]: any
+    sub?: Record<string, any>
+  }
+
+  const props = defineProps<{
+    menuData: NavObj[]
+  }>()
+
+  const openedSub = ref<number | null>(null)
+
+  const OpenMenu = (i: number, d: string) => {
+    if (d === 'd' && document.body.offsetWidth >= 992) openedSub.value = i
+    if (d === 'm' && document.body.offsetWidth < 992) openedSub.value = i
+  }
+  const CloseMenu = () => {
+    openedSub.value = -1
+  }
+</script>