90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<header class="navbar">
|
||
|
|
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
|
||
|
|
<slot></slot>
|
||
|
|
|
||
|
|
<!-- <img -->
|
||
|
|
<!-- class="logo" -->
|
||
|
|
<!-- v-if="$site.themeConfig.logo" -->
|
||
|
|
<!-- :src="$withBase($site.themeConfig.logo)" -->
|
||
|
|
<!-- :alt="$siteTitle" -->
|
||
|
|
<!-- > -->
|
||
|
|
<!-- <span -->
|
||
|
|
<!-- class="site-name" -->
|
||
|
|
<!-- v-if="$siteTitle" -->
|
||
|
|
<!-- :class="{ 'can-hide': $site.themeConfig.logo }" -->
|
||
|
|
<!-- >{{ $siteTitle }}</span> -->
|
||
|
|
<!-- </router-link> -->
|
||
|
|
|
||
|
|
<!-- <div class="links"> -->
|
||
|
|
<!-- <AlgoliaSearchBox -->
|
||
|
|
<!-- v-if="isAlgoliaSearch" -->
|
||
|
|
<!-- :options="algolia" -->
|
||
|
|
<!-- /> -->
|
||
|
|
<!-- <SearchBox v-else-if="$site.themeConfig.search !== false"/> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
</header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import SidebarButton from './vuepress/SidebarButton.vue'
|
||
|
|
// import AlgoliaSearchBox from '@AlgoliaSearchBox'
|
||
|
|
// import SearchBox from './SearchBox.vue'
|
||
|
|
// import NavLinks from './NavLinks.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { SidebarButton }, // NavLinks, SearchBox, AlgoliaSearchBox },
|
||
|
|
|
||
|
|
// computed: {
|
||
|
|
// algolia () {
|
||
|
|
// return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
||
|
|
// },
|
||
|
|
|
||
|
|
// isAlgoliaSearch () {
|
||
|
|
// return this.algolia && this.algolia.apiKey && this.algolia.indexName
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
|
||
|
|
@import './vuepress/styles/config.less';
|
||
|
|
|
||
|
|
.navbar {
|
||
|
|
padding: 0.7rem 1.5rem;
|
||
|
|
line-height: calc(var(--navbarHeight - 1.4rem));
|
||
|
|
position: fixed; // relative;
|
||
|
|
a, span, img {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.logo {
|
||
|
|
height: calc(var(--navbarHeight) - 1.4rem);
|
||
|
|
min-width: calc(var(--navbarHeight) - 1.4rem);
|
||
|
|
margin-right: 0.8rem;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
.site-name {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--NvTClr);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.links {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
position: absolute;
|
||
|
|
right: 1.5rem;
|
||
|
|
top: 0.7rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: @MQMobile) {
|
||
|
|
.navbar {
|
||
|
|
padding-left: 4rem;
|
||
|
|
.can-hide {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|