<template>
  <div>
    <header>
      <BaseContainer width="wide" center>
      <ul id="header-container">
        <li>
          <BaseLogo size="normal"/>
        </li>
        <!-- <li style="float: right">
          <input
            id="user-id"
            class="public hidden"
            type="text"
            placeholder="User ID"
          />
          <input
            id="api-key"
            class="public hidden"
            type="password"
            placeholder="API Key"
          />
          <button id="auth-btn" onclick="handleAuthBtn()">Log In</button>
        </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";

export default {
  name: "LayoutNavbarPrivate",
  components: {
    BaseContainer,
    BaseLogo
  }
};
</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

  img
    margin-top: 0.5rem
    height: 3rem
    width: auto

  *
    vertical-align: baseline
    display: inline-block

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

</style>
