<script setup>
import { ref } from "vue";

let menuShow = ref(false);

function toggleMenu() {
  menuShow.value = !menuShow.value;
}
</script>

<template>
  <div class="d-flex justify-space-between align-center navbar">
    <router-link :to="'/'">
      <img src="@/assets/img/logo.png" alt="臺灣工藝學習平台" />
    </router-link>
    <ul class="menu d-md-flex align-center" :class="{ slider: menuShow }">
      <li>重要訊息</li>
      <li>
        <router-link :to="'/course-list'">探索課程</router-link>
      </li>
      <li>瀕危工藝</li>
      <li>知識文章</li>
      <li>
        <router-link :to="'/login'">學習者登入</router-link>
      </li>
      <li>EN</li>
      <li>
        <v-icon icon="mdi-magnify"></v-icon>
      </li>
      <li>
        <v-icon icon="mdi-menu"></v-icon>
      </li>
    </ul>

    <a href="javascript:;" class="icon" @click="toggleMenu()">
      <v-icon icon="mdi-menu" class="me-2"></v-icon>
    </a>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  padding: 0.625em 3.125em 0.625em 1.875em;
  border-top: 0.625em solid var(--main-color);

  @media (max-width: 1200px) {
    padding: 0.625em 1.25em 0.625em 0.625em;
  }

  img {
    width: 100%;
    max-width: 25em;
    margin-top: 0.3125em;
  }

  .menu {
    list-style: none;
    overflow: hidden;
    transition: height 0.3s ease-in-out;

    @media (max-width: 1200px) {
      height: 0;
      position: absolute;
      background: #fff;
      top: 5em;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &.slider {
      height: 17.8125em;
    }

    li {
      margin-left: 1.875em;
      font-weight: 500;

      @media (max-width: 1200px) {
        margin-left: 0;
        border-bottom: 0.0625em solid #f0f0f0;
        font-weight: 500;
        width: 100%;
        text-align: center;
        padding: 1.25em 0;
      }
      a {
        color: #000;
        text-decoration: none;
        transition: all 0.3s;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .icon {
    display: none;
    transition: all 0.3s;

    @media (max-width: 1200px) {
      display: block;
    }

    &:hover {
      opacity: 0.8;
    }

    .v-icon {
      font-size: 2rem;
    }
  }
}
</style>
