<template>
  <div>
    <div class="side-bar">
      <router-link :to="{name: 'Home'}"><img src="/static/logo_light.png" class="main-logo"></router-link>
      <h3>Documentation</h3>
      <p><router-link :to="{name: 'Documentation'}">Documentation home</router-link></p>
      <p><router-link :to="{name: 'DocumentationQuickStart'}">Quick-start guide</router-link></p>
      <p><router-link :to="{name: 'DocumentationClient'}"><span class="code">dotty</span> tool reference</router-link></p>
      <p><router-link :to="{name: 'DocumentationRest'}">REST API reference</router-link></p>
      <hr>
      <h4>Get in touch</h4>
      <p>Please reach out to <u><a href="https://twitter.com/willwebberley" target="_blank">Will on Twitter</a></u> if you have any questions, problems or feedback.</p>
    </div>
    <div class="main-content">
      <router-view></router-view> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'documentationLayout',
  data() {
    return {
    };
  },
};

</script>

<style lang="scss">
@import "src/devices.scss";

.side-bar{
  position:fixed;
  width:300px;
  height:100%;
  left:0px;
  top:0px;
  padding:20px 10px;
  background: linear-gradient(to bottom, rgb(114, 190, 191), rgb(114, 191, 160));
  color:white;
  @include tablet{
    width:200px;
  }
  @include phone{
    display:none;
  }
  .main-logo{
    max-width:100%;
    max-height:60px;
    margin-bottom:50px;
  }
  a{
    color:white;
    &:hover{
      color: darken(white, 5%);
    }
  }
}
.main-content{
  padding-left:320px;
  padding-right:20px;
  @include tablet{
    padding-left:220px;
  }
  @include phone{
    padding:0px 20px;
  }
  h3{
    margin-top:40px;
  }
  h4{
    margin-top:30px;
    .code{
      padding:4px;
      background:rgb(240,240,240);
    }
  }
  .title{
    margin-bottom:60px;
    padding-bottom:10px;
    border-bottom:1px solid rgb(220,220,220);
  }
  .code{
    font-family: 'Courier', 'Monospace';
  }
  .code-block{
    background:rgb(240,240,240);
    border:2px solid rgb(220,220,220);
    border-radius:3px;
    padding:10px;
    margin:10px 5px;
    font-family: 'Courier', 'Monospace';
  }
}
</style>
