<template>
  <div class="courselist-view">
    <CourseList :class="{ 'hide-sidebar': this.$store.getters.getSidebarisOpen == false}" />
    <CourseContent :class="{'course-content-span': this.$store.getters.getSidebarisOpen == false}"/>
  </div>
</template>

<script>

import CourseList from "./CourseList";
import CourseContent from "./CourseContent";

export default {
  name: "CourseListView",
  components: {
    CourseList,
    CourseContent,
  },
  data() {
    return {
      
      MyNo: "",
      MyName: this.$t('studentWeb.courseList-title'),
    };
  },

  methods: {},

  created() {
    this.$emit("onNavNo", this.MyNo);
    this.$emit("onNavName", this.MyName);
    this.$store.commit("ToggleSidebar", true);
  },
};
</script>

<style scoped>
.hide-sidebar * {
  width: 0px !important;
  transition: ease-out 0.3s;
}
.courselist-view{
  overflow: hidden;
}
.course-content-span{
  padding: 2% 15%;
  width: 100% !important;
  transition: 0.5s;
}

</style>