<template>
    <div class="menu flex" style="gap: 30px;">
        <router-link to="/MyPlan.page">
          <button :class="{ active: activeButton === 'schedule' }" type="submit" @click="goToApp('schedule')">
            <p :class="{ active: activeButton === 'schedule' }">학습일정계획</p>
          </button>
        </router-link>
        <router-link to="/Dashboard.page">
          <button :class="{ active: activeButton === 'dashboard' }" type="submit" @click="goToApp('dashboard')">
            <p :class="{ active: activeButton === 'dashboard' }">Dashboard</p>
          </button>
        </router-link>
        <router-link to="/MyPage.page">
            <button :class="{ active: activeButton === 'mypage' }" type="submit" @click="goToApp('mypage')">
                <p :class="{ active: activeButton === 'mypage' }">마이페이지</p>
            </button>
        </router-link>
    </div>
  </template>
  
  <script>
  
  
  export default {
    props: {
      currentRoute: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        activeButton: '',
      };
    },
    methods: {

      goToApp(button) {
        this.activeButton = button;
      },

      // 홈 화면이면 모든 버튼을 비활성화
      updateActiveButton() {
        if (this.currentRoute === '/MyPlan.page') {
          this.activeButton = 'schedule';
        }
      }

    },
    watch: {
      currentRoute() {
        this.updateActiveButton();
      }
    },
    mounted() {
      this.updateActiveButton();
      console.log('Menu mounted');
    }
  };
  </script>
  
  <style>
  </style>
  