vue-ptc/src/components/nav-bar/index.vue

<template>
  <div :class="['nav-bar', { 'nav-bar--fixed': fixed }]">
    <div class="nav-bar-left">
      <div class="nav-icons">
        <i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
        <router-link class="icon-logo" to="/"></router-link>
        <i v-if="showNavIcons" class="icon-mine" @click="showMine = true"></i>
      </div>
      <transition
        v-if="showNavIcons"
        enter-active-class="fadeIn"
        leave-active-class="fadeOut"
      >
        <div v-show="showMenu" class="nav-menu nav-links">
          <div class="nav-menu-header">
            <i class="logo"></i>
            <i class="close" @click="showMenu = false"></i>
          </div>
          <div class="nav-menu-body">
            <ul class="nav-links-inner">
              <li class="nav-link">
                <router-link to="/appointment">REPAIR BOOKING</router-link>
              </li>
              <li class="nav-link">
                <router-link to="/fill-order">ONLINE SHOP</router-link>
              </li>
              <li class="nav-link">PTC Care Plus</li>
              <li class="nav-link">SOTRE LOCATION</li>
              <li class="nav-link">CONTACT US</li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <div v-if="showNavIcons" class="nav-bar-right">
      <div class="user flex-ac" @click="showMine = !showMine">
        <i class="icon-mine"></i>
        <span class="user-name">Rebecca</span>
      </div>
      <div class="contact">
        <i class="icon-phone"></i>
        <div>
          <p class="tel">400-100-100</p>
          <p class="time">Mon-Fri &nbsp;9:00-17:00</p>
        </div>
      </div>
    </div>
    <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
      <div
        v-show="showMine"
        class="nav-menu nav-dropdown"
        :class="{ 'is-member': 1 }"
      >
        <div class="nav-menu-header">
          <i class="logo"></i>
          <i class="close" @click="showMine = false"></i>
        </div>
        <div class="nav-menu-body">
          <div class="info">
            <div class="p1">
              <p class="name">Hi, Rebecca</p>
              <p class="intro">Ordinary member</p>
            </div>
            <div v-if="0" class="p2">
              <p class="txt">You have not purchased a member</p>
              <button class="btn">BUY</button>
            </div>
            <div v-else class="p3">
              <div class="txt">
                $10 off for additional services |
                <strong class="primary">Buy now ></strong>
              </div>
              <div class="swiper">
                <div class="swiper-item">
                  <div class="service">
                    <div class="service-title">
                      <i class="service-icon icon-lite"></i>
                      <div class="service-type">Lite</div>
                      <div class="service-period">2021/09/01 to 2022/08/31</div>
                    </div>
                    <div class="service-model tac">iPhone 12</div>
                    <div class="service-code tac">QWERTYUIO12345678</div>
                  </div>
                </div>
              </div>
              <div class="pagination">
                <i class="dot active"></i>
                <i class="dot"></i>
                <i class="dot"></i>
              </div>
            </div>
          </div>
          <div class="role" @click="$router.push('/account')">
            {{ 1 ? 'Pro  Member >' : 'Ordinary  Member >' }}
          </div>
          <ul class="dropdown-list">
            <li class="dropdown-item">
              <router-link to="/appointment-list"
                >MY REPAIR REQUEST</router-link
              >
            </li>
            <li class="dropdown-item">
              <router-link to="/order">MY ORDER</router-link>
            </li>
            <li class="dropdown-item">
              <router-link to="/gift-card">MY DISCOUNT COUPON</router-link>
            </li>
            <li class="dropdown-item">
              <router-link to="/invite"
                >INVITE FRIENDS
                <span class="ptc-tag">Get a $10 coupon</span></router-link
              >
            </li>
            <li class="dropdown-item">
              <router-link to="/account">ACCOUNT INFORMATION</router-link>
            </li>
            <li class="dropdown-item">SIGN OUT</li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

interface Props {
  showNavIcons?: boolean
  fixed?: boolean
}

defineProps<Props>()

const route = useRoute()
const showMenu = ref(false)
const showMine = ref(false)

