<template>
  <div class="app">
    <div class="pt-4 pb-3 px-4 app-header">
      <img src="https://pajak.io/wp-content/uploads/2023/04/logo-pajakio.a94f1be-2.svg" alt="logo-pajakio">
    </div>
    <div class="flex">
      <navigation-menu />
      <router-view class="mx-8 mt-1 main-content" />
    </div>
  </div>
</template>

<script>
import NavigationMenu from "@/components/ComponentsLayout/NavigationMenu";

export default {
  components: {
    NavigationMenu
  }
};
</script>

<style lang="scss">
.app {
  .main-content {
    width: calc(100% - 286px);
    max-height: calc(100vh - 102px);
    overflow: auto;
  }

  .app-header {
    box-shadow: 0 1px 8px #e4e4e4;
  }
}

#nav {
  padding: 30px;
  flex-wrap: wrap;

  a {
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
