From d0009e96a9cda1bf0979a014684ee5970528315e Mon Sep 17 00:00:00 2001
From: namnd <n_duynam@thk-hd.vn>
Date: Tue, 9 Dec 2025 13:30:25 +0700
Subject: [PATCH] refactor ui user

---
 google6ea4f563230cd745.html                   |  1 +
 src/components/PopularPost/Popular.jsx        | 76 +++++++++----------
 .../app-layouts/user-layouts/FooterNav.jsx    |  4 +-
 .../HeaderNav/GroupCategoryMenu.jsx           | 53 ++++++++++---
 src/services/userServices/groupServices.js    | 10 +++
 src/stores/user-store/UserStore.js            | 11 +++
 6 files changed, 105 insertions(+), 50 deletions(-)
 create mode 100644 google6ea4f563230cd745.html

diff --git a/google6ea4f563230cd745.html b/google6ea4f563230cd745.html
new file mode 100644
index 0000000..3b73ae2
--- /dev/null
+++ b/google6ea4f563230cd745.html
@@ -0,0 +1 @@
+google-site-verification: google6ea4f563230cd745.html
\ No newline at end of file
diff --git a/src/components/PopularPost/Popular.jsx b/src/components/PopularPost/Popular.jsx
index 7e59a0d..23f22c7 100644
--- a/src/components/PopularPost/Popular.jsx
+++ b/src/components/PopularPost/Popular.jsx
@@ -31,49 +31,47 @@ const Popular = ({ data }) => {
     ],
   };
   return (
-    <>
-      <section className="popular">
-        <HeadingSection title="Popular" />
-        <div className="content">
-          <Slider {...settings}>
-            {data?.map((val) => {
-              return (
-                <Link
-                  to={`/${val.slug}/detail`}
-                  className="text-black"
-                  title={val?.title}
-                  key={val?.id}
-                >
-                  <div className="items">
-                    <div className="shadow box">
-                      <div className="images row">
-                        <div className="img">
-                          <img src={val?.photo} alt="" loading="lazy" />
-                        </div>
-                        <div className="category category1">
-                          <span>{val?.category?.name}</span>
-                        </div>
+    <section className="popular">
+      <HeadingSection title="Popular" />
+      <div className="content">
+        <Slider {...settings}>
+          {data?.map((val) => {
+            return (
+              <Link
+                to={`/${val.slug}/detail`}
+                className="text-black"
+                title={val?.title}
+                key={val?.id}
+              >
+                <div className="items">
+                  <div className="shadow box">
+                    <div className="images row">
+                      <div className="img">
+                        <img src={val?.photo} alt="" loading="lazy" />
                       </div>
-                      <div className="text row">
-                        <h1 className="truncate title">{val?.title}</h1>
-                        <Flex className="date" gap="small" align="center">
-                          <CalendarOutlined />
-                          <label>{val?.created_at}</label>
-                        </Flex>
-                        <Flex className="comment" gap="small" align="center">
-                          <EyeOutlined />
-                          <label>{val?.view}</label>
-                        </Flex>
+                      <div className="category category1">
+                        <span>{val?.category?.name}</span>
                       </div>
                     </div>
+                    <div className="text row">
+                      <h1 className="truncate title">{val?.title}</h1>
+                      <Flex className="date" gap="small" align="center">
+                        <CalendarOutlined />
+                        <label>{val?.created_at}</label>
+                      </Flex>
+                      <Flex className="comment" gap="small" align="center">
+                        <EyeOutlined />
+                        <label>{val?.view}</label>
+                      </Flex>
+                    </div>
                   </div>
-                </Link>
-              );
-            })}
-          </Slider>
-        </div>
-      </section>
-    </>
+                </div>
+              </Link>
+            );
+          })}
+        </Slider>
+      </div>
+    </section>
   );
 };
 
diff --git a/src/layouts/app-layouts/user-layouts/FooterNav.jsx b/src/layouts/app-layouts/user-layouts/FooterNav.jsx
index a3a88b2..8be091c 100644
--- a/src/layouts/app-layouts/user-layouts/FooterNav.jsx
+++ b/src/layouts/app-layouts/user-layouts/FooterNav.jsx
@@ -1,7 +1,9 @@
 import { Layout } from "antd";
+import { useMemo } from "react";
 const { Footer } = Layout;
 const FooterNav = () => {
-  return <Footer className="bg-slate-200 text-center">©Copyright by dev3h 2023 </Footer>;
+  const currentYear = useMemo(() => new Date().getFullYear(), []);
+  return <Footer className="bg-slate-200 text-center">©Copyright by dev3h {currentYear} </Footer>;
 };
 
 export default FooterNav;
