<template>

    <div class="vh-100 nav-bar">
      <nav role="main" class="w-100 tl">
        <ul class="center pv5 ph5">
          <li class="db v-mid mb3 text-gray">My Folders</li>
          <li class="db v-mid mb3 text-gray">Shared with me</li>
          <li class="db v-mid mb3 text-gray">From Canvas8</li>
          <li class="db v-mid mb3 text-gray">Sent</li>
          <li class="db v-mid mb3 text-gray">Archive</li>
        </ul>
      </nav>
    </div>


</template>

<script>

export default {
  components: {
    MainNav
  },
  name: 'main-nav',
  data () {
    return {
      welcomeMessage: 'Main Navigation'
    }
  },
  computed: {
    products() {
      return this.$store.state.products;
    },
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>

.nav-bar{
  background-color: #f7f7f7;
  width: 250px;
}

</style>