juggl/juggl-vue/src/components/layout/LayoutNavbarPrivate.vue

<template>
  <div>
    <header>
      <BaseContainer width="wide" center>
      <ul id="header-container">
        <li>
          <BaseLogo id="logo" size="normal"/>
        </li>
        <li class="right">
          <BaseUserDropdown/>
        </li>
      </ul>
      </BaseContainer>
    </header>
    <main>
      <BaseContainer width="medium" center>
        <slot />
      </BaseContainer>
    </main>
  </div>
</template>

<script>
import BaseContainer from "@/components/base/BaseContainer.vue";
import BaseLogo from "@/components/base/BaseLogo.vue";
import BaseUserDropdown from "@/components/base/BaseUserDropdown.vue";

export default {
  name: "LayoutNavbarPrivate",
  components: {
    BaseContainer,
    BaseLogo,
    BaseUserDropdown
  }
};
</script>

<style lang="sass" scoped>
@import '@/style/theme.sass'

header
  width: 100%
  position: fixed
  top: 0px
  box-shadow: 0px 0px 2rem 1rem #000D
  height: $navbar-height
  background-color: $background-primary

#header-container
  padding: 0px 20px
  margin: auto
  list-style: none
  line-height: navbar-height

  .right
    float: right

  *
    line-height: $navbar-height
    vertical-align: baseline
    display: inline-block

main
  padding: 0px 20px
  margin-top: 6rem

</style>