diff --git a/src/layouts/app-layouts/user-layouts/HeaderNav/GroupCategoryMenu.jsx b/src/layouts/app-layouts/user-layouts/HeaderNav/GroupCategoryMenu.jsx
index e0bd5d7..7f5923e 100644
--- a/src/layouts/app-layouts/user-layouts/HeaderNav/GroupCategoryMenu.jsx
+++ b/src/layouts/app-layouts/user-layouts/HeaderNav/GroupCategoryMenu.jsx
@@ -1,28 +1,61 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Flex } from "antd";
+import { DownOutlined } from "@ant-design/icons";
 import "./menu.css";
 import { useUserStore } from "@/stores/user-store/UserStore";
 import { Link } from "react-router-dom";
 
 const GroupCategoryMenu = () => {
-  const { groupCategories, getGroupCategories } = useUserStore();
+  const { groups, getAllGroups } = useUserStore();
+  const [openDropdown, setOpenDropdown] = useState(null);
+
   useEffect(() => {
-    getGroupCategories();
-  }, []);
+    getAllGroups();
+  }, [getAllGroups]);
+
+  const handleMouseEnter = (groupId) => {
+    setOpenDropdown(groupId);
+  };
+
+  const handleMouseLeave = () => {
+    setOpenDropdown(null);
+  };
+
   return (
     <Flex className="flex-1 px-4" justify="center" gap="small">
-      {groupCategories?.map((val) => {
+      {groups?.map((group) => {
+        const hasCategories = group?.categories && group.categories.length > 0;
         return (
           <div
-            className="menu-item w-[200px] text-center cursor-pointer  transition-all"
-            key={val?.id}
+            className="menu-item relative w-[200px] text-center cursor-pointer transition-all"
+            key={group?.id}
+            onMouseEnter={() => handleMouseEnter(group?.id)}
+            onMouseLeave={handleMouseLeave}
           >
             <Link
-              className="inline-block w-full h-full text-black transition-all hover:text-orange-400"
-              to={`/group/${val?.slug}`}
+              className="inline-block w-full h-full text-black transition-all hover:text-orange-400 py-2"
+              to={`/group/${group?.slug}`}
             >
-              {val?.name}
+              <Flex justify="center" align="center" gap="small">
+                <span>{group?.name}</span>
+                {hasCategories && <DownOutlined className="text-xs" />}
+              </Flex>
             </Link>
+
+            {/* Dropdown menu for categories */}
+            {hasCategories && openDropdown === group?.id && (
+              <div className="absolute top-full left-0 w-full bg-white shadow-lg rounded-md py-2 z-50 border border-gray-200">
+                {group.categories.map((category) => (
+                  <Link
+                    key={category?.id}
+                    to={`/category/${category?.slug}`}
+                    className="block px-4 py-2 text-black hover:bg-gray-100 hover:text-orange-400 transition-all"
+                  >
+                    {category?.name}
+                  </Link>
+                ))}
+              </div>
+            )}
           </div>
         );
       })}
diff --git a/src/services/userServices/groupServices.js b/src/services/userServices/groupServices.js
index e7ac40b..2c6c2d6 100644
--- a/src/services/userServices/groupServices.js
+++ b/src/services/userServices/groupServices.js
@@ -35,6 +35,16 @@ class groupServices {
       console.log(error);
     }
   }
+  static async getAllGroups() {
+    try {
+      const response = await axiosInstance.get(`/user/group`);
+      const data = response.data;
+      return data;
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
+  }
 }
 
 export default groupServices;
diff --git a/src/stores/user-store/UserStore.js b/src/stores/user-store/UserStore.js
index 383f1e4..5d711d8 100644
--- a/src/stores/user-store/UserStore.js
+++ b/src/stores/user-store/UserStore.js
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import postServices from "@/services/userServices/postServices";
 import userAuthServices from "@/services/authServices/userAuthServices";
+import groupServices from "@/services/userServices/groupServices";
 
 export const useUserAuthStore = create((set) => ({
   token: JSON.parse(localStorage.getItem("user"))?.token,
@@ -28,6 +29,7 @@ export const useUserAuthStore = create((set) => ({
 
 export const useUserStore = create((set) => ({
   groupCategories: [],
+  groups: [],
   userIP: "",
   setGroupCategories: (groupCategories) => set({ groupCategories }),
   setUserIP: (userIP) => set({ userIP }),
@@ -40,6 +42,15 @@ export const useUserStore = create((set) => ({
       console.log(error);
     }
   },
+  getAllGroups: async () => {
+    try {
+      const response = await groupServices.getAllGroups();
+      set({ groups: response });
+    } catch (error) {
+      console.log(error);
+      set({ groups: [] });
+    }
+  },
   getUserIP: async () => {
     try {
       const response = await fetch("/ipify");