  <template>
  <div v-resize="checkActiveCategory">
   
    <v-app-bar
      v-if="heroData && newUser"
      flat
      :class="
        pageName() == 'HomePage' &&
        heroBanner &&
        headerPromoBanner &&
        headerPromoBanner.active
          ? 'header-top-margin transparent-background'
          : 'transparent-background'
      "
      absolute
      :color="'rgba(0,0,0,0.0)'"
      elevation="0"
      fixed
    >
      <v-system-bar class="transparent-background mt-3" fixed>
        <v-spacer></v-spacer>
        <v-menu
          offset-y
          down
          allow-overflow
          v-if="userAuth"
          :disabled="isScrolled"
        >
          <template v-slot:activator="{ on }">
            <v-btn
              icon
              v-on="on"
              :class="textColor"
              class="d-none d-md-block header-buttons"
              :max-width="$vuetify.display.mdOnly ? '35px' : ''"
            >
              <div class="text-uppercase">Hi {{ userName }}</div>
            </v-btn>
          </template>
          <v-card elevation="0" tile>
            <v-list dense flat>
              <v-list-item>
                <v-list-item-title
                  @click="goToDashboard()"
                  class="cursor-pointer"
                  >My Account</v-list-item-title
                >
              </v-list-item>
              <v-list-item>
                <v-list-item-title @click="goToLogout()" class="cursor-pointer"
                  >Logout</v-list-item-title
                >
              </v-list-item>
            </v-list>
          </v-card>
        </v-menu>

        <v-hover v-slot:default="{ isHoovering, props }" v-if="!userAuth">
          <v-btn
          v-bind="props"
            icon
            @click="goToLogin()"
            class="d-none d-md-block header-buttons"
            :max-width="$vuetify.display.mdOnly ? '35px' : ''"
          >
            <v-icon
              v-if="pageName() == 'CategoryPage'"
              :class="isHoovering ? 'header-category-icon' : 'text-primary'"
              >mdi-account-circle-outline</v-icon
            >
            <v-icon v-else :class="isHoovering ? 'text-primary' : 'text-white'"
              >mdi-account-circle-outline</v-icon
            >
          </v-btn>
        </v-hover>

        <v-hover v-slot:default="{ isHoovering, props }">
          <v-btn
          v-bind="props"
            icon
            :class="
              isHoovering ? 'text-primary' : textColor ? textColor : 'text-white'
            "
            @click="showSearchInput = true"
            class="d-none d-md-block header-buttons"
            :max-width="$vuetify.display.mdOnly ? '35px' : ''"
          >
            <v-icon
              v-if="pageName() == 'CategoryPage'"
              :class="isHoovering ? 'header-category-icon' : 'text-primary'"
              >mdi-magnify</v-icon
            >
            <v-icon v-else :class="isHoovering ? 'text-primary' : 'text-white'"
              >mdi-magnify</v-icon
            >
          </v-btn>
        </v-hover>

        <v-navigation-drawer
          v-model="showSearchInput"
          v-if="showSearchInput"
          absolute
          right
          color="#ffffff"
          :width="searchInputWidth"
          height="56"
        >
  
          <v-text-field
            v-model="search"
            autofocus
            clearable
            single-line
            label="Search"
            solo
            type="text"
            class="header-search-field"
            @blur="showSearchInput = false"
            v-on:keyup.enter="GotoPage"
          >
            <template v-slot:append>
              <v-icon @click="GotoPage()" class="text-primary"
                >mdi-magnify</v-icon
              >
            </template>
          </v-text-field>
        </v-navigation-drawer>
       
        <v-hover v-slot:default="{ isHovering, props }">
          <v-btn
          v-bind="props"
            icon
            :class="
              isHovering ? 'text-primary' : textColor ? textColor : 'text-white'
            "
            class="header-buttons"
            @click.stop="showCartDrawer(true)"
            :max-width="$vuetify.display.mdOnly ? '35px' : ''"
          >
            <v-icon
              v-if="pageName() == 'CategoryPage'"
              :class="isHovering ? 'header-category-icon' : 'text-primary'"
              >mdi-cart-outline</v-icon
            >
            <v-icon v-else :class="isHovering ? 'text-primary' : 'text-white'"
              >mdi-cart-outline</v-icon
            >
            <span v-if="cartProductsProgress || inProgress">
              <v-progress-circular
                :size="20"
                color="primary"
                :width="2"
                indeterminate
              ></v-progress-circular>
            </span>
            <span v-else>
              <v-badge
                class="mb-4"
                v-show="cartProductsItem.length"
                color="pink"
                :content="cartProductsItem.length"
              ></v-badge>
            </span>
          </v-btn>
        </v-hover>
      </v-system-bar>
      <NavigationDrawerComponent
        @actionShowMessage="showMessage"
        @actionPageMessage="pageMessage"
      ></NavigationDrawerComponent>
      <v-app-bar-nav-icon class="d-md-none"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <v-img
        v-if="pageName() == 'CategoryPage'"
         :src="craneLogoBlue"
        max-height="44"
        max-width="146"
        contain
        @click="goToHomePage()"
        class="mt-md-11 cursor-pointer"
      ></v-img>
      <v-img
        v-else
        craneLogoWhite
        max-height="44"
        max-width="146"
        contain
        @click="goToHomePage()"
        class="mt-md-11 cursor-pointer"
      ></v-img>
      <v-spacer></v-spacer>
       
    </v-app-bar>
    
    <v-app-bar
      height="56"
      :absolute="!isScrolled"
      :app="isScrolled"
      :color="
        isScrolled || isHovering ? 'header-background-white' : 'rgba(0,0,0,0.0)'
      "
      elevation="0"
      v-else-if="pageName() == 'CheckoutPage'"
    >
      <v-spacer></v-spacer>
      <v-img
        v-if="!isScrolled"
       craneLogoWhite
        max-width="100"
        @click="goToHomePage()"
        class="cursor-pointer"
        contain
        aspect-ratio="1"
      ></v-img>
      <v-img
        v-if="isScrolled"
        :src="craneLogoBlue"
        max-width="100"
        class="cursor-pointer"
        @click="goToHomePage()"
        contain
        aspect-ratio="1"
      ></v-img>
      <v-spacer></v-spacer>
    </v-app-bar>
    <v-hover v-else v-slot:default="{ isHovering, props }">
      <v-app-bar
      v-bind="props"
        height="56"
        :class="
          pageName() == 'HomePage' &&
          heroBanner &&
          headerPromoBanner &&
          headerPromoBanner.active
            ? 'header-top-margin'
            : ''
        "
        :absolute="!isScrolled"
        :app="isScrolled"
        :color="
          isScrolled || isHovering ? 'header-background-white' : 'rgba(0,0,0,0.0)'
        "
        elevation="0"
      >
        <v-col class="d-flex justify-start pa-0">
          <v-app-bar-nav-icon
            @click.stop="menuAction()"
            :class="textColor"
            class="d-md-none header-menu-button ml-n3 pl-1"
            :color="
              isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
            "
          ></v-app-bar-nav-icon>
          <v-img
            v-if="!isScrolled && !isHovering"
            :src="craneLogoWhite"
            max-width="100"
            @click="goToHomePage()"
            class="cursor-pointer d-none d-md-flex ml-6"
            contain
            aspect-ratio="1"
          ></v-img>
          <v-img
            v-else-if="(isScrolled && !isHovering) || isHovering"
             :src="craneLogoBlue"
            max-width="100"
            class="cursor-pointer d-none d-md-flex ml-6"
            @click="goToHomePage()"
            contain
            aspect-ratio="1"
          ></v-img>
        </v-col>
        <v-col class="d-flex justify-center">
          <v-img
            v-if="!isScrolled && !isHovering"
            craneLogoWhite
            max-width="100"
            @click="goToHomePage()"
            class="cursor-pointer d-md-none"
            contain
            aspect-ratio="1"
          ></v-img>
          <v-img
            v-else-if="(isScrolled && !isHovering) || isHovering"
            :src="craneLogoBlue"
            max-width="100"
            class="cursor-pointer d-md-none"
            @click="goToHomePage()"
            contain
            aspect-ratio="1"
          ></v-img>
           
        </v-col>
        <v-col class="d-flex justify-end pr-0">
          <v-toolbar-items>
            <v-menu offset-y down allow-overflow v-if="userAuth">
              <template v-slot:activator="{ on }">
                <v-btn
                  icon
                  v-on="on"
                  :class="textColor"
                  :color="
                    isHovering && !isScrolled
                      ? 'primary'
                      : isScrolled
                      ? 'primary'
                      : ''
                  "
                  class="d-none d-md-block header-buttons mr-6"
                  :max-width="$vuetify.display.mdOnly ? '35px' : ''"
                >
                  <div class="text-uppercase">Hi {{ userName }}</div>
                </v-btn>
              </template>
              <v-card elevation="0" tile flat>
                <v-list dense flat>
                  <v-list-item>
                    <v-list-item-title
                      @click="goToDashboard()"
                      class="cursor-pointer"
                      >My Account</v-list-item-title
                    >
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-title
                      @click="goToLogout()"
                      class="cursor-pointer"
                      >Logout</v-list-item-title
                    >
                  </v-list-item>
                </v-list>
              </v-card>
            </v-menu>
            <v-btn
              v-if="!userAuth"
              icon
              :color="
                isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
              "
              @click="goToLogin()"
              :class="textColor"
              class="d-none d-md-block header-buttons"
              :max-width="$vuetify.display.mdOnly ? '35px' : ''"
            >
              <v-icon class="header-action-icons"
                >mdi-account-circle-outline</v-icon
              >
            </v-btn>

            <v-btn
              icon
              :color="
                isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
              "
              @click="showSearchInput = true"
              :class="textColor"
              class="d-none d-md-block header-buttons"
              :max-width="$vuetify.display.mdOnly ? '35px' : ''"
            >
              <v-icon class="header-action-icons">mdi-magnify</v-icon>
            </v-btn>

            <!--<v-btn
            v-show="pageName() !== 'CartProducts'"
            icon
            :class="textColor"
            class="header-buttons"
            @click="categoryProducts('10')"
            :max-width="this.$vuetify.display.mdOnly? '35px':''"
          >
            <v-icon>mdi-shopping-outline</v-icon>
            </v-btn>-->
            <div class="test">
              <v-btn
                v-show="pageName() !== 'CartProducts'"
                icon
                :class="textColor"
                :color="
                  isHovering && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
                "
                class="header-buttons mr-n2"
                @click.stop="showCartDrawer(true)"
                :max-width="$vuetify.display.mdOnly ? '35px' : ''"
              >
                <v-icon class="header-action-icons">mdi-cart-outline</v-icon>

                <span v-if="cartProductsProgress || inProgress">
                  <v-progress-circular
                    :size="20"
                    color="primary"
                    :width="2"
                    indeterminate
                  ></v-progress-circular>
                </span>
                <span v-else>
                  <v-badge
                    class="mb-4"
                    v-show="cartProductsItem.length"
                    color="pink"
                    :content="cartProductsItem.length"
                  ></v-badge>
                </span>
              </v-btn>
              <NavigationDrawerComponent
                @actionShowMessage="showMessage"
                @actionPageMessage="pageMessage"
              ></NavigationDrawerComponent>
            </div>
            <v-navigation-drawer
              v-model="showSearchInput"
              v-if="showSearchInput"
              absolute
              right
              color="#ffffff"
              :width="searchInputWidth"
              height="56"
            >
              
              <v-text-field
                v-model="search"
                autofocus
                clearable
                single-line
                label="Search"
                solo
                type="text"
                class="header-search-field"
                @blur="showSearchInput = false"
                v-on:keyup.enter="GotoPage"
              >
                <template v-slot:append>
                  <v-icon @click="GotoPage()" class="text-primary"
                    >mdi-magnify</v-icon
                  >
                </template>
              </v-text-field>
            </v-navigation-drawer>
          </v-toolbar-items>
        </v-col>
      </v-app-bar>
    </v-hover>
    {{ snackbarFlag }}
    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
  </div>
