Header menu routes have animated arrows on hover.

frontend/styles/banner.scss

@@ -40,6 +40,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
   &:hover {
     cursor: pointer;
   }
@@ -88,7 +89,6 @@
 
   &.open {
     background: #fff;
-    
   }
 }
 
@@ -114,6 +114,24 @@
 
   a {
     text-decoration: none;
+    position: relative;
+
+    &:hover {
+      .icon {
+        opacity: 100%;
+        right: -2.5rem;
+      }
+    }
+
+    .icon {
+      opacity: 0%;
+      position: absolute;
+      top: 35%;
+      right: 0;
+      color: $link-color;
+      font-size: 1.4rem;
+      transition: all 0.25s;
+    }
   }
 
   .single-route {
@@ -134,6 +152,7 @@
     &:hover {
       cursor: pointer;
       border-color: $link-color;
+
     }
   }
 }

frontend/styles/loginAndRegister.scss

@@ -68,4 +68,5 @@ form {
   width: calc(100% - 5rem);
   background-color: $light-red;
   color: $red;
+  font-size: 1.5rem;
 }

frontend/ui/Banner.vue

@@ -14,6 +14,7 @@
     <nav class="menu" :class="isOpen ? 'open' : 'collapsed'" >
       <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link" >
         <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{ route.name }}</a>
+        <i class="icon icon--arrow-right"></i>
       </router-link>
     </nav>