<script>
  import Footer from '../components/Footer.svelte';
  import Sidebar from '../components/Sidebar.svelte';
</script>

<style>
#main {
    display: flex;
    flex: 1 0 auto;
    min-height: 100vh;
    flex-direction: column;
    padding-left: 0px;
    padding-right: 0px;
    min-width: 340px;
}

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

<div class="container grid-xl full-width" id="main">
  <div class="columns" id="nav">
    <div class="column col-mx-auto">
    </div>
  </div>

  <div class="container full-width" id="main_content">
    <div class="columns">
      <div class="column col-mx-auto">
        <div class="off-canvas">
          <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
            ?¿
          </a>

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

          <a class="off-canvas-overlay" href="#close"></a>

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

  <Footer/>
</div>
