Commit @c6d6567614e22a62581e7e83fe23095eeb5b4432

류윤주 05-12

250512 류윤주 메뉴 재귀 수정

@c6d6567614e22a62581e7e83fe23095eeb5b4432

d14c651

c6d6567

client/resources/scss/admin/layout.scss

--- client/resources/scss/admin/layout.scss

+++ client/resources/scss/admin/layout.scss


 .admin-wrap {
     background-color: #eaeff4;
     display: grid;
-    grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
+    grid-template-columns: clamp(280px, 10vw, 450px) minmax(1020px, 1fr);
     grid-template-rows: 60px minmax(851px, 1226px);
     grid-template-areas:
         "sidebar header "

             height: calc(100% - 60px);
             /* 메뉴 스타일 */
             .main-menu {
-                padding: 2rem 0;
+                padding: 2rem;
                 height: 100%;
                 overflow-y: auto;
-                .menu-item {
-                    position: relative;
-                    cursor: pointer;
-                    padding: 0 2rem;
-    
-                    span{
+
+                    .has-children{
+                        position: relative;
                         display: block;
                         padding: 1rem;
-    
-                        &.main-active{
-                            color: var(--tk-main-50);
-                            font-weight: 700;
-
-                        }
-                    }
-                    
-                    >span.has-children{
-                        position: relative;
+                        cursor: pointer;
 
                         &::after {
                             content: '';
                             position: absolute;
-                            right: 0;
+                            right: 1rem;
                             top: 50%;
                             transform: translateY(-50%);
                             width: 20px;

                             border-radius: 50%;
                             transition: transform 0.3s ease;
                         }
-                    
+
                         &.open::after {
                             border: 1px solid var(--tk-main-50);
                             background-image: url(#{$url}/component/common/ico_arr_16_right_green70.svg);
                             transform: translateY(-50%) rotate(90deg); // 오른쪽 화살표 → 아래 방향
                     
                         }
+
+                        &.menu-active{
+                            color: var(--tk-main-50);
+                            font-weight: 700;
+
+                            
+
+                        }
+
+                        
+
+                        
                     }
     
                     /* 서브메뉴 스타일 */

                         width: 100%;
     
                         >li{
-    
                             cursor: pointer;
+
+                            span{
+                                display: block;
+                                padding: 1rem;
+                            }
     
                             &.sub-active{
                                 >span{

                             }
     
     
-                            &.has-third-depth{
-                                &.sub-active {
-                                    >span{
-                                        background-color: var(--tk-main-50);
-                                        color: var(--tk-white);
-                                        font-weight: 700;
-                                        @include radius(10);
-                                        // border-radius: 1rem 1rem 0 0;
-                                    }
-                                }
+                           
     
-                            }
-    
-                            .ssub-menu{
+                            >.sub-menu{
                                 padding: 1rem;
                                 background-color: var(--tk-gray-10);
                                 @include radius(10);

                         }
                     }
     
-                }
+
             }
         }
     }

c6d6567

client/views/component/menu/MenuItem.vue (added)

+++ client/views/component/menu/MenuItem.vue

...	...	@@ -0,0 +1,53 @@
	1	+<template>
	2	+ <li>
	3	+ <span
	4	+ @click.stop="handleClick"
	5	+ :class="{
	6	+ 'has-children': menu.childList && menu.childList.length > 0,
	7	+ 'menu-active': isActive(menu.menuId),
	8	+ 'open': menu.isOpen,
	9	+ }"
	10	+ >
	11	+ {{ menu.menuNm }}
	12	+ </span>
	13	+
	14	+ <ul v-if="menu.isOpen && menu.childList?.length > 0" class="sub-menu">
	15	+ <MenuItem
	16	+ v-for="(child, idx) in menu.childList"
	17	+ :key="idx"
	18	+ :menu="child"
	19	+ :is-active="isActive"
	20	+ :on-click="onClick"
	21	+ @toggle="onToggle"
	22	+ />
	23	+ </ul>
	24	+ </li>
	25	+</template>
	26	+
	27	+<script>
	28	+export default {
	29	+ name: "MenuItem",
	30	+ props: {
	31	+ menu: Object,
	32	+ isActive: Function,
	33	+ onClick: Function,
	34	+ },
	35	+ methods: {
	36	+ handleClick() {
	37	+ if (this.menu.childList && this.menu.childList.length > 0) {
	38	+ // const updatedMenu = {
	39	+ // ...this.menu,
	40	+ // isOpen: !this.menu.isOpen,
	41	+ // };
	42	+ // console.log("updatedMenu",updatedMenu)
	43	+ this.$emit("toggle", this.menu);
	44	+ } else {
	45	+ this.onClick(this.menu);
	46	+ }
	47	+ },
	48	+ onToggle(menu) {
	49	+ this.$emit("toggle", menu);
	50	+ },
	51	+ },
	52	+};
	53	+</script>

d14c651

c6d6567

client/views/layout/AdminMenu.vue

--- client/views/layout/AdminMenu.vue

+++ client/views/layout/AdminMenu.vue

...	...	@@ -1,4 +1,4 @@
1		-<template>
	1	+<!-- <template>
2	2	<div class="side-bar">
3	3	<div class="logo">
4	4	<router-link :to="{path : this.$filters.ctxPath('/adm/main.page')}">ADMINISTRATOR</router-link>
...	...	@@ -32,7 +32,26 @@
32	32	</ul>
33	33	</nav>
34	34	</div>
35		-</template>
	35	+</template> -->
	36	+<template>
	37	+ <div class="side-bar">
	38	+ <div class="logo">
	39	+ <router-link :to="{ path: $filters.ctxPath('/adm/main.page') }">ADMINISTRATOR</router-link>
	40	+ </div>
	41	+ <nav>
	42	+ <ul class="main-menu">
	43	+ <MenuItem
	44	+ v-for="(menu, idx) in menuList"
	45	+ :key="idx"
	46	+ :menu="menu"
	47	+ :is-active="isActive"
	48	+ :on-click="menuClick"
	49	+ @toggle="toggleSubMenu"
	50	+ />
	51	+ </ul>
	52	+ </nav>
	53	+ </div>
	54	+ </template>
36	55
37	56	<script>
38	57	import store from "../pages/AppStore";
...	...	@@ -40,6 +59,7 @@
40	59	import { defaultSearchParams } from '../../resources/js/defaultSearchParams';
41	60	import cntnStatsSave from "../../resources/js/cntnStatsSave";
42	61	import { findBySysMenu } from '../../resources/api/menu';
	62	+import MenuItem from "../component/menu/MenuItem.vue";
43	63
44	64	export default {
45	65	mixins: [queryParams, cntnStatsSave],
...	...	@@ -51,6 +71,9 @@
51	71	menuList: [],
52	72	activeMenus: [] // 현재 선택된 메뉴 및 부모 메뉴 ID 저장
53	73	};
	74	+ },
	75	+ components:{
	76	+ MenuItem
54	77	},
55	78	created() {
56	79	this.findAll();
...	...	@@ -115,9 +138,11 @@
115	138	}
116	139	},
117	140	toggleSubMenu(menu) {
	141	+ console.log("toggleSubMenu",menu)
118	142	if (menu.childList && menu.childList.length > 0) {
119	143	// 부모 메뉴 클릭 시 펼치기만 함
120	144	menu.isOpen = !menu.isOpen;
	145	+ console.log(menu.isOpen)
121	146	} else {
122	147	if(menu.routerUrl === "") {
123	148	// 하위메뉴가 없는 상위메뉴일 시 알림 출력

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,7 +1,7 @@
1	1	.admin-wrap {
2	2	background-color: #eaeff4;
3	3	display: grid;
4		- grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
	4	+ grid-template-columns: clamp(280px, 10vw, 450px) minmax(1020px, 1fr);
5	5	grid-template-rows: 60px minmax(851px, 1226px);
6	6	grid-template-areas:
7	7	"sidebar header "
...	...	@@ -76,32 +76,20 @@
76	76	height: calc(100% - 60px);
77	77	/* 메뉴 스타일 */
78	78	.main-menu {
79		- padding: 2rem 0;
	79	+ padding: 2rem;
80	80	height: 100%;
81	81	overflow-y: auto;
82		- .menu-item {
83		- position: relative;
84		- cursor: pointer;
85		- padding: 0 2rem;
86		-
87		- span{
	82	+
	83	+ .has-children{
	84	+ position: relative;
88	85	display: block;
89	86	padding: 1rem;
90		-
91		- &.main-active{
92		- color: var(--tk-main-50);
93		- font-weight: 700;
94		-
95		- }
96		- }
97		-
98		- >span.has-children{
99		- position: relative;
	87	+ cursor: pointer;
100	88
101	89	&::after {
102	90	content: '';
103	91	position: absolute;
104		- right: 0;
	92	+ right: 1rem;
105	93	top: 50%;
106	94	transform: translateY(-50%);
107	95	width: 20px;
...	...	@@ -113,13 +101,25 @@
113	101	border-radius: 50%;
114	102	transition: transform 0.3s ease;
115	103	}
116		-
	104	+
117	105	&.open::after {
118	106	border: 1px solid var(--tk-main-50);
119	107	background-image: url(#{$url}/component/common/ico_arr_16_right_green70.svg);
120	108	transform: translateY(-50%) rotate(90deg); // 오른쪽 화살표 → 아래 방향
121	109
122	110	}
	111	+
	112	+ &.menu-active{
	113	+ color: var(--tk-main-50);
	114	+ font-weight: 700;
	115	+
	116	+
	117	+
	118	+ }
	119	+
	120	+
	121	+
	122	+
123	123	}
124	124
125	125	/* 서브메뉴 스타일 */
...	...	@@ -132,8 +132,12 @@
132	132	width: 100%;
133	133
134	134	>li{
135		-
136	135	cursor: pointer;
	136	+
	137	+ span{
	138	+ display: block;
	139	+ padding: 1rem;
	140	+ }
137	141
138	142	&.sub-active{
139	143	>span{
...	...	@@ -145,20 +149,9 @@
145	149	}
146	150
147	151
148		- &.has-third-depth{
149		- &.sub-active {
150		- >span{
151		- background-color: var(--tk-main-50);
152		- color: var(--tk-white);
153		- font-weight: 700;
154		- @include radius(10);
155		- // border-radius: 1rem 1rem 0 0;
156		- }
157		- }
	152	+
158	153
159		- }
160		-
161		- .ssub-menu{
	154	+ >.sub-menu{
162	155	padding: 1rem;
163	156	background-color: var(--tk-gray-10);
164	157	@include radius(10);
...	...	@@ -175,7 +168,7 @@
175	168	}
176	169	}
177	170
178		- }
	171	+
179	172	}
180	173	}
181	174	}

Delete comment