From 867d5d65861994960f75b6f79d5374fb9ec0b19e Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Fri, 12 Aug 2022 18:21:10 +0300
Subject: [PATCH] - update instructions in app-manual. - added router-link to
 header navbar. - update styles for nav-list.

---
 src/components/AppManual.vue      |  2 +-
 src/components/HeaderItem.vue     |  8 ++++----
 src/components/NavigationList.vue | 12 ++++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/AppManual.vue b/src/components/AppManual.vue
index b2c40b6..fc0822d 100644
--- a/src/components/AppManual.vue
+++ b/src/components/AppManual.vue
@@ -32,7 +32,7 @@
             </div>
             <div>
                 <kbd>B</kbd>
-                <span> – Lock</span>
+                <span> – Lock Intensity</span>
             </div>
         </div>
     </div>
diff --git a/src/components/HeaderItem.vue b/src/components/HeaderItem.vue
index 1255489..52be4a5 100644
--- a/src/components/HeaderItem.vue
+++ b/src/components/HeaderItem.vue
@@ -7,16 +7,16 @@
             <nav class="menu-wrapper">
                 <ul class="navigation">
                     <li class="navigation__item">
-                        <a href="/" target="_self" class="navigation__link">Home</a>
+                        <router-link to="/" class="navigation-item">Home</router-link>
                     </li>
                     <li class="navigation__item">
-                        <a href="/faq" target="_self" class="navigation__link">FAQ</a>
+                        <router-link to="/faq" class="navigation-item">FAQ</router-link>
                     </li>
                     <li class="navigation__item">
-                        <a href="/about" target="_self" class="navigation__link">About</a>
+                        <router-link to="/about" class="navigation-item">About</router-link>
                     </li>
                     <li class="navigation__item">
-                        <a href="/donate" target="_self" class="navigation__link">Donate</a>
+                        <router-link to="/donate" class="navigation-item">Donate</router-link>
                     </li>
                 </ul>
             </nav>
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
index 238a365..3b69c21 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NavigationList.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="content-item navigation-list">
-        <router-link to="/" class="navigation-item">Patterns</router-link>
-        <router-link to="/custom" class="navigation-item">Custom</router-link>
-        <router-link to="/manual" class="navigation-item">Manual</router-link>
-        <router-link to="/diagnostic" class="navigation-item">Diagnostic</router-link>
+        <router-link to="/" class="navigation-list__item">Patterns</router-link>
+        <router-link to="/custom" class="navigation-list__item">Custom</router-link>
+        <router-link to="/manual" class="navigation-list__item">Manual</router-link>
+        <router-link to="/diagnostic" class="navigation-list__item">Diagnostic</router-link>
     </div>
 </template>
 
@@ -23,8 +23,8 @@
         gap: 16px;
     }
 
-    .navigation-item.router-link-active,
-    .navigation-item.router-link-exact-active {
+    .navigation-list__item.router-link-active,
+    .navigation-list__item.router-link-exact-active {
         border-bottom: 2px solid var(--color-link-hover);
         color: var(--color-link-hover);
         transition: all 0.5s ease;