Commit @72b518a7626e0e40f4dc3d56e1f24753972181d3

박정하 06-30

250630 박정하 현재 페이지(router) 자동으로 감지해 사이드메뉴에 open 설정 하도록 수정

@72b518a7626e0e40f4dc3d56e1f24753972181d3

4da0534

72b518a

client/views/pages/Manager/attendance/attendance.vue

--- client/views/pages/Manager/attendance/attendance.vue

+++ client/views/pages/Manager/attendance/attendance.vue


 <template>
   <div class="sidemenu">
     <div class="myinfo simple">
-            <div class="name-box">
-                <div class="img-area">
-                    <div><img :src="photoicon" alt="">
-                        <p class="name">OOO과장</p>
-                    </div>
-                    <div class="info">
-                        <p>솔루션 개발팀</p>
-                        <i class="fa-bars"></i>
-                        <p>팀장</p>
-                    </div>
-                </div>
-            </div>
-            <details class="menu-box" open>
-          <summary><p>근태현황</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
-          <ul>
-            <li> <router-link :to="{ name: 'myAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
-                <p>나의 근태현황</p>
-                <div class="icon" v-if="isExactActive">
-                  <img :src="menuicon" alt="">
-                </div>
-              </router-link></li>
-            <li>
-              <router-link :to="{ name: 'buseoAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
-                <p>부서별 근태현황</p>
-                <div class="icon" v-if="isExactActive">
-                  <img :src="menuicon" alt="">
-                </div>
-              </router-link>
-            </li>
-          </ul>
-      </details>
-            <details class="menu-box">
-          <summary><p>휴가</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
-          <ul>
-            <li> <router-link :to="{ name: 'hyugaStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
-                <p>휴가 현황</p>
-                <div class="icon" v-if="isExactActive">
-                  <img :src="menuicon" alt="">
-                </div>
-              </router-link></li>
-            <li> <router-link :to="{ name: 'hyugaInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
-                <p>휴가 신청</p>
-                <div class="icon" v-if="isExactActive">
-                  <img :src="menuicon" alt="">
-                </div>
-              </router-link></li>
-           
-          </ul>
-      </details>
-            <details class="menu-box">
-          <summary><p>출장</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
-          <ul>
-            <li> <router-link :to="{ name: 'ChuljangStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
-                <p>출장 현황</p>
-                <div class="icon" v-if="isExactActive">
-                  <img :src="menuicon" alt="">
-                </div>
-              </router-link></li>
-            <li>
-              <router-link :to="{ name: 'ChuljangInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
-                <p>출장 신청</p>
-                <div class="icon" v-if="isExactActive">
-                  <img :src="menuicon" alt="">
-                </div>
-              </router-link>
-            </li>
-          </ul>
-      </details>
+      <div class="name-box">
+        <div class="img-area">
+          <div><img :src="photoicon" alt="">
+            <p class="name">OOO과장</p>
+          </div>
+          <div class="info">
+            <p>솔루션 개발팀</p>
+            <i class="fa-bars"></i>
+            <p>팀장</p>
+          </div>
         </div>
