File name
Commit message
Commit date
File name
Commit message
Commit date
2022-11-06
File name
Commit message
Commit date
<template>
<header class="flex-between">
<div class="flex-between2">
<ul
class="submenu contenedor-menu2"
:class="{ 'show-menu ': showSubmenu }"
>
<li
v-for="(item, index) in menuItems"
:key="index"
style="color: #3fb52d"
>
<span @click="toggleSubMenu(index)">
{{ item.title }}
<i
:class="{
'fa fa-chevron-down': item.open,
'fa fa-chevron-up': !item.open,
}"
></i>
</span>
<ul v-if="item.open">
<li
v-for="(subItem, subIndex) in item.subMenu"
:key="subIndex"
style="color: #333"
>
<router-link :to="subItem.route"> {{ subItem.title }}</router-link>
</li>
</ul>
</li>
<li style="color: #3fb52d"><router-link to="/Login.page">
로그인
</router-link></li>
</ul>
</div>
<div class="logo flex">
<input type="checkbox" id="menuicon" @click="toggleSubmenu()" />
<label class="menu-icon" for="menuicon">
<img :src="imageSrc" alt="Image" @click="toggle()"/>
<!-- <span></span>
<span></span>
<span></span> -->
</label>
<router-link to="/">
<span class="logotxt"> AI 안전통합 횡단보도 플랫폼 </span>
</router-link>
</div>
<div class="header_menu">
<nav class="flex">
<router-link to="/ApiTokenManagement.page">
<span v-show="loginCheck()" >API 토큰 관리</span>
</router-link>
<router-link to="/RequestLog.page">
<span v-show="loginCheck()">수집로그</span>
</router-link>
<router-link to="/ResponseLog.page">
<span v-show="loginCheck()">발송로그</span>
</router-link>
<router-link to="/ResponseLog.page" >
<button class="logout-btn" @click="logout" v-show="loginCheck()" style="float: right;">로그아웃</button>
</router-link>
</nav>
<div class="sub_menu">
</div>
</div>
</header>
</template>
<script>
// import test from "./sidebar-accordion";
const Menu = require("./Menu");
import { useStore } from "vuex";
import axios from "axios";
export default {
data() {
return {
imageSrc: 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5',
menuOpen: false,
showDropdown: false,
showSubmenu: false,
store : useStore(),
showData : false
};
},
computed : {
loginChecks: function(){
if(sessionStorage.getItem('login') == 'true'){
return true;
}else{
return false;
}
},
},
methods: {
loginCheck : function(){
if(sessionStorage.getItem('login') == 'true'){
return true;
}else{
return false;
}
},
//로그아웃
logout: function () {
if (confirm('로그아웃 하시겠습니까?')) {
sessionStorage.setItem("login", false);
this.$router.push({ path: '/Login.page', query: {} });
}
},
toggleSubMenu(index) {
this.menuItems[index].open = !this.menuItems[index].open;
this.showSubmenu = true;
console.log("toggleSubMenu 호출됨");
},
toggle(){
if (this.imageSrc === 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5') {
this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close2.png?alt=media&token=801544fa-80dd-4dc5-98c2-099a2fdb7791';
} else {
this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5';
}
},
toggleSubmenu: function () {
this.showSubmenu = !this.showSubmenu;
},
toggleDropdown() {
this.showDropdown = !this.showDropdown;
// this.menuOpen = !this.menu;
},
selectOption(option) {
this.selectedOption = option;
this.showDropdown = false;
},
toggleDropdown2() {
this.showDropdown2 = !this.showDropdown2;
},
selectOption2(option) {
this.selectedOption2 = option;
this.showDropdown2 = false;
},
toggleDropdown3() {
this.showDropdown3 = !this.showDropdown3;
},
selectOption3(option) {
this.selectedOption3 = option;
this.showDropdown3 = false;
},
toggleDropdown4() {
this.showDropdown4 = !this.showDropdown4;
},
selectOption4(option) {
this.selectedOption4 = option;
this.showDropdown4 = false;
},
},
};
</script>
<style scoped>
.menu-icon {
display: none;
}
header {
position: relative;
}
nav a {
width: 16rem;
}
nav span {
padding: 2.7rem 0;
/* border: 1px solid blue; */
}
.menu {
position: absolute;
background: #ffffff;
left: 0;
top: 0rem;
z-index: 500;
width: 100%;
/* border: 1px solid red */
padding: 1rem 26rem 1rem 1rem;
}
.nav {
position: absolute;
background: #ffffff;
left: -148rem;
top: 7rem;
z-index: 500;
width: -webkit-fill-available;
padding: 1rem;
}
ul {
width: 16rem;
}
li a {
color: #7e7e7f;
}
.logotxt {
transition: 0.3s;
color: #ffffff;
font-size: 23px;
}
.logotxt:hover {
transition: 0.3s;
color: #fff200;
}
.logoimg {
display: none;
}
.header_menu {
transition: 0.3s;
color: #ffffff;
font-size: 16px;
display: flex;
gap: 10rem;
align-items: baseline;
align-content: center;
justify-content: center;
}
.header_menu span:hover {
transition: 0.3s;
color: #fff200;
}
.sub_menu {
color: #ffffff81;
font-size: 14px;
gap: 3rem;
display: flex;
left: 70%;
}
input[id="menuicon"] {
display: none;
}
.flex-between2 {
display: none;
}
@media (max-width: 749px) {
.logo {
align-items: unset;
padding-top: 2rem;
gap: 1rem;
}
.menu-icon img {
width: 3rem;
}
.logotxt {
text-align: center;
/* width: 100vw;
position: absolute; */
left: 0%;
top: 22%;
font-size: 2rem;
}
input#menuicon {
display: none;
}
input#menuicon + label {
display: block;
/* width: 30px; */
height: 40px;
/* position: absolute; */
left: 2%;
top: 25px;
cursor: pointer;
}
input#menuicon + label span {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 30px;
background: #ffffff;
transition: all 0.35s;
}
input#menuicon + label span:nth-child(1) {
top: 0;
}
input#menuicon + label span:nth-child(2) {
top: 20%;
transform: translateY(-60%);
}
input#menuicon + label span:nth-child(3) {
bottom: 60%;
}
input#menuicon:checked + label span:nth-child(1) {
top: 20%;
transform: rotate(50deg);
}
input#menuicon:checked + label span:nth-child(2) {
opacity: 0;
}
input#menuicon:checked + label span:nth-child(3) {
bottom: 79%;
transform: rotate(-50deg);
}
.flex-between2 {
/* width: 100vw; */
position: absolute;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 40000;
display: none;
}
body {
font-family: "Montserrat", sans-serif;
}
a {
text-decoration: none;
}
.btnMenu {
display: none;
padding: 20px;
display: block;
background: #1abc9c;
color: #fff;
}
.btnMenu i.fa {
float: right;
}
.contenedor-menu2 {
display: none;
position: absolute;
top: 100%;
left: -21px;
/* padding-left: 3rem; */
background-color: #fff;
z-index: 999;
min-width: 329px;
margin-top: 70px;
/* display: inline-block; */
/* /background: #fff; */
font-size: 20px;
/* height: 700px; */
/* margin: 0 auto; */
/* text-align: center; */
/* border: 1px solid red; */
line-height: 18px;
cursor: pointer;
}
.show-menu {
display: block;
padding: 1rem ;
}
.contenedor-menu2 li {
width: -webkit-fill-available;
text-align: left;
/* margin-top: 20px; */
padding: 1rem 2rem;
/* margin-bottom: 20px;
/* border: 1px solid green; */
}
.contenedor-menu2 li ul {
margin-top: 1rem;
}
/* .contenedor-menu2 li ul li{padding: 2rem 1rem 1rem 1rem;} */
.contenedor-menu2 a {
width: 100vw;
text-align: center;
font-size: 18px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 20px;
/* border: 1px solid green; */
}
.sub_menu {
width: 100vw;
background: #fff;
height: 700px;
}
.contenedor-menu2 .menu2 {
width: 100%;
}
.contenedor-menu2 ul {
list-style: none;
width: -webkit-fill-available;
}
.contenedor-menu2 .menu2 li a {
color: #494949;
display: block;
border: 1px solid red;
padding: 15px 0px;
text-align: center;
background: #e9e9e9;
font-size: 25px;
}
.contenedor-menu2 .menu2 li a:hover {
background: #16a085;
color: #fff;
}
.contenedor-menu2 .menu2 i.fa {
font-size: 12px;
line-height: 18px;
float: right;
margin-left: 10px;
}
.contenedor-menu2 .menu2 ul {
display: none;
}
.contenedor-menu2 .menu2 ul li a {
background: #424242;
color: #e9e9e9;
}
.contenedor-menu2 .menu2 .activado > a {
background: #16a085;
color: #fff;
}
body {
font-family: "Montserrat", sans-serif;
}
a {
text-decoration: none;
}
.header_menu {
display: none;
}
.flex-between2 {
display: block;
}
}
</style>