<template>
  <header class="header">
    <div class="logo-wrap">
      <i class="icon-menu icli nav-bar" @click="toggleMenu"></i>
      <!-- <a href="###"> <img class="logo logo-w" src="@/assets/images/logo/logo-w.png" alt="logo" /></a> -->
      <a href="###"> 
        <img class="logo" src="@/assets/images/logo/logo_w.png" alt="logo" />
      </a>
    </div>
    <div class="avatar-wrap" @click="$router.push('/cart')">
      <!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
      <van-icon name="cart-o" :badge="cartStore.cartNum" />
    </div>
  </header>

  <!-- Sidebar Start -->
  <a href="javascript:void(0)" class="overlay-sidebar" :class="{show: showMenu}" @click="toggleMenu"></a>
  <aside class="header-sidebar" :class="{show: showMenu}">
    <div class="wrap">
      <!-- <div class="user-panel">
        <div class="media">
          <a href="account.html"> <img src="assets/images/avatar/avatar.jpg" alt="avatar" /></a>
          <div class="media-body">
            <a href="account.html" class="title-color font-sm"
              >Andrea Joanne
              <span class="content-color font-xs">andreajoanne@gmail.com</span>
            </a>
          </div>
        </div>
      </div> -->

      <!-- Navigation Start -->
      <nav class="navigation">
        <ul>
          <li>
            <a href="###" class="nav-link title-color font-sm">
              <i class="iconly-Home icli"></i>
              <span>首頁</span>
            </a>
            <a class="arrow" href="###"><i data-feather="chevron-right"></i></a>
          </li>

        </ul>
      </nav>
      <!-- Navigation End -->
    </div>

    <div class="contact-us">
      <span class="title-color">聯絡我們</span>
      <p class="content-color font-xs">如果您有任何問題，立即聯絡我們</p>
      <a href="javascript:void(0)" class="btn-solid"> LINE@客服 </a>
    </div>
  </aside>
  <!-- Sidebar End -->

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useCartStore } from '@/store/Cart'

const showMenu = ref(false)

function toggleMenu(){
showMenu.value = !showMenu.value
}

const cartStore = useCartStore()

</script>

<style lang="less" scoped>
.logo{
width: 100px !important;
}
</style>
