<template>
  <div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
    <side-bar
      :background-color="sidebarBackground"
      short-title="DSO"
      title="DSO Việt Nam"
    >
      <template slot="links">
        <sidebar-item
          :link="{
            name: 'Bảng điều kiển',
            icon: 'ni ni ni-tv-2 text-primary',
            path: '/dashboard'
          }"
        />
        <sidebar-item
          :link="{
            name: 'Quản lý nhân viên',
            icon: 'ni ni-single-02 text-info',
            path: '/user-manage'
          }"
        />
        <sidebar-group-item
          :link="{
            name: 'Cài đặt',
            icon: 'ni ni-settings text-red',
            id: 'navbar-role',
            children: [
              {
                name: 'Phân quyền',
                icon: 'ni ni-lock-circle-open text-gray',
                path: '/role-group'
              },
              {
                name: 'Cấu hình Mail',
                icon: 'ni ni-email-83 text-gray',
                path: '/email-config'
              }
            ]
          }"
        />
        <sidebar-item
          :link="{
            name: 'Quản lý quyền',
            icon: 'ni ni-circle-08 text-pink',
            path: '/manager-role'
          }"
        />
      </template>
    </side-bar>
    <div class="main-content bg-primary" :data="sidebarBackground">
      <dashboard-navbar></dashboard-navbar>

      <div @click="toggleSidebar">
        <slide-y-down-transition :duration="300">
          <router-view></router-view>
        </slide-y-down-transition>
        <content-footer v-if="!$route.meta.hideFooter"></content-footer>
      </div>
    </div>
  </div>
</template>
<script>
import DashboardNavbar from "./DashboardNavbar.vue";
import ContentFooter from "./ContentFooter.vue";
import { SlideYDownTransition } from "vue2-transitions";
export default {
  components: {
    DashboardNavbar,
    ContentFooter,
    SlideYDownTransition
  },
  data() {
    return {
      sidebarBackground: "vue" //vue|blue|orange|green|red|primary
    };
  },
  methods: {
    toggleSidebar() {
      if (this.$sidebar.showSidebar) {
        this.$sidebar.displaySidebar(false);
      }
    }
  }
};
</script>
<style lang="scss"></style>
