submenu example

src/components/Configurator.vue

@@ -42,7 +42,7 @@ const darkMode = () => {
     <div class="shadow-lg card">
       <div class="pt-3 pb-0 bg-transparent card-header">
         <div class="" :class="isRTL ? 'float-end' : 'float-start'">
-          <h5 class="mt-3 mb-0">Argon Configurator</h5>
+          <h5 class="mt-3 mb-0">Juno Configurator</h5>
           <p>See our dashboard options.</p>
         </div>
         <div
@@ -161,42 +161,6 @@ const darkMode = () => {
             />
           </div>
         </div>
-        <a
-          class="btn bg-gradient-dark w-100"
-          href="https://www.creative-tim.com/product/vue-argon-dashboard"
-          >Free Download</a
-        >
-        <a
-          class="btn btn-outline-dark w-100"
-          href="https://www.creative-tim.com/learning-lab/vue/overview/argon-dashboard/"
-          >View documentation</a
-        >
-        <div class="text-center w-100">
-          <a
-            class="github-button"
-            href="https://github.com/creativetimofficial/vue-argon-dashboard"
-            data-icon="octicon-star"
-            data-size="large"
-            data-show-count="true"
-            aria-label="Star creativetimofficial/vue-argon-dashboard on GitHub"
-            >Star</a
-          >
-          <h6 class="mt-3">Thank you for sharing!</h6>
-          <a
-            href="https://twitter.com/intent/tweet?text=Check%20Vue%20Argon%20Dashboard%202%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%vuejs3&amp;url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%vue-argon-dashboard"
-            class="mb-0 btn btn-dark me-2"
-            target="_blank"
-          >
-            <i class="fab fa-twitter me-1" aria-hidden="true"></i> Tweet
-          </a>
-          <a
-            href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/vue-argon-dashboard"
-            class="mb-0 btn btn-dark me-2"
-            target="_blank"
-          >
-            <i class="fab fa-facebook-square me-1" aria-hidden="true"></i> Share
-          </a>
-        </div>
       </div>
     </div>
   </div>

src/components/Sidenav/SidenavItem.vue

@@ -21,11 +21,14 @@ defineProps({
     type: String,
     required: true,
   },
+  hideIcon: {
+    default: false
+  }
 });
 </script>
 <template>
   <router-link :to="to" class="nav-link" @click="minimizeSidebar">
-    <div
+    <div v-if="!hideIcon"
       class="icon icon-shape icon-sm text-center d-flex align-items-center justify-content-center"
     >
       <slot name="icon"></slot>

src/components/Sidenav/SidenavList.vue

@@ -4,6 +4,7 @@ import { useRoute } from "vue-router";
 import { useStore } from "vuex";
 
 import SidenavItem from "./SidenavItem.vue";
+import SidenavParent from "./SidenavParent.vue";
 import SidenavCard from "./SidenavCard.vue";
 
 const store = useStore();
@@ -100,17 +101,16 @@ const getRoute = () => {
           </template>
         </sidenav-item>
       </li>
-
       <li class="nav-item">
-        <sidenav-item
-          to="/signup"
+        <sidenav-parent
+          identifier="submenu"
           :class="getRoute() === 'signup' ? 'active' : ''"
           :navText="isRTL ? 'اشتراك' : 'Sign Up'"
         >
           <template v-slot:icon>
             <i class="ni ni-window-expand-bottom-right text-info text-sm opacity-10"></i>
           </template>
-        </sidenav-item>
+        </sidenav-parent>
       </li>
     </ul>
   </div>

src/components/Sidenav/SidenavParent.vue

+<script setup>
+import SidenavItem from "./SidenavItem.vue";
+
+import { computed } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+
+const store = useStore();
+const isRTL = computed(() => store.state.isRTL);
+const sidebarMinimize = () => store.commit("sidebarMinimize");
+
+const minimizeSidebar = () => {
+  if (window.innerWidth < 1200) {
+    sidebarMinimize();
+  }
+};
+
+const getRoute = () => {
+  const route = useRoute();
+  const routeArr = route.path.split("/");
+  return routeArr[1];
+};
+
+defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  navText: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+<template>
+  <a
+    class="nav-link"
+    data-bs-toggle="collapse"
+    aria-expanded="false"
+    :aria-controls="identifier"
+    role="button"
+    :href="`#${identifier}`"
+  >
+    <div
+      class="icon icon-shape icon-sm text-center d-flex align-items-center justify-content-center"
+    >
+      <slot name="icon"></slot>
+    </div>
+    <span class="nav-link-text" :class="isRTL ? ' me-1' : 'ms-1'">
+      {{ navText }}
+    </span>
+  </a>
+  <div class="collapse" :id="identifier">
+    <ul class="nav nav-sm flex-column ms-4">
+      <li class="nav-item">
+        <sidenav-item
+          to="/signup"
+          :class="getRoute() === 'signup' ? 'active' : ''"
+          :navText="isRTL ? 'اشتراك' : 'Sign Up'"
+          :hide-icon="true"
+        >
+        </sidenav-item>
+      </li>
+    </ul>
+  </div>
+</template>

src/components/Sidenav/index.vue

@@ -40,7 +40,7 @@ const darkMode = computed(() => store.state.darkMode);
           alt="main_logo"
         />
 
-        <span class="ms-2 font-weight-bold me-2">Argon Dashboard 2</span>
+        <span class="ms-2 font-weight-bold me-2">Juno Dashboard 2</span>
       </router-link>
     </div>