element-plus/docs/.vitepress/vitepress/components/vp-navbar.vue

<script setup lang="ts">
import { useData } from 'vitepress'

import VPNavbarSearch from './navbar/vp-search.vue'
import VPNavbarMenu from './navbar/vp-menu.vue'
import VPNavbarThemeToggler from './navbar/vp-theme-toggler.vue'
import VPNavbarTranslation from './navbar/vp-translation.vue'
import VPNavbarSocialLinks from './navbar/vp-social-links.vue'
import VPNavbarHamburger from './navbar/vp-hamburger.vue'
import { useFeatureFlag } from '../composables/feature-flag'

defineProps<{
  fullScreen: boolean
}>()

defineEmits(['toggle'])
const themeEnabled = useFeatureFlag('theme')

const { theme } = useData()
</script>

<template>
  <div class="navbar-wrapper">
    <div class="container">
      <div class="logo-container">
        <a href="/">
          <img
            class="logo"
            src="/images/element-plus-logo.svg"
            alt="Elemenet Plus Logo"
          />
        </a>
      </div>
      <div class="content">
        <VPNavbarSearch class="search" :options="theme.agolia" />
        <VPNavbarMenu class="menu" />
        <VPNavbarThemeToggler v-if="themeEnabled" class="theme-toggler" />
        <VPNavbarTranslation class="translation" />
        <VPNavbarSocialLinks class="social-links" />
        <VPNavbarHamburger
          :active="fullScreen"
          class="hamburger"
          @click="$emit('toggle')"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.logo-container {
  display: flex;
  align-items: center;
  height: var(--header-height);
  > a {
    height: 28px;
    width: 128px;
  }
  .logo {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>