<template>
  <div>
    <div class="bg-secondary shadow">
      <nav class="navbar px-2 container">
        <router-link class="d-flex btn" to="/">
          <div class="d-none d-sm-flex header-title flex-column justify-content-center">
            <b>spot2gether</b>
            <div>music connects</div>
          </div>
        </router-link>
        <div>
          <router-link
            v-if="!$api.isAuthorized()"
            to="/auth"
            class="btn btn-outline-dark"
          >
            login
          </router-link>
        </div>
      </nav>
    </div>
    <div class="container my-5">
      <main>
        <router-view />
      </main>
    </div>
  </div>
</template>

<style lang="scss">
@import "main.scss";

nav {
  a {
    font-weight: bold;

    &.router-link-exact-active {
      text-decoration: underline;
    }
  }
}
</style>
