feat(nav): implement tab-based navigation system

2026-01-11 19:37:45 +06:00
parent 1506c25796
commit 5f95b92e4b
17 changed files with 512 additions and 88 deletions
--- a/src/pages/student/StudentLayout.tsx
+++ b/src/pages/student/StudentLayout.tsx
@ -0,0 +1,96 @@
+import { Outlet, NavLink, useNavigate } from "react-router-dom";
+import { Home, BookOpen, TrendingUp, Award, User, Menu } from "lucide-react";
+import { useAuthStore } from "../../stores/authStore";
+
+export function StudentLayout() {
+  // const user = useAuthStore((state) => state.user);
+  const logout = useAuthStore((state) => state.logout);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate("/login");
+  };
+
+  const navItems = [
+    { to: "/student/home", icon: Home, label: "Home" },
+    { to: "/student/practice", icon: BookOpen, label: "Practice" },
+    { to: "/student/progress", icon: TrendingUp, label: "Progress" },
+    { to: "/student/rewards", icon: Award, label: "Rewards" },
+    { to: "/student/profile", icon: User, label: "Profile" },
+  ];
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* Top Header */}
+      <header className="bg-white shadow-sm sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-22">
+            <div className="flex items-center gap-3">
+              <img
+                src="../../src/assets/ed_logo.png"
+                alt="EdBridge logo"
+                className="h-10 w-auto object-contain"
+                draggable={false}
+              />
+            </div>
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-2 text-slate-600 hover:text-slate-700 transition px-3 py-2 rounded-lg hover:bg-red-50"
+            >
+              <Menu size={22} />
+              <span className="text-sm font-medium hidden sm:inline">
+                Logout
+              </span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 pb-20 overflow-y-auto">
+        <Outlet />
+      </main>
+
+      {/* Bottom Tab Navigation */}
+      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-20">
+        <div className="max-w-7xl mx-auto px-2">
+          <div className="flex justify-around items-center">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                className={({ isActive }) =>
+                  `flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 ${
+                    isActive
+                      ? "text-indigo-600"
+                      : "text-gray-500 hover:text-gray-700"
+                  }`
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <item.icon
+                      size={24}
+                      className={`mb-1 transition-transform ${
+                        isActive ? "scale-110" : ""
+                      }`}
+                      strokeWidth={isActive ? 2.5 : 2}
+                    />
+                    <span
+                      className={`text-xs font-medium ${
+                        isActive ? "font-semibold" : ""
+                      }`}
+                    >
+                      {item.label}
+                    </span>
+                  </>
+                )}
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}