add breadcrumb

README.md

@@ -67,3 +67,5 @@ More information about the usage of this directory in [the documentation](https:
 This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
+
+# $env:NODE_OPTIONS="--openssl-legacy-provider"
\ No newline at end of file

components/BreadCrumb.vue

 <template>
   <div class=" page-header dark-section">
     <h3 class="page-subtitle">
-      categories
+      {{ selectedCategory ?? 'categories' }}
     </h3>
     <h2 class="page-title">
       BREADCRUMB
@@ -16,20 +16,15 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'BreadCrumb',
 
   computed: {
-    items () {
-      const items = [{ text: 'Home', disabled: false, href: '/' }]
-      this.$route.matched.forEach((route) => {
-        if (route.name) {
-          items.push({ text: route.name, disabled: false, href: route.path })
-        }
+    ...mapGetters({
+      selectedCategory: 'category/selectedCategory'
     })
-
-      return items
-    }
   }
 }
 </script>

components/ContactBreadCrumb.vue

+<template>
+  <div class=" page-header dark-section">
+    <h2 class="page-title">
+      CONTACT US
+    </h2>
+    <ul class="breadcrumb">
+      <v-breadcrumbs :items="items">
+        <template #divider>
+          <v-icon>mdi-chevron-right</v-icon>
+        </template>
+      </v-breadcrumbs>
+    </ul>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'BreadCrumb',
+
+  computed: {
+    ...mapGetters({
+      selectedCategory: 'category/selectedCategory'
+    })
+  }
+}
+</script>
+
+<style scoped>
+  .page-header {
+    background-image: url(https://d-themes.com/html/riode/images/page-header/contact-us.jpg);
+    background-color: #3C63A4;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 250px;
+    padding: 3em 1em;
+    background-color: #C8C3BF;
+    background-position: center;
+    background-size: cover;
+    text-align: center;
+    color: #222;
+    width: 100vw;
+    margin-top: 10px;
+}
+.breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    color: #666;
+    font-family: Poppins,sans-serif;
+    font-size: 1.4rem;
+}
+.v-application a {
+    color:  #fff !important;
+}
+.page-title {
+    margin-bottom: 0;
+    text-transform: uppercase;
+    font-size: 4rem;
+    line-height: 1.125;
+    color: #222;
+    color: #fff;
+}
+.page-subtitle {
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    font-size: 2rem;
+    line-height: 1.2;
+    color: #fff;
+}
+
+@media only screen and (max-width: 769px) {
+  .page-title {
+    font-size: 2.5rem;
+}
+.page-subtitle {
+    font-size: 1.5rem;
+}
+}
+</style>

components/LoginModal.vue

@@ -2,7 +2,6 @@
   <v-dialog
     v-model="dialog"
     width="450px"
-    @click:outside="closeDialog"
   >
     <v-card-title class="justify-center">
       <p class="font-weight-black" style="font-size: 35px">

components/RegisterModal.vue

@@ -2,7 +2,6 @@
   <v-dialog
     v-model="dialog"
     width="450px"
-    @click:outside="closeDialog"
   >
     <v-card-title class="justify-center">
       <p class="font-weight-black" style="font-size: 35px">

components/user/Header.vue

@@ -44,10 +44,12 @@
             </div>
             <v-divider vertical />
             <div class="header-info">
+              <router-link :to="`/home-page/contact`">
               <v-icon small>
                 mdi-map-marker-outline
               </v-icon>
-              <span>Contact</span>
+              <span style="color:rgba(0, 0, 0, 0.8);">Contact</span>
+            </router-link>
             </div>
             <div class="header-info">
               <v-icon small>

nuxt.config.js

@@ -6,8 +6,8 @@ export default {
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'avata-shoping online',
-    titleTemplate: '%s - web',
+    title: 'RIODE',
+    titleTemplate: '%s - Ultimate-eCommerce',
     htmlAttrs: {
       lang: 'en'
     },

pages/home-page/contact/index.vue

+<template>
+  <div>
+    <ContactBreadCrumb />
+    <v-container>
+      <v-row class="bread-crumbs">
+        <v-breadcrumbs>
+          <v-breadcrumbs-item href="/home-page">
+            <v-icon>mdi-home</v-icon>
+          </v-breadcrumbs-item>
+          <v-breadcrumbs-item>
+            > Contact Us
+          </v-breadcrumbs-item>
+        </v-breadcrumbs>
+      </v-row>
+    </v-container>
+    <v-container>
+      <v-row class="section-contact">
+        <v-row class="left-section">
+          <div>
+            <h3>Headquarters</h3>
+            <p>1600 Amphitheatre Parkway<br>New York WC1 1BA</p>
+            <h4 class="mb-2 text-capitalize">
+              Phone Number
+            </h4>
+            <p>1-80045-856</p>
+            <p>1.80045856</p>
+            <h3>Support</h3>
+            <span>support@your-domain.com</span><br>
+            <span>help@your-domain.com</span><br>
+            <span>Sale</span>
+          </div>
+        </v-row>
+        <v-row class="right-section">
+          <h2 class="font-weight-bold">
+            LET'S CONNECT
+          </h2>
+          <h4 class="font-weight-light">
+            Your email address will not be published. Required fields are marked *
+          </h4>
+          <v-textarea outlined auto-grow placeholder="Comment*"/>
+          <v-row>
+            <v-col><v-text-field outlined placeholder="Name" /></v-col>
+            <v-col><v-text-field outlined placeholder="Email" /></v-col>
+          </v-row>
+          <V-btn class="post-btn">
+            POST COMMENT
+          </V-btn>
+        </v-row>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import ContactBreadCrumb from '@/components/ContactBreadCrumb'
+export default {
+  components: { ContactBreadCrumb },
+  layout: 'user'
+}
+// eslint-disable-next-line eol-last
+</script>
+
+<style scoped>
+.section-contact {
+  display:flex;
+  flex-direction: row;
+  gap:20px;
+  margin:20px 0;
+}
+.left-section {
+  background-color: #f6f7f9;
+  max-width:25%;
+  padding:25px
+}
+.right-section {
+  margin:0;
+  padding:0 10px;
+  max-width:75%;
+  display:flex;
+  flex-direction:column;
+  gap:10px;
+}
+.post-btn {
+  width:150px;
+  background-color:black !important;
+  color: #ffffff
+}
+</style>

pages/users/index.vue

@@ -21,18 +21,16 @@
               <v-form ref="formEdit">
                 <v-row>
                   <v-col cols="12">
-                    <v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
+                    <v-text-field v-model="eName" label="Legal name"/>
                   </v-col>
                   <v-col cols="12">
-                    <v-text-field v-model="eEmail" label="Email*" :rules="emailRules" required />
+                    <v-text-field v-model="eEmail" label="Email"/>
                   </v-col>
                   <v-col cols="12">
                     <v-text-field
                       v-model="ePassword"
-                      label="Password*"
+                      label="Password"
                       type="password"
-                      :rules="passwordRules"
-                      required
                     />
                   </v-col>
                 </v-row>
@@ -431,6 +429,7 @@ export default {
       this.eID = user.id
       this.eEmail = user.email
       this.eName = user.name
+      this.ePassword = null
       this.editedIndex = this.users.indexOf(user)
       console.log(this?.eID)
     },

store/category.js

 export const state = () => ({
-  currentCategory: ''
+  selectedCategory: null
 })
 
 export const mutations = {
-  setCurrentCategory (state, category) {
-    state.currentCategory = category
+  setSelectedCategory(state, category) {
+    state.selectedCategory = category
   }
 }