| <template> |
| <header class="navbar"> |
| <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/> |
| |
| <router-link |
| :to="$localePath" |
| class="home-link" |
| > |
| <img |
| class="logo" |
| v-if="$site.themeConfig.logo" |
| :src="$withBase($site.themeConfig.logo)" |
| :alt="$siteTitle" |
| > |
| </router-link> |
| <span class="version"> |
| <a class="version-bg" :href="$site.themeConfig.versionLink"> |
| <img src="./version-bg.svg" :alt="$site.themeConfig.version"> |
| <span class="version-no">{{$site.themeConfig.version}}</span> |
| </a> |
| </span> |
| |
| <div class="links"> |
| <AlgoliaSearchBox |
| v-if="isAlgoliaSearch" |
| :options="algolia" |
| /> |
| <SearchBox v-else-if="$site.themeConfig.search !== false"/> |
| |
| <NavLinks class="can-hide"/> |
| |
| <!-- repo link --> |
| <a |
| v-if="repoLink" |
| :href="repoLink" |
| class="repo-link" |
| target="_blank" |
| rel="noopener noreferrer" |
| > |
| <img class="github-icon" src="./github.svg" alt="github"> |
| </a> |
| </div> |
| </header> |
| </template> |
| |
| <script> |
| import SidebarButton from './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 |
| }, |
| |
| repoLink () { |
| const { repo } = this.$site.themeConfig |
| if (repo) { |
| return /^https?:/.test(repo) |
| ? repo |
| : `https://github.com/${repo}` |
| } |
| }, |
| } |
| } |
| </script> |
| |
| <style lang="stylus"> |
| @import './styles/config.styl' |
| |
| .navbar |
| padding 0.7rem 1.5rem |
| line-height $navbarHeight - 1.4rem |
| position relative |
| a, span, img |
| display inline-block |
| .logo |
| height $navbarHeight - 1.4rem |
| min-width $navbarHeight - 1.4rem |
| margin-right 10px |
| vertical-align top |
| .site-name |
| font-size 1.3rem |
| font-weight 600 |
| color $textColor |
| position relative |
| .version |
| position relative |
| .version-bg |
| position absolute |
| line-height 0 |
| top -6px |
| .version-no |
| position absolute |
| top 7.5px |
| left 8px |
| font-size 12px |
| transform scale(0.84) |
| color: #fff |
| .links |
| font-size 0.9rem |
| position absolute |
| right 1.5rem |
| top 0.7rem |
| display flex |
| justify-content center |
| .repo-link |
| width 2.2rem |
| height 2.2rem |
| margin-left 1.5rem |
| .github-icon |
| width 2.2rem |
| height 2.2rem |
| |
| @media (max-width: $MQMobile) |
| .navbar |
| padding-left 4rem |
| .can-hide |
| display none |
| .repo-link |
| display none |
| </style> |