create responsive collapse navbar
This commit is contained in:
HAM!DREZA
+137
-17
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user