<template>
    <div class="side">
        <div class="logo mb25"><img src="../../resources/img/logo2.png" alt=""></div>
        <div class="profile mb30">
            <div class="flex align-start">
                <img src="../../resources/img/img16_s.png" alt="">
                <div class="ml25" style="width: 100%;">
                    <p class="name mb10">학생이름</p>
                    <p class="mb5">xx중학교 3학년 x반</p>
                    <progress-bar :progress="progress"></progress-bar>
                    <span @click="increaseProgress">오늘의 공부</span>
                    <span class="brown ml10">{{ progress }}%</span>
                </div>                
            </div>
            <hr>
            <p class="title2 mb25">최근 학습 히스토리</p>
            <ul class="flex justify-between ml30">
                <li>자학사 3학년 2학기</li>
                <li>자학사 3학년 2학기</li>
            </ul>
        </div>
        <div class="ask mb30">
            <p class="title1 mb15">선생님께 질문 있어요~</p>

            <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요."></textarea></div>
            <div class="flex justify-end"><button>질문하기</button></div>
        </div>
        <div class="btn-wrap flex justify-between">
            <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오답노트</p></button>
            <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>
        </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>