/home/henzagold/site/components/ Current File: /home/henzagold/site/components/navBar.vue
<template>
  <ul class="nav-bar">
    <li class="menu-item">
      <a href="/">خانه</a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a class="cats-menu">دسته بندی ها</a>
      <ul class="mega-menu">
<!--        {{ menu }}-->
        <li class="menu-item" v-for="(item,index) in menu">
          <a :href="item.is_master ? `/shop/${item.title.split(' ').join('-')}/${item.id}` : `#`" :title="item.meta" :class="item.childs.length>0 ? 'has-sub-menu' : undefined">{{ item.title }}</a>
          <ul class="inner-mega-menu" v-if="item.childs.length>0">
            <li class="menu-item" v-for="(itemChild,index) in item.childs">
              <a :href="`/shop/${itemChild.title.split(' ').join('-')}/${itemChild.id}`" :title="itemChild.meta">{{ itemChild.title }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="/shop">فروشگاه</a>
    </li>
    <li class="menu-item">
      <a href="/blog">وبلاگ</a>
    </li>
    <li class="menu-item">
      <a href="/blog/about-us">درباره ما</a>
    </li>
    <li class="menu-item">
      <a href="/blog/contact-us">تماس با ما</a>
    </li>
    <!-- Pages End -->
  </ul>
</template>

<script>
export default {
  name: "navBar",
  computed: {
     menu(){
      // console.log("aaaa",this.$store.state.config.menu)
      return this.$store.state.config.menu;
    },
  }
}
</script>

<style scoped>
.nav-bar{
  margin:0 !important;
}
.nav-bar .menu-item a{
  padding: 25px 20px;
}
.nav-bar .menu-item:first-child a{
  padding-right: 0;
}
.navbar .menu-item .mega-menu .menu-item a{
  display: block;
  min-width: 120px;
  padding: 0;
  padding-right: 10px;
  border-bottom: 0;
}
.navbar .menu-item > .mega-menu > .menu-item:last-child > a{
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}
.has-sub-menu{
  line-height: 20px;
  border-right: 2px solid var(--secondary-color);
}
.inner-mega-menu li a{
  color: #8A8A8A;
}
.navbar .menu-item:hover>.mega-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}
.navbar .menu-item .mega-menu {
    padding: 20px;
    display: grid;
    grid-gap: 10px 40px;
    padding-left: 150px;
    grid-template-columns: auto auto auto;
    position: absolute;
    top: 110%;
    right: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    background-color: #fff;
    z-index: 990;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 9px 0px rgb(34 12 43 / 10%);
}
@media screen and (max-width: 991px) {
  .cats-menu{
    border-right: 2px double var(--secondary-color);
  }
  .menu-item-has-children .mega-menu{
    padding-right: 10px;
  }
  .navbar{
    padding-right: 10px;
  }
  .navbar .menu-item .mega-menu {
    display: flex;
    flex-direction: column;
  }
  .nav-bar .menu-item:first-child a{
    padding-right: 15px;
  }
  .nav-bar .menu-item a{
    padding: 10px 15px;
  }
  .inner-mega-menu li a{
    padding: 0 !important;
  }
  .inner-mega-menu{
    padding-right: 25px;
  }
}
</style>