/home/henzagold/site/components/ Current File: //home/henzagold/site/components/PageHeader.vue
<template>
  <div>
    <mobile-menu :toggleMobile="toggleMobile"/>
    <!-- Header Start -->
    <header class="main-header header-fw can-sticky header-1">
      <RandomText class="random-text" />
      <nav class="navbar justify-start">

        <div class="navbar-item logo mobile-fx-div" >
          <!-- Logo -->
          <a class="navbar-brand" href="/">
            <logo width="220px"/>
          </a>
        </div>
        <div class="navbar-item nav d-flex mobile-fx-div flex-1">

          <nav-bar class="hide-on-mobile"/>
          <div class="searchbar hide-on-mobile d-lg-none d-xl-flex pr-[20px] flex-1" style="display:flex;align-items: center;">
                  <form action="/shop" method="get" class="w-full">
                    <div class="input-group">
                      <input style="width: 200px;" autocomplete="off" type="text" name="search" class="form-control" placeholder="جستجو...">
                      <div class="input-group-append">
                        <button type="submit">
                          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </form>
                </div>
          <div class="header-controls" >
  <!-- Toggler -->
  <div class="aside-toggler aside-trigger mobile-fx-asside" @click="toggleMobile">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="px-[20px] mobile-fx-px hidden sm:block">
    <a href="/customer" style="color:#21284e">
      <svg style="width:28px;height:28px" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
      </svg>
    </a>
  </div>
  <div class="position-relative mr-[20px] px-[20px] mobile-fx-px">
    <cart />
  </div>
</div>

        </div>
        <!-- Jewelry -->
      </nav>


      <!-- Top Header Start -->
<!--      <div class="top-header pr-lg-5 =>>> text-white text-[11px] md:text-[14px]">
&lt;!&ndash;        <div class="top-header-inner" style="height: 1.5rem">
          <ul class="top-header-nav d-lg-flex " style="justify-content: flex-start" >
            <li class="brand-item d-none d-lg-block" >
              <a> {{goldPrice.geram18.uaj }} </a>
            </li>
            <li  class="brand-item d-none d-md-block" >
              <a>مثقال طلا : {{ goldPrice.mesghal.p | tomanPriceUnit }} </a>
            </li>
            <li  class="brand-item" >
              <a> گرم طلای 18 عیار : {{ goldPrice.geram18.p | tomanPriceUnit }} </a>
            </li>
          </ul>
        </div>&ndash;&gt;
        سپاس گزار خواهيم بود، با توجه به نوسان شديد قيمت، براي اطلاع از قيمت نهايي با ما در تماس باشيد.
      </div>-->
<!--      <div class="top-header pr-lg-5">
        <BrandBar />
      </div>-->
      <!-- Top Header End -->
    </header>
    <!-- Header End -->
  </div>
</template>

<script>
import Logo from "./Logo";
import MobileMenu from "./MobileMenu";
import navBar from "./navBar";
import Cart from "./Cart";
import BrandBar from "../components/BrandBar";
import RandomText from "@/components/RandomText";
export default {
  name: "PageHeader",
  components:{
    RandomText,
    Cart,
    MobileMenu,
    Logo,
    navBar,
    BrandBar,
  },
  computed:{
    /*goldPrice(){
      return this.$store.state.config.price;
    }*/
  },
  mounted() {
    /*-------------------------------------------------------------------------------
    Sticky Header
    -------------------------------------------------------------------------------*/
    var header = $(".can-sticky");
    var headerHeight = header.innerHeight();

    function doSticky() {
      if (window.pageYOffset > headerHeight) {
        header.addClass("sticky");
      } else {
        header.removeClass("sticky");
      }
    }
    doSticky();
    //On scroll events
    $(window).on('scroll', function() {
      doSticky();
    });
  },
  methods:{
    toggleMobile(){
      const asside = document.querySelector(".main-aside");
      const body = document.querySelector("body");
      asside.classList.toggle('open')
      body.classList.toggle('aside-open')
    }
  }

}
</script>

<style >
.random-text{
  transition: all 0.3s ease-in-out;
  display: none;
}
.main-header.sticky .random-text{
  display: block;
}
</style>