<template>
  <section class="navigation">
    <LazyHydrate when-visible>
      <contact-bar />
    </LazyHydrate>
    <menu-bar />
  </section>
</template>
<script>
import contactBar from "./navigation_contact_bar";
import menuBar from "./navigation_menu_bar";
import LazyHydrate from "vue-lazy-hydration";

export default {
  name: "NavigationBar",
  components: {
    contactBar,
    menuBar,
    LazyHydrate
  }
};
</script>
<style lang="scss" scoped>
.navigation {
  height: $navigation-bar-height;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  will-change: transform;
  z-index: $navigation-bar-z-index;
}
</style>