<template>
    <div class="side_t side">
        <div class="logo mb25"><img src="../../resources/img/logo2.png" alt=""></div>
        <div class=" mb30">
            <div>
                <img src="../../resources/img/img16_s.png" alt="">
                <div class="mt10" style="width: 100%;">
                    <p class="name mb10">선생님</p>
                    <p class="mb5">xx중학교</p>
                    
                </div>                
            </div>
            <hr>
            <div class="mb10">
                <span @click="increaseProgress">평균 학습 진행률</span>
                <span class="brown ">{{ progress }}%</span>
            </div>
            <progress-bar :progress="progress"></progress-bar>
            <hr>
        </div>
        <div class="side-menu">
           <div>
                <details>
                    <summary>반 관리
                    </summary>
                    <router-link to="/Home.page" class="tpt">홈</router-link>
                    <router-link to="/Board.page" class="tpt">게시판</router-link>
                    <router-link to="/StudentList.page" class="tpt">학생목록</router-link>
                    <router-link to="/C_Textbook.page" class="tpt">교재</router-link>
                </details>
           </div>
            <div>
                <details>
                    <summary>교재 관리</summary>
                    <router-link to="/textbook.page" class="tpt">홈</router-link>
                    <router-link to="/Board.page" class="tpt">게시판</router-link>
                    <router-link to="/Board.page" class="tpt">학생목록</router-link>
                    <router-link to="/Board.page" class="tpt">교재</router-link>
                </details>
            </div>
        </div>
    </div>
</template>
 
<script>
import ProgressBar from '../component/ProgressBar.vue';

export default {
    data () {
        return {
            progress: 20
        }
    },
    methods: {
        increaseProgress() {
      if (this.progress < 100) {
        this.progress += 10;
      }
    }

    },
    watch: {

    },
    computed: {

    },
    components: {
    ProgressBar
  },
    mounted() {
        console.log('Menu mounted');
    }
}
</script>