Implemented NavIcon

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <nav-icon @nav-icon="toggle" />
+    <nav-icon />
     <home-page />
     <registration-page />
   </div>
@@ -18,13 +18,6 @@ export default {
     HomePage,
     RegistrationPage
   },
-  data() {
-    return {
-      toggle(state) {
-        console.log("State", state);
-      }
-    };
-  }
 };
 </script>
 

src/components/HomePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="home-page">
+  <div id="home">
     <div id="logo-container" class="card">
       <img id="logo" :src="require('@/assets/f19-512.png')" />
     </div>
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style>
-#home-page {
+#home {
   min-height: 90vh;
   padding: 1vh 0 9vh 0;
   background: #ef5350;

src/components/NavIcon.vue

@@ -1,13 +1,28 @@
 <template>
-  <nav role="navigation" class="menu">
+  <div class="menu" is="transition-group" name="menus">
     <li class="main-icon" key="main" @click="toggle()" ref="menu-bar">
       <div class="container">
         <div class="bar1" />
         <div class="bar2" />
         <div class="bar3" />
       </div>
     </li>
-  </nav>
+    <li class="menu-item item-one" key="one" v-show="show">
+      <a class="icon" href="#home" @click="toggle()" title="Home">
+        <img class="icon-one" :src="require('../assets/menu_home_48.png')">
+      </a>
+    </li>
+    <li class="menu-item item-two" key="two" v-show="show">
+      <a class="icon" href="#events" @click="toggle()" title="Events">
+        <img class="icon-two" :src="require('../assets/menu_events_48.png')">
+      </a>
+    </li>
+    <li class="menu-item item-three" key="three" v-show="show">
+      <a class="icon" href="#register" @click="toggle()" title="Register">
+        <img class="icon-three" :src="require('../assets/menu_register_48.png')">
+      </a>
+    </li>
+  </div>
 </template>
 
 <script>
@@ -21,11 +36,6 @@ export default {
   methods: {
     toggle() {
       this.$refs["menu-bar"].classList.toggle("change");
-      if (this.show) {
-        this.$emit("nav-icon", "close");
-      } else {
-        this.$emit("nav-icon", "open");
-      }
       this.show = !this.show;
     }
   }
@@ -45,6 +55,13 @@ export default {
   z-index: 2;
 }
 
+@media only screen and (max-width: 700px) {
+  .menu {
+    margin-left: 0.2rem;
+    margin-top: 0.2rem;
+  }
+}
+
 .main-icon {
   background: #ef5350;
   display: block;
@@ -96,4 +113,71 @@ export default {
 .change .bar3 {
   transform: rotate(45deg) translate(-5.5px, -6px);
 }
+
+.menu-item {
+  position: absolute;
+  top: 0;
+  left: -6.5rem;
+  width: 8rem;
+  z-index: -1;
+  transform-origin: right;
+}
+
+.item-one {
+  transform: rotate(180deg);
+}
+
+.item-two {
+  transform: rotate(225deg);
+}
+
+.item-three {
+  transform: rotate(270deg);
+}
+
+.icon {
+  display: block;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  background: #ef5350;
+  width: 2.8rem;
+  height: 2.8rem;
+}
+
+.icon > img {
+  width: inherit;
+  height: inherit;
+}
+
+.icon:active {
+  transform: scale(0.95);
+}
+
+.icon-one {
+  transform: rotate(-180deg);
+}
+
+.icon-two {
+  transform: rotate(-225deg);
+}
+
+.icon-three {
+  transform: rotate(-270deg);
+}
+
+.menus-enter-active {
+  transition: all 300ms ease-out;
+}
+
+.menus-leave-active {
+  transition: all 300ms ease-in;
+}
+
+.menus-enter {
+  transform: rotate(150deg);
+}
+
+.menus-leave-to {
+  transform: rotate(300deg);
+}
 </style>