<script>
  import Footer from '../components/Footer.svelte';
  import Nav from '../components/Nav.svelte';
  import Sidebar from '../components/Sidebar.svelte';
  export let segment;
</script>

<style lang="scss">

  @import "sass/_variables";

  #main {
    display: flex;
    flex: 1 0 auto;
    min-height: 100vh;
    flex-direction: column;
    padding-left: 0px;
    padding-right: 0px;
    min-width: 340px;
    border: 1px solid darken($green, 10%) !important;
  }

  #main_content {
    flex-grow: 1;
  }
</style>

<div class="container grid-lg" id="main">
  <div class="columns" id="nav">
    <div class="column col-mx-auto">
      <Nav {segment} />
    </div>
  </div>

  <div class="container full-width" id="main_content">
    <div class="columns">
      <div class="column col-mx-auto">
        <div class="off-canvas">

          <div id="sidebar-id" class="off-canvas-sidebar">
            <Sidebar />
          </div>

          <a alt="Close sidebar" aria-label="Close sidebar" class="off-canvas-overlay" href="#close">&nbsp;</a>

          <div class="off-canvas-content">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Footer/>
</div>
