add image

components/Footer.vue

@@ -30,7 +30,7 @@
       <div class="footer-bottom">
         <div class="footer-bottom-left">
           <figure class="payment">
-            <img src="~/assets/images/payment.png" alt="payment" width="159" height="29"></img>
+            <img src="~/assets/images/payment.png" alt="payment" width="159" height="29">
           </figure>
         </div>
         <p class="copyright">Riode eCommerce © 2022. All Rights Reserved</p>

components/Shared/Header/Header.vue

@@ -37,7 +37,7 @@
           <b-icon icon="info-circle"></b-icon>
           Need Help
         </a>
-        <a href="#signin" class="login-toggle link-to-tab d-md-show">
+        <a  @click="openModal" v-b-modal.modal-login class="login-toggle link-to-tab d-md-show">
           <b-icon icon="person" font-scale="1.3"></b-icon>
           Sign in
         </a>
@@ -119,11 +119,16 @@
 
 <script>
 import NavBar from "@/components/Shared/Header/NavBar";
+import LoginForm from "@/components/Shared/Header/LoginForm";
 export default {
   name: "Header",
   components: {
     NavBar,
+    LoginForm,
   },
+  methods: {
+     openModal() { this.$bvModal.show('modal-login') }
+    }
 };
 </script>
 

components/Shared/Header/LoginForm.vue

+<template>
+  <b-modal id="modal-login" title="Create User" class="modal fade" v-if="showModal">
+    <p class="my-4">
+      <form >
+          <label>Name :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="name"
+            v-model="name"
+            max="255"
+            min="1"
+            required
+          />
+          <label>Email :</label>
+          <input
+            type="email"
+            class="form-control mb-2"
+            placeholder="Email"
+            v-model="email"
+            required
+          />
+
+          <label>Password :</label>
+          <input
+            type="password"
+            class="form-control mb-2"
+            placeholder="password"
+            v-model="password"
+            required
+          />
+
+        </form>
+    </p>
+    <template #modal-footer>
+        <button v-b-modal.modal-close_visit  @click="$bvModal.hide('modal-login')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+    </template>
+  </b-modal>
+</template> 
+
+<script>
+export default {
+  name: "LoginForm",
+  data() {
+     return {
+      
+     }
+   },
+   methods: {
+     show() {
+      this.showModal = true
+     },
+     hide(){
+      this.showModal = false
+     }
+   }
+
+
+}
+</script>
\ No newline at end of file

components/nav.vue

@@ -13,7 +13,7 @@
       <b-collapse id="nav-collapse" is-nav>
         <b-navbar-nav>
           <b-nav-item href="/home/users">USER</b-nav-item>
-          <b-nav-item href="#">CATEGORY</b-nav-item>
+          <b-nav-item href="/home/categories">CATEGORY</b-nav-item>
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->

pages/about.vue

@@ -4,6 +4,8 @@
 
     <h1 style="text-align: center">ABOUT</h1>
 
+    
+    
   </div>
     
   </div>