<template>
  <div class="page-layout-grid">
    <nav class="page-layout-grid--nav-area">
      <slot name="nav"></slot>
    </nav>
    <nav class="page-layout-grid--sidenav-area">
      <slot name="sidenav"></slot>
    </nav>
    <main class="page-layout-grid--main-area">
      <slot></slot>
    </main>
    <footer class="page-layout-grid--footer-area">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.page-layout-grid {
  display: grid;
  height: 100vh;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidenav nav"
    "sidenav main"
    "sidenav footer";
}

.page-layout-grid--sidenav-area {
  grid-area: sidenav;
}

.page-layout-grid--nav-area {
  grid-area: nav;
}

.page-layout-grid--main-area {
  grid-area: main;
  overflow-y: auto;
}

.page-layout-grid--footer-area {
  grid-area: footer;
}
</style>
