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 class="children">
                        <nuxt-link :to="{ name: 'showplacecateringmenu' }">منو کترینگ نمایشگاهی</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: '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>

                <li>
                    <nuxt-link :to="{ name: 'contact' }">تماس با ما</nuxt-link>
                  </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>