vue模仿twitter写一个自己的博客——头部导航栏

这个头部导航主要是写一个menu-item组件，hover时底部的蓝色底边动画弹出。再将logo扣出精灵图。
MenuItem：

<template>
  <div class="menu-item-wrap" @click="push">
    <div class="top">{{title}}</div>
    <div class="bottom">
      <div class="blue"></div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class extends Vue {
  @Prop()
  private title!: string;
  @Prop()
  private to!: string;
  private push() {
    this.$router.push(this.to);
  }
}
</script>
<style scoped lang="scss">
.menu-item-wrap {
  height: 100%;
  width: 80px;
  .top {
    height: 90%;
    text-align: center;
    line-height: 42px;
    color: $twitter-font;
    font-weight: bold;
  }
  .bottom {
    height: 10%;
    position: relative;
    .blue {
      background-color: $twitter-blue;
      height: 0px;
      width: 80px;
      transition: height 0.1s;
      bottom: 0px;
      position: absolute;
    }
  }
}
:hover {
  cursor: pointer;
}
:hover > .bottom > .blue {
  height: 2px;
}
:hover > .top {
  color: $twitter-blue;
}
</style>

扣精灵图可以看俺的这篇文章
https://blog.csdn.net/weixin_42565137/article/details/97620252

效果展示：

项目地址

https://github.com/pppercyWang/twitter-blog-vue