I am trying to change a hamburger menu icon in my header to a cross icon when it is clicked. I have created a function in the computed property of my Vue template, but I'm not entirely sure about the implementation. How can I achieve this?
Below is the code for my menu icon:
<div class="top-icon" :class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
<div class="main-item menu">
<span class="line line01"></span>
<span class="line line02"></span>
<span class="line line03"></span>
</div>
</div>
This is the corresponding CSS:
.top-icon {
background: #29afd1;
display: inline-block;
border-radius: 500px;
margin: 10px;
position: relative;
padding: 80px;
cursor: pointer;
}
.main-item {
width: 150px;
height: 150px;
position: relative;
}
.line {
position: absolute;
height: 15px;
width: 100%;
background: white;
border-radius: 10px;
transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}
.line01 {
top: 19%;
}
.line02 {
top: 49%;
}
.line03 {
top: 79%;
}
.menu.close .line01 {
transform: rotate(45deg);
top: 49%;
}
.menu.close .line02, .menu.close .line03 {
transform: rotate(-45deg);
top: 49%;
}
Here is what I have inside the script tags so far:
data() {
return {
showTopMenu: false,
};
},
computed: {
toggleTopMenu() {},