title: Vue.js: toggle hamburger menu icons
body: <p>I have a header with a hamburger menu icon which I want to change to a cross icon when I click on this. How to do this in the Vue template? I created a function in the computed property but I am not sure what I should do. </p>
  
  <p>Here is my menu icon:</p>
  
  <pre><code>&lt;div class="top-icon" :class="toggleTopMenu" @click="showTopMenu = !showTopMenu"&gt;
    &lt;div class="main-item menu"&gt;
      &lt;span class="line line01"&gt;&lt;/span&gt;
      &lt;span class="line line02"&gt;&lt;/span&gt;
      &lt;span class="line line03"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>So far, this is what I have inside script tags:</p>
  
  <pre><code>data() {
    return {
      showTopMenu: false,
    };
  },
  computed: {
  toggleTopMenu() {},
  </code></pre>