</template>
<script>
/* eslint-disable */

import SubMenu from "@/components/layout/sub-menu/SubMenu.vue";
import NavigationDrawerComponent from "@/components/layout/header/NavigationDrawerComponent.vue";
import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
import { doFetchCatelogProducts } from "@/services/product.service";
import HeaderPromoBanner from "@/components/layout/header/HeaderPromoBanner.vue";
import {
  customAttributeValueNew,
//  googleAanalyticsEventCategory,
  getCategoryOne,
  goToCategoryPageRouting,
} from "@/services/util.service";
import humps from "lodash-humps";
import craneLogoBlue from "@/assets/Crane_Logo_blue.png";
import craneLogoWhite from "@/assets/Crane_Logo_white.png";
export default {
  name: "Header",
  components: {
    SubMenu,
    NavigationDrawerComponent,
    SnackbarComponent,
    HeaderPromoBanner,
  },
  props: ["offsetTop", "heroData"],
  data: () => ({
     craneLogoBlue: craneLogoBlue,
    craneLogoWhite: craneLogoWhite,
    blockId: "30",
    heroBanner: true,
    //subMenu: "",
    activeCategoryMenu: "",
    showMenu: false,
    pageNo: 1,
    defaultWidth: 400,
    pageSize: 9,
    sortSelect: { label: "Position", value: "position" },
    snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0,
    },
    search: null,
    number: "",
    searchResultList: [],
    searchInProgress: false,
    lookupCatelog: null,
    showSearchInput: false,
  }),
  watch: {
    lookupCatelog: {
      handler: function (newVal) {
        clearTimeout(this.lookupCatelogProductTimeoutId);
        this.lookupCatelogProductTimeoutId = setTimeout(async () => {
          try {
            if (!newVal) this.searchResultList = [];
            else {
              this.searchInProgress = true;
              let results = await doFetchCatelogProducts(newVal);
              if (results != null) {
                this.searchResultList = humps(results);
              } else {
                this.searchResultList = [];
              }
              this.searchInProgress = false;
            }
          } catch (error) {
            this.searchResultList = [];
          }
        }, 500);
      },
    },
    categoryId() {
      if (!this.categoryId) {
        localStorage.removeItem("cr_subCategoryItemId");
        localStorage.removeItem("cr_subCategoryId");
        localStorage.removeItem("cr_mainCategoryId");
      }
    },
  },

  computed: {
    /* checkLogedIn() {
      return true;
    },*/
    snackbarFlag() {
      if (this.$store.state.userCartProduct.autoLogoutFlag) {
        this.showMessage({
          message: "Your session has expired please login again.",
          color: "error",
          show: true,
          timeout: 5000,
        });
      }
      return "";
    },
    cartProductsProgress: function () {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.cartProductsProgress;
      } else {
        return '';
      }
    },
    inProgress: function () {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.inProgress;
      } else {
        return '';
      }
    },
    isDesktop: function () {
      return this.$vuetify.display.xsOnly ? true : false;
    },

    newUser() {
      if (this.$vuetify.display.smAndDown) return false;
      let userVisits = this.$store.state.layout.user.userVisits;
      if (userVisits && Number(userVisits) > 1) return false;
      else return true;
    },

    searchInputWidth() {
      return this.$vuetify.display.xsOnly ? "100%" : "256";
    },
    isScrolled: function () {
      let pagePath = this.$route.path;
      let isGateModulePage = pagePath.includes("/gate/");
      if (isGateModulePage) {
        return this.offsetTop > 30 ? true : false;
      }
      if (!this.heroData || this.pageName() === "CategoryPage") return true;

      return this.offsetTop > 30 ? true : false;
    },
    textColor: function () {
      let pagePath = this.$route.path;
      let isGateModulePage = pagePath.includes("/gate/");
      if (isGateModulePage) {
        return "text-white";
      }
      if (!this.heroData) return "content-color";

      if (this.offsetTop > 30) return "content-color";
      else return "text-white";
    },
    userAuth: function () {
      return this.$store.state.auth.userAuth;
    },
    
    cartProductsItem() {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.cartProductList;
      } else {
        return ''
      }
    },

    /*sku: function() {
      return this.cartProductsItem.items.map(obj => obj.sku).find(obj => obj);
    },*/
    userName: function () {
      return this.$store.state.accountOne.one.firstname;
    },
    categoryList: function () {
      return this.$store.state.headerCategoryList.categoryList;
    },
    headerPromoBanner: function () {
      let cmsBlockContent = this.$store.state.layout.cmsBlockContent;

      if (cmsBlockContent.length) {
        let data = cmsBlockContent.filter((element) => {
          return element.identifier === "header-promo-banner";
        })[0];

        if (data) return data;
        else return null;
      }
      return null;
    },
    subMenuItem: {
      get: function () {
        return this.$store.state.headerCategoryList.categoryId;
      },
      set: function () {},
    },
    categoryId() {
      return this.$route.meta.id;
    },
    categoryDetailsList: function () {
      return this.$store.state.headerCategoryList.categoryDetails;
    },
  },
  methods: {
    pageMessage() {
      this.snackbar = {
        message: "Updated Product View",
        color: "success",
        show: true,
        timeout: 3000,
      };
    },
    /* eslint-disable no-alert, no-console ,  no-debugger */

    inside: function (e) {
      console.log("clicked inside!", e);
    },
    onActionScroll() {
      this.$emit("actionScroll");
    },
    pageName() {
      return this.$route.name;
    },
    menuAction: function () {
      this.$emit("action", {
        showMenu: !this.showMenu,
        categoryList: this.categoryList,
        activeCategoryMenu: this.activeCategoryMenu,
        subMenuItem: this.subMenuItem,
      });
    },
    showCartDrawer(flag) {
      if (this.userAuth) {
        this.$store.dispatch("userCartProduct/cartDrawer", flag);
      }  
    },

    showMessage(obj) {
      this.snackbar = {
        show: obj.show,
        message: obj.message,
        color: obj.color,
        timeout: obj.timeout,
      };
    },
    goToDashboard() {
      window.open("/b2b", "_self");
    },
    goToLogin() {
      localStorage.removeItem("cr_mainCategoryId");
      localStorage.removeItem("cr_subCategoryItemId");
      window.open("/gate/sign-in", "_self");
    },
    goToLogout() {
      localStorage.removeItem("cr_checkOutTab");
      let pagePath = this.$route.path;
      let isGateModulePage = pagePath.includes("/gate/");
      if (isGateModulePage) {
        window.open("/logout-success", "_self");
      } else {
        this.$router.push({
          name: "LogOutSuccess",
        });
      }
    },
    goToHomePage() {
      alert('hello')
      window.open("/", "_self");
    },
    async inactiveCategoryMenu(data) {
      this.activeCategoryMenu = data.mainMenu;
      this.$store.dispatch(
        "headerCategoryList/setCategoryId",
        data.subMenuItem
      );
      localStorage.setItem("cr_mainCategoryId", data.mainMenu);
      localStorage.setItem("cr_subCategoryItemId", data.subMenuItem);
      localStorage.setItem("cr_subCategoryId", data.subMenu);
      if (data.subMenuItem) {
        if (this.categoryDetailsList) {
          let categoryOne = await getCategoryOne(
            this.categoryDetailsList,
            data.subMenuItem
          );
          if (categoryOne) {
            this.$store.dispatch("layout/setHeroContent", categoryOne);
            let path = this.getCustomAttributeValue(categoryOne.ca, "url_path");
            console.log(categoryOne.n, categoryOne);
            let pagePath = this.$route.path;
            let isGateModulePage = pagePath.includes("/gate/");
            if (isGateModulePage) {
              window.open(`/${path}`, "_self");
            } else {
              let vm = this;
              goToCategoryPageRouting(vm, categoryOne);
            }
          }
        }
      }
    },
    activeCategories() {
      if (this.categoryId) {
        let Category = localStorage.getItem("cr_mainCategoryId");
        let subCategory = localStorage.getItem("cr_subCategoryItemId");
        if (Category && subCategory) {
          this.activeCategoryMenu = Category;
          this.$store.dispatch("headerCategoryList/setCategoryId", subCategory);
        } else if (Category) {
          this.activeCategoryMenu = Category;
        } else {
          let subMenuItem = "";
          this.activeCategoryMenu = localStorage.getItem("cr_mainCategoryId");
          this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
        }
      } else {
        localStorage.removeItem("cr_mainCategoryId");
        localStorage.removeItem("cr_subCategoryItemId");
        localStorage.removeItem("cr_subCategoryId");
      }
    },
    checkActiveCategory() {
      let Category = localStorage.getItem("cr_mainCategoryId");
      let subCategory = localStorage.getItem("cr_subCategoryItemId");
      if (Category && subCategory) {
        this.activeCategoryMenu = Category;
        this.$store.dispatch("headerCategoryList/setCategoryId", subCategory);
      } else {
        let subMenuItem = "";
        this.activeCategoryMenu = localStorage.getItem("cr_mainCategoryId");
        this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
      }
    },
    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValueNew(customAttributes, attributeCode);
    },
    async categoryProducts(categoryId) {
      if (this.categoryDetailsList) {
        let categoryOne = await getCategoryOne(
          this.categoryDetailsList,
          categoryId
        );
        if (categoryOne) {
          this.$store.dispatch("layout/setHeroContent", categoryOne);
          let path = this.getCustomAttributeValue(categoryOne.ca, "url_path");
          this.activeCategoryMenu = categoryId;
          console.log(categoryOne.n, categoryOne);
         /* googleAanalyticsEventCategory(
            "browse_category",
            "ecommerce",
            categoryDetails
          );*/
          localStorage.setItem("cr_mainCategoryId", categoryId);
          localStorage.removeItem("cr_subCategoryItemId");
          localStorage.removeItem("cr_subCategoryId");
          let subMenuItem = "";
          this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
          this.$emit("actionScroll");
          let pagePath = this.$route.path;
          let isGateModulePage = pagePath.includes("/gate/");
          if (isGateModulePage) {
            window.open(`/${path}`, "_self");
          } else {
            let vm = this;
            goToCategoryPageRouting(vm, categoryOne);
          }
          this.$store
            .dispatch("catalogBrowser/search", {
              fullCatalog: window.craneCatalog,
              keywords: "",
              filters: [{ label: "Category", prop: "ci", value: categoryId }],
              pageNumber: 1,
              pageSize: 9,
              sortBy: "position",
            })
            .catch((error) => {
              error;
            });
        }
      }
    },
    GotoPage() {
      if (this.search) {
        // this.search = null;
        this.showSearchInput = false;
        this.searchResultList = [];
        let searchKeywords = this.search;
        let pagePath = this.$route.path;
        let isGateModulePage = pagePath.includes("/gate/");
        if (isGateModulePage) {
          window.open(
            `/search?pageNumber=1&pageSize=9&sortBy=relevance&q=${searchKeywords}&filter=W10=`,
            "_self"
          );
        } else {
          this.$router
            .push({
              name: "SearchPage",
              query: {
                pageNumber: 1,
                pageSize: 9,
                sortBy: "relevance",
                q: searchKeywords,
                filter: "W10=",
              },
            })
            .catch((error) => {
              error;
            });
          this.$store.dispatch("catalogBrowser/search", {
            fullCatalog: window.craneCatalog,
            keywords: searchKeywords,
            filters: [],
            pageNumber: 1,
            pageSize: 9,
            sortBy: "relevance",
          });
        }
        localStorage.removeItem("cr_subCategoryItemId");
        localStorage.removeItem("cr_subCategoryId");
        localStorage.removeItem("cr_mainCategoryId");
        this.search = null;
      }
    },
    closeBanner() {
      setTimeout(() => {
        this.heroBanner = true;
      }, 10000);
    },
  },
  created() {
    if (
      localStorage.getItem("cr_mainCategoryId") ||
      localStorage.getItem("cr_subCategoryItemId")
    ) {
      this.activeCategories();
    } else {
      localStorage.setItem("cr_mainCategoryId", this.categoryId);
      this.activeCategories();
    }
  },
};
</script>
<style src="./Header.scss" lang="scss" scopped/>