happychin-web/components/TopHeader.vue

<script setup>
const porps = defineProps({
  headerClass: {
    type: String,
    default: 'header-1'
  }
})

const { t, locale, setLocale } = useI18n()

const switchLanguage = (event) => {
  let lang = event.target.value
  setLocale(lang)
}
</script>
<template>
  <header id="header-sticky" :class="headerClass">
    <div class="container-fluid">
      <div class="mega-menu-wrapper">
        <div class="header-main style-2">
          <div class="header-left">
            <div class="logo">
              <a href="" class="header-logo"><img src="/picture/logo.svg" alt="logo-img" /></a>
            </div>
            <div class="category-oneadjust d-flex justify-content-start align-items-center">
              <img src="/picture/grid.svg" alt="img" class="me-2" />
              <select
                @change="switchLanguage"
                name="cate"
                class="category bg-transparent border border-0 w-75"
              >
                <option class="border border-0" value="zh">
                  {{ t('chinese') }}
                </option>
                <option class="border border-0" value="en">
                  {{ t('english') }}
                </option>
              </select>
            </div>
          </div>
          <div class="header-right d-flex justify-content-end align-items-center">
            <div class="mean__menu-wrapper">
              <div class="main-menu">
                <nav id="mobile-menu">
                  <ul>
                    <li class="has-dropdown active menu-thumb">
                      <a href="/">
                        Home
                        <i class="fas fa-angle-down"></i>
                      </a>
                      <ul class="submenu has-homemenu">
                        <li>
                          <div class="homemenu-items">
                            <div class="homemenu">
                              <div class="homemenu-thumb">
                                <img src="/picture/home-1.jpg" alt="img" />
                                <div class="demo-button">
                                  <a href="/" class="theme-btn">
                                    <span>Multi Page</span>
                                  </a>
                                  <a href="/index-one" class="theme-btn">
                                    <span>One Page</span>
                                  </a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">Home 01</h4>
                              </div>
                            </div>
                            <div class="homemenu">
                              <div class="homemenu-thumb mb-15">
                                <img src="/picture/home-2.jpg" alt="img" />
                                <div class="demo-button">
                                  <a href="/index-2" class="theme-btn">
                                    <span>Multi Page</span>
                                  </a>
                                  <a href="/index-two" class="theme-btn"><span>One Page</span></a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">Home 02</h4>
                              </div>
                            </div>
                            <div class="homemenu">
                              <div class="homemenu-thumb mb-15">
                                <img src="/picture/home-3.jpg" alt="img" />
                                <div class="demo-button">
                                  <a href="/index-3" class="theme-btn">
                                    <span>Multi Page</span>
                                  </a>
                                  <a href="/index-three" class="theme-btn"><span>One Page</span></a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">Home 03</h4>
                              </div>
                            </div>
                            <div class="homemenu">
                              <div class="homemenu-thumb mb-15">
                                <img src="/picture/home-4.jpg" alt="img" />
                                <div class="demo-button">
                                  <a href="/index-4" class="theme-btn">
                                    <span>Multi Page</span>
                                  </a>
                                  <a href="/index-four" class="theme-btn">
                                    <span>One Page</span>
                                  </a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">Home 04</h4>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </li>
                    <li><a href="/about">About Us</a></li>
                    <li><a href="/program/carousel">Programs</a></li>
                    <li>
                      <a href="program-details.html">
                        Programs
                        <i class="fas fa-angle-down"></i>
                      </a>
                      <ul class="submenu">
                        <li><a href="/program">Programs Grid</a></li>
                        <li><a href="/program/carousel">Programs Carousel</a></li>
                        <li><a href="/program/detail">Programs Details</a></li>
                      </ul>
                    </li>
                    <li class="has-dropdown">
                      <a href="">
                        Pages
                        <i class="fas fa-angle-down"></i>
                      </a>
                      <ul class="submenu">
                        <li class="has-dropdown">
                          <a href="/event">
                            Event
                            <i class="fas fa-angle-down"></i>
                          </a>
                          <ul class="submenu">
                            <li><a href="/event">Event Grid</a></li>
                            <li><a href="/event/carousel">Event Carousel</a></li>
                            <li><a href="/event/detail">Event Details</a></li>
                          </ul>
                        </li>
                        <li class="has-dropdown">
                          <a href="/team">
                            Teacher
                            <i class="fas fa-angle-down"></i>
                          </a>
                          <ul class="submenu">
                            <li><a href="/team">Our Teacher</a></li>
                            <li><a href="/team/carousel">Teacher Carousel</a></li>
                            <li><a href="/team/detail">Teacher Details</a></li>
                          </ul>
                        </li>
                        <li><a href="/pricing">Pricing</a></li>
                        <li><a href="/faq">Faq's</a></li>
                        <!-- <li><a href="404.html">404 Page</a></li> -->
                      </ul>
                    </li>
                    <li>
                      <a href="/blog">
                        Blog
                        <i class="fas fa-angle-down"></i>
                      </a>
                      <ul class="submenu">
                        <li><a href="/blog">Blog Grid</a></li>
                        <!-- <li><a href="news.html">Blog List</a></li> -->
                        <li><a href="/blog/blog-carousel">Blog Carousel</a></li>
                        <li><a href="/blog/detail">Blog Details</a></li>
                      </ul>
                    </li>
                    <li>
                      <a href="/contact">Contact Us</a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
            <!-- <div style="opacity: 0" href="#0" class="search-trigger search-icon">
              <i class="fal fa-search"></i>
            </div>
            <div style="opacity: 0" class="header-button">
              <div href="contact.html" class="theme-btn">
                <span>
                  get A Quote
                  <i class="fa-solid fa-arrow-right-long"></i>
                </span>
              </div>
            </div>
            <div class="header__hamburger d-xl-none my-auto">
              <div class="sidebar__toggle">
                <i class="fas fa-bars"></i>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<style lang="css" scoped>
select {
  outline: none;
}

option {
  outline: none;
}
</style>