sk_fems_ui/components/common/AdminMenu.vue

<template>
	<v-menu offset-y nudge-bottom="8" :left="true">
		<template v-slot:activator="{ on, attrs }">
			<v-btn
				v-bind="attrs"
				v-on="on"
				depressed
				:ripple="false"
				:class="{ miniVariant }"
				:style="btnStyle"
			>
				<v-icon size="32" :class="{ 'mr-2': !miniVariant }"
					>$icoAdminMenu</v-icon
				>
				<span class="body-1 mr-1">{{ userNm }}</span>
				<v-icon>mdi-chevron-down</v-icon>
			</v-btn>
			<!-- <AlertPopup
        ref="alertPop"
        v-show='false'
        :item="item"
        
      /> -->
		</template>

		<v-list class="pa-2">
			<!--      <v-list-item class="mb-1">-->
			<!--        <div class="d-flex align-center">-->
			<!--          <v-avatar class="mr-1" size="20">-->
			<!--            <v-icon color="white">mdi-account-outline</v-icon>-->
			<!--          </v-avatar>-->
			<!--          <div class="d-flex flex-column">-->
			<!--            <span class="body-2 white&#45;&#45;text">관리자</span>-->
			<!--            &lt;!&ndash; <nuxt-link class="d-flex align-center mypage" to="/">-->
			<!--              <span class="clr-ccc-aaa">마이페이지</span>-->
			<!--              <v-icon class="ico-right">mdi-chevron-right</v-icon>-->
			<!--            </nuxt-link> &ndash;&gt;-->
			<!--          </div>-->
			<!--        </div>-->
			<!--      </v-list-item>-->
			<v-list-item>
				<v-btn @click="pswdChange" small elevation="0">
					<v-icon class="mr-1" size="20">mdi-account-outline</v-icon>
					<span class="body-2">비밀번호 변경</span>
				</v-btn>
			</v-list-item>
			<v-list-item>
				<v-btn @click="logout" small elevation="0">
					<v-icon class="mr-1" size="20">mdi-logout</v-icon>
					<span class="body-2">로그아웃</span>
				</v-btn>
			</v-list-item>
		</v-list>
	</v-menu>
</template>
<script>
import $cookie from 'vue-cookie';
import { mapState } from 'vuex';
// import AlertPopup from "~/components/common/modal/AlertPopup";

export default {
	props: {
		miniVariant: Boolean,
		userNm: {
			type: String,
			require: true,
		},
		comId: {
			type: String,
			require: true,
		},
	},
	components: {
		// AlertPopup
		//ChangePswdPop
	},
	data() {
		return {
			logoutUrl: '/login',
			item: {},
		};
	},
	computed: {
		...mapState(['isDarkMode']),
		btnStyle() {
			return this.isDarkMode ? { color: '#fff' } : { color: '#111' };
		},
	},
	methods: {
		logout() {
			$cookie.delete('FEMS_SESSION');
			// alert("정상적으로 로그아웃 되었습니다.");
			// this.item={
			//   label:'로그아웃',
			//   message:'정상적으로 로그아웃 되었습니다.'
			// }
			// this.$refs['alertPop'].dialog = true;

			this.$nextTick(() => {
				window.location.href = this.logoutUrl + '?' + this.comId;
			});
		},
		pswdChange() {
			this.$parent.$parent.$parent.$parent.$refs['changePswdPop'].dialog = true;
		},
	},
	mounted() {},
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/var.scss';
@each $theme in dark, light {
	.v-application.#{$theme}-mode {
		.mdi-account {
			color: map-deep-get(
				$config,
				#{$theme},
				'tui-datepicker-calendar-color'
			) !important;
		}

		.v-list {
			background-color: map-deep-get(
				$config,
				#{$theme},
				'admin-menu-expanded-list-backgroundColor'
			);
			border-color: transparent;
		}
	}
}

.v-menu__content {
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}

.v-list {
	.v-btn {
		padding: 0 !important;
		margin-bottom: 0;
		color: #fff;

		&:hover {
			color: #46c0ff;
		}

		> span {
			color: currentColor;
		}
	}
}

.v-btn {
	width: 100%;
	min-width: auto !important;
	display: flex;
	align-items: center;
	padding: 0 20px !important;
	margin-bottom: 12px;

	&,
	&:before {
		background-color: transparent !important;
	}

	::v-deep {
		.v-btn__content {
			justify-content: flex-start;
		}
	}

	&.miniVariant {
		::v-deep {
			.v-btn__content > .body-1,
			.v-btn__content > .mdi-chevron-down {
				display: none;
			}
		}
	}
}
</style>