github.com/System-Glitch/goyave/v2@v2.10.3-0.20200819142921-51011e75d504/docs_src/src/.vuepress/theme/components/Navbar.vue (about)

     1  <template>
     2    <header class="navbar">
     3      <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
     4      <router-link :to="$localePath" class="home-link">
     5        <img
     6          v-if="$site.themeConfig.logo"
     7          class="logo"
     8          :src="$withBase($site.themeConfig.logo)"
     9          :alt="$siteTitle"
    10        />
    11        <span
    12          v-if="$siteTitle"
    13          ref="siteName"
    14          class="site-name"
    15          :class="{ 'can-hide': $site.themeConfig.logo }"
    16        >{{ $siteTitle }}</span>
    17      </router-link>
    18      <div class="links" :style="linksWrapMaxWidth ? { 'max-width': linksWrapMaxWidth + 'px' } : {}">
    19        <UserSettings />
    20        <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
    21        <SearchBox
    22          v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
    23        />
    24        <NavLinks class="can-hide" />
    25      </div>
    26    </header>
    27  </template>
    28  
    29  <script>
    30  import AlgoliaSearchBox from "@AlgoliaSearchBox";
    31  import SearchBox from "@SearchBox";
    32  import SidebarButton from "@parent-theme/components/SidebarButton.vue";
    33  import NavLinks from "@parent-theme/components/NavLinks.vue";
    34  import UserSettings from "@theme/components/settings/UserSettings.vue";
    35  
    36  function css(el, property) {
    37    // NOTE: Known bug, will return 'auto' if style value is 'auto'
    38    const win = el.ownerDocument.defaultView;
    39    // null means not to return pseudo styles
    40    return win.getComputedStyle(el, null)[property];
    41  }
    42  
    43  export default {
    44    components: {
    45      SidebarButton,
    46      NavLinks,
    47      SearchBox,
    48      AlgoliaSearchBox,
    49      UserSettings
    50    },
    51    data() {
    52      return {
    53        linksWrapMaxWidth: null
    54      };
    55    },
    56    computed: {
    57      algolia() {
    58        return (
    59          this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
    60        );
    61      },
    62      isAlgoliaSearch() {
    63        return this.algolia && this.algolia.apiKey && this.algolia.indexName;
    64      }
    65    },
    66    mounted() {
    67      const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
    68      const NAVBAR_VERTICAL_PADDING =
    69        parseInt(css(this.$el, "paddingLeft")) +
    70        parseInt(css(this.$el, "paddingRight"));
    71      const handleLinksWrapWidth = () => {
    72        if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
    73          this.linksWrapMaxWidth = null;
    74        } else {
    75          this.linksWrapMaxWidth =
    76            this.$el.offsetWidth -
    77            NAVBAR_VERTICAL_PADDING -
    78            ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
    79        }
    80      };
    81      handleLinksWrapWidth();
    82      window.addEventListener("resize", handleLinksWrapWidth, false);
    83    }
    84  };
    85  </script>
    86  
    87  <style lang="stylus">
    88  $navbar-vertical-padding = 0.7rem;
    89  $navbar-horizontal-padding = 1.5rem;
    90  
    91  .navbar {
    92    padding: $navbar-vertical-padding $navbar-horizontal-padding;
    93    line-height: $navbarHeight - 1.4rem;
    94  
    95    a, span, img {
    96      display: inline-block;
    97    }
    98  
    99    .logo {
   100      height: $navbarHeight - 1.4rem;
   101      min-width: $navbarHeight - 1.4rem;
   102      margin-right: 0.8rem;
   103      vertical-align: top;
   104    }
   105  
   106    .site-name {
   107      font-size: 1.3rem;
   108      font-weight: 600;
   109      color: $textColor;
   110      position: relative;
   111    }
   112  
   113    .links {
   114      padding-left: 1.5rem;
   115      box-sizing: border-box;
   116      background-color: white;
   117      white-space: nowrap;
   118      font-size: 0.9rem;
   119      position: absolute;
   120      right: $navbar-horizontal-padding;
   121      top: $navbar-vertical-padding;
   122      display: flex;
   123  
   124      .search-box {
   125        flex: 0 0 auto;
   126        vertical-align: top;
   127      }
   128    }
   129  }
   130  
   131  @media (max-width: $MQMobile) {
   132    .navbar {
   133      padding-left: 4rem;
   134  
   135      .can-hide {
   136        display: none;
   137      }
   138  
   139      .links {
   140        padding-left: 1.5rem;
   141      }
   142  
   143      .site-name {
   144        width: calc(100vw - 9.4rem);
   145        overflow: hidden;
   146        white-space: nowrap;
   147        text-overflow: ellipsis;
   148      }
   149    }
   150  }
   151  </style>