<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> <div class="links" :style="linksWrapMaxWidth ? { 'max-width': linksWrapMaxWidth + 'px' } : {}" > <NavLinks class="can-hide" /> <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" /> <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" /> </div> </header> </template> <script> import AlgoliaSearchBox from "@AlgoliaSearchBox"; import SearchBox from "@SearchBox"; import SidebarButton from "@theme/components/SidebarButton.vue"; import NavLinks from "@theme/components/NavLinks.vue"; export default { components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox }, data() { return { linksWrapMaxWidth: null }; }, mounted() { const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, "paddingLeft")) + parseInt(css(this.$el, "paddingRight")); const handleLinksWrapWidth = () => { if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) { this.linksWrapMaxWidth = null; } else { this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING - ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0); } }; handleLinksWrapWidth(); window.addEventListener("resize", handleLinksWrapWidth, false); }, computed: { algolia() { return ( this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {} ); }, isAlgoliaSearch() { return this.algolia && this.algolia.apiKey && this.algolia.indexName; } } }; function css(el, property) { // NOTE: Known bug, will return 'auto' if style value is 'auto' const win = el.ownerDocument.defaultView; // null means not to return pseudo styles return win.getComputedStyle(el, null)[property]; } </script> <style lang="stylus"> $navbar-vertical-padding = 0.7rem; $navbar-horizontal-padding = 1.5rem; .navbar { padding: $navbar-vertical-padding $navbar-horizontal-padding; line-height: $navbarHeight - 1.4rem; background: $navbar-background; a, span, img { display: inline-block; } .logo { height: $navbarHeight - 3.1rem; margin-right: 0.2rem; vertical-align: middle; } .site-name { font-size: 1.3rem; font-weight: 600; color: $textColor; position: relative; } .links { // padding-left: 1.5rem; box-sizing: border-box; background-color: $navbar-background; white-space: nowrap; font-size: 0.95rem; position: absolute; right: $navbar-horizontal-padding; top: $navbar-vertical-padding; display: flex; .search-box { padding-left: 1.5rem; flex: 0 0 auto; vertical-align: middle; } } } @media (max-width: $MQMobile) { .navbar { padding-left: 4rem; .can-hide { display: none; } .links { padding-left: 1.5rem; } } } </style>