+      </div>
+      <details class="menu-box" :open="$route.name.toLowerCase().includes('attendance')">
+        <summary>
+          <p>근태현황</p>
+          <div class="icon"><img :src="topmenuicon" alt=""></div>
+        </summary>
+        <ul>
+          <li>
+            <router-link :to="{ name: 'myAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
+              <p>나의 근태현황</p>
+              <div class="icon" v-if="isExactActive">
+                <img :src="menuicon" alt="">
+              </div>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'buseoAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
+              <p>부서별 근태현황</p>
+              <div class="icon" v-if="isExactActive">
+                <img :src="menuicon" alt="">
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+      <details class="menu-box" :open="$route.name.toLowerCase().includes('hyuga')">
+        <summary>
+          <p>휴가</p>
+          <div class="icon"><img :src="topmenuicon" alt=""></div>
+        </summary>
+        <ul>
+          <li>
+            <router-link :to="{ name: 'hyugaStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
+              <p>휴가 현황</p>
+              <div class="icon" v-if="isExactActive">
+                <img :src="menuicon" alt="">
+              </div>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'hyugaInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
+              <p>휴가 신청</p>
+              <div class="icon" v-if="isExactActive">
+                <img :src="menuicon" alt="">
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+      <details class="menu-box" :open="$route.name.toLowerCase().includes('chuljang')">
+        <summary>
+          <p>출장</p>
+          <div class="icon"><img :src="topmenuicon" alt=""></div>
+        </summary>
+        <ul>
+          <li>
+            <router-link :to="{ name: 'ChuljangStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
+              <p>출장 현황</p>
+              <div class="icon" v-if="isExactActive">
+                <img :src="menuicon" alt="">
+              </div>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'ChuljangInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
+              <p>출장 신청</p>
+              <div class="icon" v-if="isExactActive">
+                <img :src="menuicon" alt="">
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </div>
   </div>
   <!-- End Page Title -->
   <div class="content">
     <router-view></router-view>
-
-</div>
+  </div>
 </template>
-
 <script>
 import { ref } from 'vue';
 

   },
 };
 </script>
-
 <style scoped></style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,83 +1,97 @@
1	1	<template>
2	2	<div class="sidemenu">
3	3	<div class="myinfo simple">
4		- <div class="name-box">
5		- <div class="img-area">
6		- <div><img :src="photoicon" alt="">
7		- <p class="name">OOO과장</p>
8		- </div>
9		- <div class="info">
10		- <p>솔루션 개발팀</p>
11		- <i class="fa-bars"></i>
12		- <p>팀장</p>
13		- </div>
14		- </div>
15		- </div>
16		- <details class="menu-box" open>
17		- <summary><p>근태현황</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
18		- <ul>
19		- <li> <router-link :to="{ name: 'myAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
20		- <p>나의 근태현황</p>
21		- <div class="icon" v-if="isExactActive">
22		- <img :src="menuicon" alt="">
23		- </div>
24		- </router-link></li>
25		- <li>
26		- <router-link :to="{ name: 'buseoAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
27		- <p>부서별 근태현황</p>
28		- <div class="icon" v-if="isExactActive">
29		- <img :src="menuicon" alt="">
30		- </div>
31		- </router-link>
32		- </li>
33		- </ul>
34		- </details>
35		- <details class="menu-box">
36		- <summary><p>휴가</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
37		- <ul>
38		- <li> <router-link :to="{ name: 'hyugaStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
39		- <p>휴가 현황</p>
40		- <div class="icon" v-if="isExactActive">
41		- <img :src="menuicon" alt="">
42		- </div>
43		- </router-link></li>
44		- <li> <router-link :to="{ name: 'hyugaInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
45		- <p>휴가 신청</p>
46		- <div class="icon" v-if="isExactActive">
47		- <img :src="menuicon" alt="">
48		- </div>
49		- </router-link></li>
50		-
51		- </ul>
52		- </details>
53		- <details class="menu-box">
54		- <summary><p>출장</p><div class="icon"><img :src="topmenuicon" alt=""></div></summary>
55		- <ul>
56		- <li> <router-link :to="{ name: 'ChuljangStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
57		- <p>출장 현황</p>
58		- <div class="icon" v-if="isExactActive">
59		- <img :src="menuicon" alt="">
60		- </div>
61		- </router-link></li>
62		- <li>
63		- <router-link :to="{ name: 'ChuljangInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
64		- <p>출장 신청</p>
65		- <div class="icon" v-if="isExactActive">
66		- <img :src="menuicon" alt="">
67		- </div>
68		- </router-link>
69		- </li>
70		- </ul>
71		- </details>
	4	+ <div class="name-box">
	5	+ <div class="img-area">
	6	+ <div><img :src="photoicon" alt="">
	7	+ <p class="name">OOO과장</p>
	8	+ </div>
	9	+ <div class="info">
	10	+ <p>솔루션 개발팀</p>
	11	+ <i class="fa-bars"></i>
	12	+ <p>팀장</p>
	13	+ </div>
