<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "style.scss";
</style>

<!-- Template -->
<!--<i class="fa fa-home"></i>-->

<template>
  <div class="component-container sidebar-component">
    <ul class="menu">
      <li class="menu-item">
        <span class="hover"></span>
        <i class="fa fa-dashboard"></i>
        <a href="javascript:void(0)">
          <span>DASHBOARD</span>
        </a>
        <i class="fa fa-angle-right"></i>

        <ul class="sub-menu sub-menu-col-2">
          <div class="sub-menu-col">
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD1</span>
              </a>
            </li>
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD2</span>
              </a>
            </li>
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD1</span>
              </a>
            </li>
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD2</span>
              </a>
            </li>
          </div>
          <div class="sub-menu-col">
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD1</span>
              </a>
            </li>
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD2</span>
              </a>
            </li>
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD1</span>
              </a>
            </li>
            <li class="menu-item">
              <span class="hover"></span>
              <a href="javascript:void(0)">
                <span>DASHBOARD2</span>
              </a>
            </li>
          </div>

        </ul>
      </li>

      <li class="menu-item">
        <span class="hover"></span>
        <i class="fa fa-home"></i>
        <a href="javascript:void(0)">
          <span>DASHBOARD</span>
        </a>
        <i class="fa fa-angle-right"></i>

        <ul class="sub-menu">
          <li class="menu-item">
            <span class="hover"></span>
            <a href="javascript:void(0)">
              <span>DASHBOARD1</span>
            </a>
          </li>
          <li class="menu-item">
            <span class="hover"></span>
            <a href="javascript:void(0)">
              <span>DASHBOARD2</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="menu-item">
        <span class="hover"></span>
        <i class="fa fa-home"></i>
        <a href="javascript:void(0)">
          <span>DASHBOARD</span>
        </a>
        <i class="fa fa-angle-right"></i>

        <ul class="sub-menu">
          <li class="menu-item">
            <span class="hover"></span>
            <a href="javascript:void(0)">
              <span>DASHBOARD1</span>
            </a>
          </li>
          <li class="menu-item">
            <span class="hover"></span>
            <a href="javascript:void(0)">
              <span>DASHBOARD2</span>
            </a>
          </li>
        </ul>
      </li>

      <li class="menu-item">
        <span class="hover"></span>
        <i class="fa fa-home"></i>
        <a href="javascript:void(0)">
          <span>DASHBOARD</span>
        </a>
        <i class="fa fa-angle-right"></i>

        <ul class="sub-menu">
          <li class="menu-item">
            <span class="hover"></span>
            <a href="javascript:void(0)">
              <span>DASHBOARD1</span>
            </a>
          </li>
          <li class="menu-item">
            <span class="hover"></span>
            <a href="javascript:void(0)">
              <span>DASHBOARD2</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';

  const _Sidebar = {
    name: 'Sidebar',
    created: function () {
    },
    updated: function () {
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      return {};
    },
    methods: {},
    components: {},
    computed: {
      ...mapGetters([])
    }
  };
  export default _Sidebar;
</script>
