create responsive collapse navbar

components/OffcanvasMenu.vue

@@ -7,26 +7,88 @@
             <nuxt-link :to="{name: 'index'}">صفحه اصلی</nuxt-link>
           </li>
           <li>
-            <nuxt-link :to="{name: 'menu'}">منو</nuxt-link>
+            <p @click="showMenu" class="accordion">
-          </li>
+              <svg
-          <li>
+              :class="{'rotate' : menuCollape}"
-            <nuxt-link :to="{name: 'cateringmenu'}">منو کترینگ</nuxt-link>
+              width="15"
-          </li>
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+          >
+              <path
+                  d="M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008"
+                  stroke="#fff"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+              />
+          </svg>
+              <span>منو</span>
+            </p>
+        
+          <div class="panel" v-if="menuCollape">
+            <li>
+              <nuxt-link :to="{name: 'menu'}">- منوی رستوران</nuxt-link>
+            </li>
+            <li>
+              <nuxt-link :to="{name: 'cateringmenu'}">- منو کترینگ</nuxt-link>
+            </li>
+            <li>
+              <nuxt-link :to="{name: 'companiescateringmenu'}">- منو کترینگ شرکت ها</nuxt-link>
+            </li>
+          </div>
+        </li>
           <li>
             <nuxt-link :to="{name: 'subscriber-affairs'}">امور مشترکین</nuxt-link>
           </li>
+
+
           <li>
-            <nuxt-link :to="{name: 'about'}">درباره ما</nuxt-link>
+            <p @click="showMenu2" class="accordion2">
-          </li>
+              <svg
-          <li>
+              :class="{'rotate2' : menuCollape2}"
-            <nuxt-link :to="{name: 'gallery'}">گالری تصاویر</nuxt-link>
+              width="15"
-          </li>
+              height="15"
-          <li>
+              viewBox="0 0 24 24"
-            <nuxt-link :to="{name: 'social-responsibility'}">مسئولیت اجتماعی</nuxt-link>
+              fill="none"
-          </li>
+              xmlns="http://www.w3.org/2000/svg"
-          <li>
+          >
-            <nuxt-link :to="{name: 'franchise'}">فرانچایز</nuxt-link>
+              <path
-          </li>
+                  d="M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008"
+                  stroke="#fff"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+              />
+          </svg>
+              <span>درباره ما</span>
+            </p>
+
+
+            <div class="panel2" v-if="menuCollape2">
+              <li>
+                <nuxt-link :to="{name: 'about'}">- درباره برگ</nuxt-link>
+              </li>
+              <li>
+                <nuxt-link :to="{name: 'gallery'}">- گالری تصاویر</nuxt-link>
+              </li>
+              <li>
+                <nuxt-link :to="{name: 'social-responsibility'}">- مسئولیت اجتماعی</nuxt-link>
+              </li>
+              <li>
+                <nuxt-link :to="{name: 'franchise'}">- فرانچایز</nuxt-link>
+              </li>
+
+
+              </div>
+
+            </li>
+
+
+     
           <li>
             <nuxt-link :to="{name: 'contact'}">تماس با ما</nuxt-link>
           </li>
@@ -79,7 +141,17 @@
 export default {
   data(){
     return{
-      storeInfo : null
+      storeInfo : null,
+      menuCollape: false,
+      menuCollape2: false
+    }
+  },
+  methods: {
+    showMenu(){
+      this.menuCollape = !this.menuCollape
+    }, 
+      showMenu2(){
+      this.menuCollape2 = !this.menuCollape2
     }
   },
   mounted() {
@@ -130,3 +202,51 @@ export default {
 }
 
 </script>
+
+
+<style scoped>
+.accordion {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+
+  transition: 1s ease-out;
+  color: white;
+}
+
+.panel {
+width: 100%;
+  overflow: hidden;
+  transition: 1s ease-out;
+  margin-top: 5px;
+}
+.rotate{
+  rotate: -90deg;
+}
+.accordion2 {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+
+  transition: 1s ease-out;
+  color: white;
+}
+
+.panel2 {
+width: 100%;
+  overflow: hidden;
+  transition: 1s ease-out;
+  margin-top: 5px;
+}
+.rotate2{
+  rotate: -90deg;
+}
+</style>

components/SiteHeader.vue

@@ -21,11 +21,16 @@
                   <li class="children">
                     <nuxt-link :to="{ name: 'menu' }">منو رستوران</nuxt-link>
                   </li>
-                  <li>
+                  <li class="children">
                     <nuxt-link :to="{ name: 'cateringmenu' }"
                       >منو کترینگ</nuxt-link
                     >
                   </li>
+                  <li>
+                    <nuxt-link :to="{ name: 'companiescateringmenu' }"
+                      >منو کترینگ شرکت ها</nuxt-link
+                    >
+                  </li>
                 </div>
               </li>
 

pages/companiescateringmenu.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="home--page page--container d-flex justify-content-center">
+    <SiteHeader/>
+    <div class="d-flex flex-column align-self-center" style="padding: 50px 8px; text-align: center">
+      <div class="download-app d-flex flex-column justify-content-center">
+        <div class="d-flex align-self-center mb-4" style="width: 100%">
+          <!-- <el-card class="box-card" style="width: 100%; border-radius: 17px">
+            <div class="row">
+              <div class="col-12 d-flex justify-content-evenly align-items-center">
+                <div class="logo-image"><img src="/favicon.png" style="width: 40px" alt=""></div>
+                <div class="d-flex flex-column justify-content-start" style="text-align: right">
+                  <p style="font-size: 18px; font-weight: bold">BARG CATERING</p>
+                  <p style="font-size: 16px; font-weight: bold" class="mt-2">کترینگ برگ</p>
+                </div>
+              </div>
+              <div class="col-12 mt-3">
+                <a href="/menu_barg.pdf" class="contactBtnSocial">
+                  <span class="m-1"><i class="fal fa-download"></i></span>
+                  <span>مشاهده منو</span>
+                </a>
+              </div>
+            </div>
+          </el-card> -->
+        </div>
+      </div>
+    </div>
+    <SiteFooter/>
+  </section>
+</template>
+
+<script>
+export default {
+  layout: 'blank',
+  data() {
+    return {
+      payment: null
+    }
+  },
+  computed: {},
+  watch: {},
+  methods:{
+    copyText(){
+      const copyText = document.getElementById("code");
+      navigator.clipboard.writeText(copyText.innerText);
+      this.$message({
+        message: 'کپی شد!',
+        type: 'success',
+        center: false
+      });
+    },
+    back(){
+
+    }
+  },
+  async asyncData({$axios, query, error}) {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>