mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
d8954f945e
* chore: make eslints work in docs folder * refactor(dev): improve eslint * fix eslint issue Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useData, inBrowser } from 'vitepress'
|
|
|
|
import { useFeatureFlag } from '../composables/feature-flag'
|
|
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'
|
|
|
|
defineProps<{
|
|
fullScreen: boolean
|
|
}>()
|
|
|
|
defineEmits(['toggle'])
|
|
const themeEnabled = useFeatureFlag('theme')
|
|
|
|
const { theme } = useData()
|
|
|
|
const currentLink = computed(() => {
|
|
if (!inBrowser) return '/'
|
|
const existLangIndex = theme.value.langs.findIndex((lang) =>
|
|
window?.location?.pathname.startsWith(`/${lang}`)
|
|
)
|
|
|
|
return existLangIndex === -1 ? '/' : `/${theme.value.langs[existLangIndex]}/`
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="navbar-wrapper">
|
|
<div class="container">
|
|
<div class="logo-container">
|
|
<a :href="currentLink">
|
|
<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>
|