<template>
  <PageHeader />
  <main>
    <Navigationbar />
    <section id="content">
      <section id="content-header">
        <pre id="page-name">Pagename</pre>
      </section>
      <section id="content-body">
        <!--<slot />-->
      </section>
    </section>
    <Actionbar />
  </main>
</template>


<script>
import PageHeader from "./PageHeader.vue";
import Navigationbar from "./Navigationbar.vue";
import Actionbar from "./Actionbar.vue";

export default {
    name: "Page",
    components: {
      PageHeader, 
      Navigationbar,
      Actionbar,
    }
}

</script>
  
  
  
<style>

  * {
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #212121;
  }
  
  main {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
    padding: 10px 25px 10px 10px;
  }
  
  #content {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    padding: 0 20px;
  }
  
  #content-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
  }
  #page-name {
    color: #fff;
    letter-spacing: 1.2px;
    font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
      sans-serif;
  }

  #content-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #2c2c2c;
  }

  slot {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    padding: 20px 30px;
  }
  
</style>