update feature categories

components/FooterBar.vue

+<!-- eslint-disable vue/no-parsing-error -->
 <template>
-  <v-footer dark padless>
-    <v-card flat tile class="indigo lighten-1 white--text text-center">
-      <v-card-text>
-        <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
-          <v-icon size="24px">
-            {{ icon }}
-          </v-icon>
-        </v-btn>
-      </v-card-text>
-
-      <v-card-text class="white--text pt-0">
-        Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
-        Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
-        accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
-        sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
-        lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
-        iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor
-        vel ut orci. Orci varius natoque penatibus et magnis dis parturient
-        montes, nascetur ridiculus mus.
-      </v-card-text>
-
-      <v-divider />
-
-      <div class="footer-bottom">
-        <div class="footer-bottom-left">
-          <figure class="payment">
-            <img
-              src="~/assets/images/payment.png"
-              alt="payment"
-              width="159"
-              height="29"
-            >
-          </figure>
-        </div>
-        <p class="copyright">
-          Riode eCommerce © 2022. All Rights Reserved
-        </p>
-        <div class="footer-bottom-right">
-          <div class="social-link">
-            <v-btn
-              v-for="icon in icons"
-              :key="icon"
-              class="mx-4 white--text"
-              icon
-            >
-              <v-icon size="24px">
-                {{ icon }}
-              </v-icon>
-            </v-btn>
-          </div>
-        </div>
+  <v-footer class="mt-12 flex-wrap" min-height="350px" dark padless>
+    <v-row class="d-flex justify-space-between align-center">
+      <v-col
+        cols="12"
+        md="3"
+      >
+        <v-img
+          width="153px"
+          src="https://d-themes.com/html/riode/images/logo-footer.png"
+        />
+      </v-col>
+      <div class="flex-column">
+        <h3>Subscribe to our Newsletter</h3>
+        <h4>Get all the latest information, Sales and Offers.</h4>
       </div>
-    </v-card>
+      <v-col
+        cols="12"
+        md="4"
+      >
+      <v-text-field label="email address here ..."></v-text-field>
+    </v-col>
+    <v-btn color="primary">SUBSCRIBE</v-btn>
+    </v-row>
+    <v-divider></v-divider>
   </v-footer>
 </template>
 
 <script>
 export default {
+  name: 'FooterBar',
   data: () => ({
-    icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
+    icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram'],
+    img: 'https://d-themes.com/html/riode/images/logo-footer.png'
   })
 }
 </script>
 