watch(
  () => route.fullPath,
  () => {
    showMenu.value = showMine.value = false
  }
)
</script>

<style lang="scss">
:root {
  --nav-bar-height: 118px;
  @include media-breakpoint-up(md) {
    --nav-bar-height: 148px;
  }
  @include media-breakpoint-up(lg) {
    --nav-bar-height: 168px;
  }
}

.nav-bar {
  height: var(--nav-bar-height);
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
  &--fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  &-left {
    @include media-breakpoint-up(md) {
      display: flex;
      align-items: center;
    }
  }
  &-right {
    display: none;
    flex-shrink: 0;
    @include media-breakpoint-up(md) {
      display: flex;
      align-items: center;
      margin-left: 100px;

      .user .icon-mine {
        display: block;
        margin-right: 8px;
        width: 32px;
        height: 32px;
      }
      .user-name {
        font-size: 32px;
        font-weight: 600;
        color: $primary-color;
      }
      .contact {
        position: relative;
        display: none;
        margin-left: 30px;
        padding-left: 32px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 72px;
          background: #dae1ef;
        }
      }
      .tel {
        line-height: 44px;
        font-size: 32px;
        font-weight: 600;
        color: $primary-color;
      }
      .time {
        line-height: 44px;
        font-size: 32px;
        font-weight: 500;
        color: #999;
      }
    }
    @media (min-width: 1400px) {
      .contact {
        display: flex;
        align-items: center;
      }
    }
  }

  .nav-icons {
    box-sizing: content-box;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: var(--nav-bar-height);
  }
  .icon-menu {
    @include icon('@img/menu.png', 44px);
  }
  .icon-mine {
    @include icon('@img/user.png', 44px);
  }
  .icon-logo {
    @include icon('@img/logo.png', 130px, 70px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .icon-phone {
    @include icon('@img/phone.png', 76px);
    margin-right: 26px;
  }

  @include media-breakpoint-up(md) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    .icon-menu,
    .icon-mine {
      display: none;
    }
    .icon-logo {
      position: static;
      margin-right: 32px;
      transform: none;
    }
  }
  @include media-breakpoint-up(lg) {
    padding: 0 120px;
    .icon-logo {
      margin-right: 126px;
      width: 207px;
      height: 99px;
    }
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    &-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--nav-bar-height);

      .logo {
        @include icon('@img/logo.png', 130px, 70px);
      }
      .close {
        @include icon('@img/close.png', 44px);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 40px;
      }
    }

    &-body {
      flex: 1;
      overflow: auto;
    }
  }
  .nav-links {
    background: $primary-color;
    @include media-breakpoint-up(md) {
      display: block !important;
      position: static;
      background: none;
      .nav-menu-header {
        display: none;
      }
    }
    .logo {
      background-image: url(@img/logo2.png);
      transform: scale(1.03);
    }
    .close {
      background-image: url(@img/close2.png);
    }
  }
  .nav-dropdown {
    background: #fff;

    @include media-breakpoint-up(md) {
      left: auto;
      right: 20px;
      bottom: auto;
      top: var(--nav-bar-height);
      margin-top: 2px;
      box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
      z-index: 2;

      .nav-menu-header,
      .info,
      .ptc-tag {
        display: none;
      }
      .dropdown-list {
        margin-top: 0;
      }
    }
    @media (min-width: 1400px) {
      right: 520px;
    }
  }

  .nav-links-inner {
    margin-top: 36px;
    line-height: 144px;
    font-size: 40px;
    font-weight: 600;
    color: #fff;

    @include media-breakpoint-up(md) {
      display: flex;
      margin-top: 0;
      font-size: 28px;
      font-weight: 400;
      line-height: 44px;
      color: #193059;
    }
    @include media-breakpoint-up(lg) {
      font-size: 32px;
    }
  }
  .nav-link {
    padding-left: 196px;
    background-color: $primary-color;
    transition: background-color 0.3s ease;
    &:active {
      background-color: $primary-color-lighten;
    }
    @include media-breakpoint-up(md) {
      padding-left: 0;
      background-color: #fff !important;
      + .nav-link {
        margin-left: 48px;
      }
    }
    @include media-breakpoint-up(lg) {
      + .nav-link {
        margin-left: 64px;
      }
    }

    a {
      display: block;
      width: 100%;
    }
  }

  .info {
    margin: 20px auto 24px;
    width: 678px;
  }
  .p1 {
    padding: 48px 0 0 50px;
    height: 202px;
    color: $primary-color;
    background-color: #e9ebf0;
    background-repeat: no-repeat;
    background-size: 190px 190px;
    background-position: 446px 46px;
    background-image: url(@img/user-lg.png);
    border-radius: 8px 8px 0px 0px;

    .name {
      font-size: 48px;
      font-weight: 600;
    }
    .intro {
      margin-top: 16px;
      font-size: 32px;
    }
  }
  .p2 {
    padding: 48px;
    height: 224px;
    border-radius: 0 0 8px 8px;
    border: 2px solid #e9ebf0;

    .txt {
      line-height: 44px;
      font-size: 32px;
      color: #333;
    }

    .btn {
      display: block;
      margin-top: 24px;
      width: 144px;
      height: 60px;
      font-size: 32px;
      font-weight: 600;
      color: #fff;
      background: $primary-color;
      border-radius: 8px;
      &:active {
        background: $primary-color-lighten;
      }
    }
  }
  .p3 {
    height: 436px;
    border-radius: 0 0 8px 8px;
    background: #e9ebf0;

    .txt {
      padding: 24px 36px 24px 48px;
      font-size: 30px;
      color: #333;
    }

    .swiper {
      padding-left: 44px;
    }
    .service {
      padding: 26px 18px;
      width: 526px;
      height: 266px;
      background: #ffffff;
      border-radius: 8px;
      &-title {
        display: flex;
        align-items: center;
        font-size: 28px;
      }
      &-icon {
        margin-right: 10px;
        width: 36px;
        height: 36px;
      }
      &-type {
        margin-right: 30px;
        font-weight: bold;
        color: $primary-color;
      }
      &-period {
        color: #90a0c0;
      }
      &-model {
        margin-top: 48px;
        font-size: 40px;
        font-weight: 600;
        text-align: center;
      }
      &-code {
        margin-top: 8px;
        font-size: 28px;
        text-align: center;
        color: #999;
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 32px;

      .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(26, 48, 89, 0.3);
        &.active {
          background: $primary-color;
        }
        + .dot {
          margin-left: 24px;
        }
      }
    }
  }

  .is-member {
    .p1,
    .role {
      color: #fff;
      background-color: $primary-color;
    }
    .p1 {
      background-image: url(@img/pro-lg.png);
      background-position: 446px 64px;
    }
  }

  .role {
    display: none;
    line-height: 80px;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: #193059;
    background-color: #e9ebf0;

    @include media-breakpoint-up(md) {
      display: block;
    }
  }
  .dropdown-list {
    margin-top: 24px;
  }
  .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 144px;
    line-height: 144px;
    font-size: 32px;
    color: #1a1a1a;
    background-color: #fff;
    background-position: 84px center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    @include media-breakpoint-up(md) {
      padding-left: 80px;
      padding-right: 24px;
      background-position: 24px center;
      font-size: 28px;
      line-height: 124px;
    }
    &:hover,
    &:active {
      background-color: #f2f5fb;
    }
    &:nth-child(1) {
      background-image: url(@img/m-repair.png);
    }
    &:nth-child(2) {
      background-image: url(@img/m-order.png);
    }
    &:nth-child(3) {
      background-image: url(@img/m-coupon.png);
    }
    &:nth-child(4) {
      background-image: url(@img/m-friend.png);
    }
    &:nth-child(5) {
      background-image: url(@img/m-info.png);
    }
    &:nth-child(6) {
      background-image: url(@img/m-exit.png);
    }

    a {
      display: block;
      width: 100%;
    }
  }
}
</style>