72	14	</div>
	15	+ </div>
	16	+ <details class="menu-box" :open="$route.name.toLowerCase().includes('attendance')">
	17	+ <summary>
	18	+ <p>근태현황</p>
	19	+ <div class="icon"><img :src="topmenuicon" alt=""></div>
	20	+ </summary>
	21	+ <ul>
	22	+ <li>
	23	+ <router-link :to="{ name: 'myAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
	24	+ <p>나의 근태현황</p>
	25	+ <div class="icon" v-if="isExactActive">
	26	+ <img :src="menuicon" alt="">
	27	+ </div>
	28	+ </router-link>
	29	+ </li>
	30	+ <li>
	31	+ <router-link :to="{ name: 'buseoAttendance' }" exact-active-class="active-link" v-slot="{ isExactActive }">
	32	+ <p>부서별 근태현황</p>
	33	+ <div class="icon" v-if="isExactActive">
	34	+ <img :src="menuicon" alt="">
	35	+ </div>
	36	+ </router-link>
	37	+ </li>
	38	+ </ul>
	39	+ </details>
	40	+ <details class="menu-box" :open="$route.name.toLowerCase().includes('hyuga')">
	41	+ <summary>
	42	+ <p>휴가</p>
	43	+ <div class="icon"><img :src="topmenuicon" alt=""></div>
	44	+ </summary>
	45	+ <ul>
	46	+ <li>
	47	+ <router-link :to="{ name: 'hyugaStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
	48	+ <p>휴가 현황</p>
	49	+ <div class="icon" v-if="isExactActive">
	50	+ <img :src="menuicon" alt="">
	51	+ </div>
	52	+ </router-link>
	53	+ </li>
	54	+ <li>
	55	+ <router-link :to="{ name: 'hyugaInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
	56	+ <p>휴가 신청</p>
	57	+ <div class="icon" v-if="isExactActive">
	58	+ <img :src="menuicon" alt="">
	59	+ </div>
	60	+ </router-link>
	61	+ </li>
	62	+ </ul>
	63	+ </details>
	64	+ <details class="menu-box" :open="$route.name.toLowerCase().includes('chuljang')">
	65	+ <summary>
	66	+ <p>출장</p>
	67	+ <div class="icon"><img :src="topmenuicon" alt=""></div>
	68	+ </summary>
	69	+ <ul>
	70	+ <li>
	71	+ <router-link :to="{ name: 'ChuljangStatue' }" exact-active-class="active-link" v-slot="{ isExactActive }">
	72	+ <p>출장 현황</p>
	73	+ <div class="icon" v-if="isExactActive">
	74	+ <img :src="menuicon" alt="">
	75	+ </div>
	76	+ </router-link>
	77	+ </li>
	78	+ <li>
	79	+ <router-link :to="{ name: 'ChuljangInsert' }" exact-active-class="active-link" v-slot="{ isExactActive }">
	80	+ <p>출장 신청</p>
	81	+ <div class="icon" v-if="isExactActive">
	82	+ <img :src="menuicon" alt="">
	83	+ </div>
	84	+ </router-link>
	85	+ </li>
	86	+ </ul>
	87	+ </details>
	88	+ </div>
73	89	</div>
74	90	<!-- End Page Title -->
75	91	<div class="content">
76	92	<router-view></router-view>
77		-
78		-</div>
	93	+ </div>
79	94	</template>
80		-
81	95	<script>
82	96	import { ref } from 'vue';
83	97
...	...	@@ -175,5 +189,4 @@
175	189	},
176	190	};
177	191	</script>
178		-
179	192	<style scoped></style>

Delete comment