}

 .menu a:first-child button.active {

   width: 252px;

   /* 마이페이지 활성화 이미지 */

 }

 }

 .menu a:last-child button.active {

   width: 259px;

   /* 학습일정계획 활성화 이미지 */

 }

 <template>

     <div class="menu flex" style="gap: 30px;">

         </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>

     </div>

   </template>

 <template>

     <div class="side">

         <div class="profile mb30">

             <div class="flex align-start">

                 <img src="../../resources/img/img16_s.png" alt="">

             </div>

             <hr>

             <p class="title2 mb25">최근 학습 히스토리</p>

                 <li>자학사 3학년 2학기</li>

                 <li>자학사 3학년 2학기</li>

             </ul>

             <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요."></textarea></div>

             <div class="flex justify-end"><button>질문하기</button></div>

         </div>

             <button class="login-btn" @click="handleClick" >

                 <img  src="../../resources/img/btn07_s.png" alt="">

                 <p>{{ buttonText }}</p>

             </button>

             <button  class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>

     </div>

 </template>

             titleMessage: '', // 타이틀 메시지 변수

             dataList: [],

             currentPage: 0,

             totalPosts: 0,

             searchType: 'text', // 검색 종류를 저장할 변수

             searchQuery: '' // 검색어를 저장할 변수