File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div style="width: 100%;box-shadow: 1px 1px 5px #afafaf45;">
<div class="w1400 header-wrap">
<div class="logo-toggle">
<div class="logo">
<router-link to="/"><span>AI 디지털교과서 통합지원센터</span></router-link>
</div>
<input type="checkbox" id="checkbox" v-model="check">
<label for="checkbox" class="toggle" @click="toggleMenu">
<div class="bar bar--top"></div>
<div class="bar bar--middle"></div>
<div class="bar bar--bottom"></div>
</label>
<!-- <i v-if="!isOpened" class="fa-solid fa-bars mobile1" @click="toggleMenu"></i>
<i v-else class="fa-solid fa-times mobile1" @click="toggleMenu"></i> -->
</div>
<!-- 모바일 -->
<nav class=" sub-nav">
<ul class="main-sub-menu" :class="{ open: isOpened }">
<li v-for="menuItem in menuItems" :key="menuItem.text">
<div @click="toggleAccordion(menuItem)" class="accordion-header"
:class="{ 'active': menuItem.isExpanded }">
{{ menuItem.text }}
</div>
<ul class="main-sub-menu-sb" v-if="menuItem.isExpanded">
<li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
<router-link :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
<!-- PC -->
<nav>
<ul class="main-menu main-menu-1">
<li v-for="menuItem in menuItems" :key="menuItem.text" :class="{ 'active': menuItem.isHovered }"
@mouseover="menuItem.isHovered = true" @mouseout="menuItem.isHovered = false">
<router-link v-if="shouldRenderMenuItem(menuItem)" :to="menuItem.link">{{ menuItem.text
}}</router-link>
<ul class="sub-menu sub-menu-1">
<li v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.text" @click="navClose(menuItem)">
<router-link v-if="shouldRenderSubMenuItem(subMenuItem)" :to="subMenuItem.link">{{ subMenuItem.text }}</router-link>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
export default {
data() {
return {
check: false,
isOpened: false,
menuItems: [
{
text: "자료실",
link: "/Technology.page",
isHovered: false,
subMenu: [
// { text: "AI 디지털교과서개발 가이드라인", link: "/Guide.page" },
{ text: "기술문서", link: "/Technology.page" },
{ text: "자료집", link: "/Data.page" }
]
},
{
text: "네트워킹",
link: "",
isHovered: false,
subMenu: [
{ text: "기업 홍보관", link: "/Matching.page" },
]
},
{
text: "커뮤니티",
link: "/Notice.page",
isHovered: false,
subMenu: [
{ text: "공지사항", link: "/Notice.page" },
{ text: "홍보/뉴스", link: "/News.page" },
{ text: "전문가 협의체", link: "/Wgcommunity.page" }
]
},
{
text: "통합지원센터 소개",
link: "/Introduction.page",
subMenu: [
{ text: "통합지원센터란?", link: "/Introduction.page" },
// { text: "협력 기업", link: "" }
]
},
{
text: "마이페이지",
link: "/Info.page",
isHovered: false,
subMenu: [
{ text: "내 정보 수정", link: "/Info.page" },
{ text: "매칭 관리", link: "/MatchingManager.page" }
]
}
],
store: useStore(),
};
},
methods: {
toggleAccordion(menuItem) {
menuItem.isExpanded = !menuItem.isExpanded;
console.log(menuItem.isExpanded);
this.isOpened = true;
},
toggleMenu() {
this.isOpened = !this.isOpened;
},
navClose(menuItem) {
this.isOpened = false;
menuItem.isExpanded = false;
this.check = false;
},
shouldRenderMenuItem(menuItem) {
//해당 메뉴 항목이 로그인 상태에 따라 렌더링되어야 하는지 확인하는 로직
if (menuItem.text === "마이페이지") {
return this.store.state.loginUser != null;
}
// 다른 메뉴 항목은 항상 표시
return true;
},
shouldRenderSubMenuItem(subMenuItem) {
// 해당 서브 메뉴 항목이 로그인 상태에 따라 렌더링되어야 하는지 확인하는 로직
if (subMenuItem.text === "매칭 관리") {
// '매칭 관리' 항목은 'company'로 로그인한 경우에만 표시
return this.store.state.loginUser && this.store.state.loginUser.user_auth === 'company';
}
// 다른 서브 메뉴 항목은 항상 표시
return true;
}
},
watch: {
},
computed: {
},
mounted() {
console.log('Menu mounted');
}
}
</script>