happychin-web/components/TopHeader.vue

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

const { t, locale, setLocale } = useI18n()
const { $$t } = useStoreI18n()
const showLang = ref(false)
const langList = ref([
  { label: $$t('chinese'), value: 'zh' },
  { label: $$t('english'), value: 'en' }
])
const switchLanguage = (lang) => {
  setLocale(lang)
  showLang.value = !showLang.value
}

const langLabel = computed(() => {
  return langList.value.find((item) => item.value == locale.value)?.label
})
</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 zindex">
            <div class="logo">
              <NuxtLink to="/" class="header-logo">
                <img src="/picture/logo.svg" alt="logo-img" />
              </NuxtLink>
            </div>
            <div class="language d-flex justify-content-start align-items-center">
              <img src="/picture/grid.svg" alt="img" class="me-2" />

              <div class="w-100 d-flex justify-content-between align-items-center">
                {{ langLabel }}
                <i
                  :class="`fas cursor-pointer ${showLang ? 'fa-angle-up' : 'fa-angle-down'}`"
                  @click="showLang = !showLang"
                ></i>
              </div>
              <ul v-show="showLang" style="position: absolute" class="suLangangbmenu">
                <li
                  v-for="(item, index) in langList"
                  :key="item.value"
                  :class="`${locale == item.value ? 'liactive' : ''}`"
                  @click="switchLanguage(item.value)"
                >
                  {{ item.label }}
                </li>
              </ul>
            </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="/">
                        {{ t('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>{{ t('multiPage') }}</span>
                                  </a>
                                  <a href="/index-one" class="theme-btn">
                                    <span>{{ t('onePage') }}</span>
                                  </a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">{{ t('home01') }}</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>{{ t('multiPage') }}</span>
                                  </a>
                                  <a href="/index-two" class="theme-btn">
                                    <span>{{ t('onePage') }}</span>
                                  </a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">{{ t('home02') }}</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>{{ t('multiPage') }}</span>
                                  </a>
                                  <a href="/index-three" class="theme-btn">
                                    <span>{{ t('onePage') }}</span>
                                  </a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">{{ t('home03') }}</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>{{ t('multiPage') }}</span>
                                  </a>
                                  <a href="/index-four" class="theme-btn">
                                    <span>{{ t('onePage') }}</span>
                                  </a>
                                </div>
                              </div>
                              <div class="homemenu-content text-center">
                                <h4 class="homemenu-title">{{ t('home04') }}</h4>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul> -->
                    </li>
                    <!-- <li>
                      <a href="/about">{{ t('aboutUs') }}</a>
                      <a href="javascript:(0)">{{ t('aboutUs') }}</a>
                    </li>
                    <li>
                      <a href="/program/carousel">{{ t('programs') }}</a>
                      <a href="javascript:(0)">{{ t('programs') }}</a>
                    </li> -->
                    <li>
                      <a href="/contact">{{ t('contactUs') }}</a>
                      <!-- <a href="javascript:(0)">{{ t('contactUs') }}</a> -->
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<style lang="css" scoped>
.zindex {
  position: relative;
  z-index: 100;
}
select {
  outline: none;
}

option {
  outline: none;
}

.language {
  width: 160px;
  border-radius: 8px;
  border: 1px solid rgba(92, 112, 126, 0.3);
  padding: 10px 16px;
  position: relative;
  z-index: 99;
}

.suLangangbmenu {
  position: absolute;
  top: 100%;
  z-index: 11;
  width: 100%;
  background: var(--white);
  position: absolute;
  color: var(--header);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  inset-inline-start: 0;
  transform-origin: top center;
  transform: translateY(10px);
  transition: all 0.4sease-in-out;
}

.suLangangbmenu {
  position: absolute;
  top: 100%;
  z-index: 11;
  width: 100%;
  background: var(--white);
  position: absolute;
  color: var(--header);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  inset-inline-start: 0;
  transform-origin: top center;
  transform: translateY(10px);
  transition: all 0.4sease-in-out;
}

.suLangangbmenu li {
  width: 100%;

  box-sizing: border-box;
}

.suLangangbmenu li {
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
  padding: 6px 25px;
  width: 100%;
}

.suLangangbmenu li:hover {
  background: var(--theme);
  color: var(--white) !important;
}

.liactive {
  background: var(--theme);
  color: var(--white) !important;
}
</style>