<template>
  <header class="header">
    <div>
      <router-link to="/" class="h-left">BLOG</router-link>
    </div>
    <div class="menu">
      <ul>
        <li>
          <router-link to="/">
            <el-icon class="m-icon"><House /></el-icon>首页
          </router-link>
        </li>
        <li>
          <router-link to="/tags">
            <el-icon class="m-icon"><PriceTag /></el-icon>标签
          </router-link>
        </li>
        <li>
          <router-link to="/categories">
            <el-icon class="m-icon"><Collection /></el-icon>分类
          </router-link>
        </li>
        <li>
          <router-link to="/archives">
            <el-icon class="m-icon"><Files /></el-icon>归档
          </router-link>
        </li>
        <li>
          <router-link to="/about">
            <el-icon class="m-icon"><User /></el-icon>关于我
          </router-link>
        </li>
        <div class="bottom-strip"></div>
      </ul>
    </div>
    <div class="mobile-menu" @click="mobileShow">
      <svg-icon name="menu"></svg-icon>
    </div>
  </header>
  <!-- 移动端展示 -->
  <el-drawer v-model="mobileDrawer" size="60%" :show-close="false" :with-header="false">
    <h1 class="drawer-header">BLOG</h1>
    <div class="drawer-menu">
      <router-link to="/">
        <el-icon class="drawer-menu-icon"><House /></el-icon>首页
      </router-link>
      <router-link to="/tags">
        <el-icon class="drawer-menu-icon"><PriceTag /></el-icon>标签
      </router-link>
      <router-link to="/categories">
        <el-icon class="drawer-menu-icon"><Collection /></el-icon>分类
      </router-link>
      <router-link to="/archives">
        <el-icon class="drawer-menu-icon"><Files /></el-icon>归档
      </router-link>
      <router-link to="/about">
        <el-icon class="drawer-menu-icon"><User /></el-icon>关于我
      </router-link>
    </div>
  </el-drawer>
</template>

<script setup>
import { House, PriceTag, Collection, Files, User } from '@element-plus/icons-vue'
import { ref } from 'vue'

const mobileDrawer = ref(false)

const mobileShow = () => {
  mobileDrawer.value = true
}
// onMounted(() => {
//   // 监听滚动条位置
//   window.addEventListener('scroll', scrollTop, true)
// })

// // 实时滚动条高度
// const scrollTop = () => {
//   const scroll = document.documentElement.scrollTop || document.body.scrollTop
//   if (scroll > 0) {
//     menu.value.style.backgroundColor = '#fff'
//     menu.value.style.boxShadow = '0px 2px #eee'
//   } else {
//     menu.value.style.backgroundColor = 'rgba(0, 0, 0, 0)'
//     menu.value.style.boxShadow = 'none'
//   }
// }
</script>

<style lang="scss" scoped>
.header {
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  z-index: 999;
  transition-duration: 0.7s;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.h-left {
  width: 60%;
  font: 100 30px '优设标题黑';
  color: #eee;
}
.menu {
  // width: 100%;
  height: 50px;
  position: relative;
  top: 0;
  & ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  & ul li {
    width: 100%;
    text-align: center;
    list-style: none;
  }
  & ul li a {
    color: #eee;
    font: 100 20px '优设标题黑';
    display: block;
    width: 100%;
    height: 100%;
    margin-right: 30px;
  }
  & ul .bottom-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc((100% / 5) * 1);
    height: 5px;
    border-radius: 2px;
    transition: 0.45s;
  }
  & ul li:nth-child(1):hover ~ .bottom-strip {
    left: calc(100% / 5 * 0);
    background-color: rgb(250, 190, 250);
  }
  & ul li:nth-child(2):hover ~ .bottom-strip {
    left: calc(100% / 5 * 1);
    background-color: red;
  }
  & ul li:nth-child(3):hover ~ .bottom-strip {
    left: calc(100% / 5 * 2);
    background-color: #d18df8;
  }
  & ul li:nth-child(4):hover ~ .bottom-strip {
    left: calc(100% / 5 * 3);
    background-color: #ffb1b1;
  }
  & ul li:nth-child(5):hover ~ .bottom-strip {
    left: calc(100% / 5 * 4);
    background-color: #8da1f8;
  }
}
.mobile-menu {
  display: none;
}
.drawer-header {
  text-align: center;
  margin-bottom: 20px;
}
.drawer-menu {
  & a {
    display: block;
    padding: 10px 10px;
    font-size: 18px;
  }
  .drawer-menu-icon {
    margin-right: 1.2em;
    vertical-align: -0.13em;
  }
}

@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}
</style>
