DoneAuthContext

app/components/TabBar.jsx

@@ -2,41 +2,59 @@
 
 import React from "react";
 import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "../context/AuthContext";
 
 const TabBar = () => {
   const router = useRouter();
+  const pathname = usePathname();
+  const { user } = useAuth();
+
+  if (!user) return null; // не показываем таббар, если не залогинен
+
+  // маршруты по ролям
+  const routesByRole = {
+    user: [
+      { key: "home", icon: FaHome, href: "/createRequest" },
+      { key: "history", icon: FaClock, href: "/historyRequest" },
+      { key: "news", icon: FaNewspaper, href: "/news" },
+      { key: "profile", icon: FaCog, href: "/ProfilePage" },
+    ],
+    volunteer: [
+      { key: "home", icon: FaHome, href: "/mainValounter" },
+      { key: "history", icon: FaClock, href: "/valounterHistoryRequest" },
+      { key: "news", icon: FaNewspaper, href: "/volunteer/news" },
+      { key: "profile", icon: FaCog, href: "/volunterProfile" },
+    ],
+    moderator: [
+      { key: "queue", icon: FaHome, href: "/moderator/home" },
+      { key: "history", icon: FaClock, href: "/moderator/history" },
+      { key: "news", icon: FaNewspaper, href: "/moderator/news" },
+      { key: "profile", icon: FaCog, href: "/moderator/profile" },
+    ],
+  };
+
+  const tabs = routesByRole[user.role] || [];
 
   return (
     <nav className="fixed bottom-0 left-0 right-0 flex justify-center">
       <div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
-        <button
-          type="button"
-          onClick={() => router.push("/createRequest")}
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaHome size={20} />
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push("/historyRequest")}
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaClock size={20} />
-        </button>
-        <button
-          type="button"
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaNewspaper size={20} />
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push("/ProfilePage")}
-          className="flex flex-col items-center gap-1 text-[#90D2F9]"
-        >
-          <FaCog size={20} />
-        </button>
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const active = pathname === tab.href;
+          return (
+            <button
+              key={tab.key}
+              type="button"
+              onClick={() => router.push(tab.href)}
+              className={`flex flex-col items-center gap-1 ${
+                active ? "text-[#90D2F9]" : "text-gray-400"
+              }`}
+            >
+              <Icon size={20} />
+            </button>
+          );
+        })}
       </div>
     </nav>
   );