danak/barg-restuarant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create responsive collapse navbar

Browse Source
This commit is contained in:
HAM!DREZA
2024-10-15 23:32:30 +03:30
parent c1b5f469e7
commit a20a2d5f68
3 changed files with 206 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/OffcanvasMenu.vue
+137 -17
View File
@@ -7,26 +7,88 @@
<nuxt-link :to="{name: 'index'}">صفحه اصلی</nuxt-link>
</li>
<li>
<nuxt-link :to="{name: 'menu'}">منو</nuxt-link>
</li>
<li>
<nuxt-link :to="{name: 'cateringmenu'}">منو کترینگ</nuxt-link>
</li>
<p @click="showMenu" class="accordion">
<svg
:class="{'rotate' : menuCollape}"
width="15"
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>
</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>
<p @click="showMenu2" class="accordion2">
<svg
:class="{'rotate2' : menuCollape2}"
width="15"
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="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
+6 -1
View File
@@ -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>