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

ya zahra

Browse Source
This commit is contained in:
HAM!DREZA
2024-10-15 19:47:53 +03:30
parent a985312484
commit 78ffe90deb
6 changed files with 287 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SiteHeader.vue
+114 -30
View File
@@ -1,64 +1,148 @@
<template>
<header class="site--header">
<div class="container">
<nav class="header--nav">
<div class="row">
<div class="col-6 col-md-2 logo--box">
<nuxt-link to="/" class="logo">
<IconsLogo/>
<IconsLogo />
</nuxt-link>
</div>
<div class="col-9 d-none d-md-block nav--links">
<ul class="relativePos">
<li>
<nuxt-link :to="{name: 'index'}" exact>صفحه اصلی</nuxt-link>
<nuxt-link :to="{ name: 'index' }" exact>صفحه اصلی</nuxt-link>
</li>
<li class="parent">
<p @click="openMenu" class="parentLink">منو</p>
<div class="items">
<li class="children">
<nuxt-link :to="{ name: 'menu' }">منو رستوران</nuxt-link>
</li>
<li>
<nuxt-link :to="{ name: 'cateringmenu' }"
>منو کترینگ</nuxt-link
>
</li>
</div>
</li>
<li>
<nuxt-link :to="{ name: 'subscriber-affairs' }"
>امور مشترکین</nuxt-link
>
</li>
<li>
<nuxt-link :to="{ name: 'contact' }">تماس با ما</nuxt-link>
</li>
<li>
<nuxt-link :to="{name: 'menu'}">منو</nuxt-link>
<nuxt-link :to="{ name: 'applanding2' }"
>دانلود اپلیکیشن</nuxt-link
>
</li>
<li>
<nuxt-link :to="{name: 'cateringmenu'}">منو کترینگ</nuxt-link>
<nuxt-link :to="{ name: 'qrlanding' }"
>شبکه های اجتماعی</nuxt-link
>
</li>
<li>
<nuxt-link :to="{name: 'about'}">درباره ما</nuxt-link>
</li>
<li>
<nuxt-link :to="{name: 'subscriber-affairs'}">امور مشترکین</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>
<li>
<nuxt-link :to="{name:'contact'}">تماس با ما</nuxt-link>
</li>
<li>
<nuxt-link :to="{name:'applanding2'}">دانلود اپلیکیشن</nuxt-link>
</li>
<li>
<nuxt-link :to="{name:'qrlanding'}">شبکه های اجتماعی</nuxt-link>
<li class="parent">
<p class="parentLink" @click="openMenu2">درباره ما</p>
<div class="items2">
<li class="children">
<nuxt-link :to="{ name: 'about' }">درباره برگ</nuxt-link>
</li>
<li class="children">
<nuxt-link :to="{ name: 'gallery' }"
>گالری تصاویر</nuxt-link
>
</li>
<li class="children">
<nuxt-link :to="{ name: 'social-responsibility' }"
>مسئولیت اجتماعی</nuxt-link
>
</li>
<li>
<nuxt-link :to="{ name: 'franchise' }">فرانچایز</nuxt-link>
</li>
</div>
</li>
</ul>
</div>
<div class="col-6 col-md-1 reservation relativePos">
<nuxt-link to="/reservation">
<IconsReservation/>
<IconsReservation />
</nuxt-link>
</div>
</div>
</nav>
</div>
</header>
</template>
<script>
export default {
mounted() {
}
mounted() {},
methods: {
openMenu(e){
if (process.client) {
e.stopPropagation();
document.querySelector('.items').style.display = 'block'
}
},
openMenu2(e){
if (process.client) {
e.stopPropagation();
document.querySelector('.items2').style.display = 'block'
}
},
}
};
</script>
<style scoped>
p{
font-weight: bold;
}
.parentLink {
cursor: pointer;
}
.parent {
position: relative;
}
.items {
position: absolute;
display: none;
top: 60px;
right: -80px;
background-color: white;
border: 1px solid #e5e5e5;
border-radius: 5px;
width: 200px;
z-index: 2;
}
.items2 {
position: absolute;
display: none;
top: 60px;
right: -80px;
background-color: white;
border: 1px solid #e5e5e5;
border-radius: 5px;
width: 200px;
z-index: 2;
}
.children {
height: 50px;
}
</style>