<template>
  <header class="header-box d-flex justify-content-between align-items-center">
    <b-navbar class="h-100 flex-grow-1 flex-sm-grow-0 pb-0" toggleable="lg">
      <b-navbar-brand href="/"  class="mr-md-5 mr-0">
        <img src="~assets/image/logo.png" width="265px" alt="">
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-md-5 text-center">
          <b-nav-item 
            class="nav-link-item d-flex align-items-center" 
            href="/" 
            v-for="item in menuList"
            :key="item"
          >
            {{ item }}
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

    <b-nav-form class="d-none d-md-block">
      <div class="search-box">
        <img class="search-icon" src="~assets/image/icon/search.png" alt="search" />
        <b-form-input 
          class="search-input"
          v-model="searchVal"
          placeholder="SEARCH"
        >
        </b-form-input>
      </div>
    </b-nav-form>
  </header>
</template>

<script>
export default {
  data() {
    return {
      searchVal: '',
      menuList: ['Home','About Us','Products','News','Exhibition','Contact Us','Feedback']
    }
  },
}
</script>

<style lang="scss" scoped>
.header-box {
  width: 100%;
  height: 5.75rem;
  padding: 0 1.9375rem;
  .navbar-nav {
    z-index: 99;
  }
  .navbar-collapse, .navbar-nav {
    height: 100%;
    @mixin activeNav {
      &:hover {
        position: relative;
        color: #015fe8;
        background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: .125rem;
          background: #015fe8;
        }
        a {
          color: #015fe8;
        }
      }
    }
    .nav-link-item {
      padding: 0 1.4375rem;
      a {
        color: #151516;
      }
      @include activeNav;
    }
    .active-item {
      @include activeNav;
    }
  }
  .search-box {
    position: relative;
    .search-icon {
      width: 1rem;
      height: 1rem;
      position: absolute;
      top: 50%;
      left: 1rem;
      transform: translateY(-50%);
    }
    .search-input {
      width: 7.5rem;
      height: 2.75rem;
      padding-left: 2.5rem;
      border-color: #015fe8;
      border-radius: 1.375rem;
      &::placeholder {
        color: #015fe8;
      }
    }
  }
  @media screen and (max-width: 400px) {
    .nav-item {
      background-color: rgba(0,0,0,0.6);
      border-bottom: 1px solid #FFFFFF;
      a {
        color: #FFFFFF !important;
      }
    }
  }

  .nav-item {
    z-index: 99;
  }
}
</style>