-<style>
-.footer-bottom-left {
-  position: absolute;
-  left: 0;
-}
-
-.footer-bottom-right {
-  position: absolute;
-  right: 0;
-}
-
-.copyright {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>
+<style></style>

components/user/NavBar.vue

 <template>
   <v-container>
-    <div class="navbar d-flex justify-space-between col-md-7">
-      <div>
-        <span>
-          Home
-        </span>
-      </div>
-      <div class="dropdown">
-        <span>
-          Products
-        </span>
-        <v-icon>mdi-chevron-down</v-icon>
-        <div class="dropdown-content elevation-10" :elevation="2">
-          <v-treeview
-            :active.sync="active"
-            rounded
-            dense
-            hoverable
-            activatable
-            :items="categories"
-          />
+    <div class="navbar d-flex justify-space-between ">
+      <div class="d-flex justify-space-between col-md-7">
+        <div>
+          <span>
+            Home
+          </span>
+        </div>
+        <div class="dropdown">
+          <span>
+            Products
+          </span>
+          <v-icon>mdi-chevron-down</v-icon>
+          <div class="dropdown-content elevation-10" :elevation="2">
+            <v-treeview
+              :active.sync="active"
+              rounded
+              dense
+              hoverable
+              activatable
+              :items="categories"
+              @update:active="setCategory(item)"
+            >
+              <template #label="{ item }">
+                <nuxt-link :to="`/home-page/categories/${item.id}`" tag="div">
+                  {{ item.name }}
+                </nuxt-link>
+              </template>
+            </v-treeview>
+          </div>
+        </div>
+        <div>
+          <span>
+            Pages
+          </span>
+        </div>
+        <div>
+          <span>
+            Blogs
+          </span>
+        </div>
+        <div>
+          <span>
+            About
+          </span>
         </div>
       </div>
-      <div>
-        <span>
-          Pages
-        </span>
-      </div>
-      <div>
-        <span>
-          Blogs
+      <div class="d-flex align-center ">
+        <v-icon>mdi-tag</v-icon>
+        <span class="mx-2">
+          Special offer!
         </span>
-      </div>
-      <div>
-        <span>
-          About
+        <span class="mx-2">
+          Buy riode
         </span>
       </div>
     </div>
@@ -42,6 +60,8 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex'
+
 export default {
   name: 'NavBar',
   data: () => ({
@@ -51,11 +71,14 @@ export default {
   }),
 
   computed: {
+    ...mapState(['selectedCategory']),
+    ...mapActions(['setSelectedCategory']),
     selected () {
       if (!this.active.length) { return undefined }
       const id = this.active[0]
       console.log(id)
-      return this.categories.find(category => category.id === id)
+      // console.log(this.categories.find(category => category.id === id).name)
+      return this.categories.find(category => category.id === id) || ''
     }
   },
 
@@ -63,11 +86,10 @@ export default {
     selected () {
       if (!this.active.length) { return undefined }
       const id = this.active[0]
-      return id
+      return id || ''
     }
   },
-
-  created () {
+  beforeCreate () {
     this.$axios
       .get('guest/categories/index')
       .then((response) => {
@@ -77,8 +99,13 @@ export default {
         console.log(error)
       })
   },
-
+  mounted () {
+  },
   methods: {
+    setCategory () {
+      console.log(this.selected)
+      this.$store.commit('category/setCurrentCategory', this.selected.name || '')
+    }
   }
 }
 </script>

layouts/user.vue

 <template>
   <v-app>
-    <UserHeader />
+    <UserHeader ref="child" />
     <Nuxt />
+    <FooterBar />
   </v-app>
 </template>
 
 <script>
 import Header from '@/components/user/Header'
+import FooterBar from '@/components/FooterBar'
 
 export default {
   component: {
-    Header
+    Header,
+    FooterBar
   },
+  components: { FooterBar },
   created () {
     this.changeColor()
   },
@@ -25,5 +29,7 @@ export default {
 </script>
 
 <style>
-
+  body{
+    font-family: monospace;
+  }
 </style>

nuxt.config.js

@@ -29,7 +29,8 @@ export default {
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     '~/plugins/axios.js',
-    '~/plugins/formatTime.js'
+    '~/plugins/formatTime.js',
+    '~/plugins/eventBus.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

pages/about.vue

 <template>
   <div>
-  <div>
-    <h1 style="text-align: center">ABOUT</h1>
-  </div>  
+    <div>
+      <h1 style="text-align: center">
+        ABOUT
+      </h1>
+    </div>
   </div>
-</template>
+</template>
\ No newline at end of file

pages/login.vue

@@ -120,6 +120,7 @@ export default {
         localStorage.setItem('token', resp.data.data.bearer_token)
         this.$auth.$storage.setUniversal('token', resp.data.data.bearer_token)
         this.$auth.$storage.setUniversal('userName', resp.data.data.name)
+        this.$auth.$storage.setUniversal('ID', resp.data.data.id)
         this.$auth.$storage.setUniversal('loggedIn', 'true')
         if (resp.status === 200) {
           this.$toast.success('Successfully authenticated', {

store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
+
 Vue.use(Vuex)
 
-export const store = new Vuex.Store({
-  modules: {
-  }
+export const state = () => ({
+  products: []
 })
+
+export const mutations = {
+  setProducts (state, products) {
+    state.products = products
+  },
+  addProduct (state, product) {
+    state.products.push(product)
+  }
+}
+
+export const actions = {
+  async fetchProducts ({ commit }) {
+    // Lấy dữ liệu sản phẩm từ API
+    const products = await fetch('https://example.com/products')
+      .then(response => response.json())
+      .then(data => data)
+
+    // Lưu dữ liệu sản phẩm vào store Vuex
+    commit('setProducts', products)
+  }
+}
+
+export const getters = {
+  getProductById: state => (id) => {
+    return state.products.find(product => product.id === id)
+  }
+}
+
+export const strict = false