barg-restuarant/components/SiteHeader.vue

<template>
<client-only>
  <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 />
            </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>
              </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 class="children">
                    <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: 'contact' }">تماس با ما</nuxt-link>
              </li>
              <li>
                <nuxt-link :to="{ name: 'applanding2' }"
                  >دانلود اپلیکیشن</nuxt-link
                >
              </li>
              <li>
                <nuxt-link :to="{ name: 'qrlanding' }"
                  >شبکه های اجتماعی</nuxt-link
                >
              </li>

              <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 />
            </nuxt-link>
          </div>
        </div>
      </nav>
    </div>
  </header>
</client-only>


</template>

<script>
export default {
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>