shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add sidebar navigation for desktop

Browse Source
This commit is contained in:
shafin-r
2026-02-15 17:24:11 +06:00
parent 96eb2c13b0
commit e5305a1ca2
10 changed files with 1274 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/student/StudentLayout.tsx
View File

@ -1,5 +1,7 @@
import { Outlet, NavLink } from "react-router-dom";
import { Home, BookOpen, Award, User, Video } from "lucide-react";
import { SidebarProvider, SidebarTrigger } from "../../components/ui/sidebar";
import { AppSidebar } from "../../components/AppSidebar";
export function StudentLayout() {
const navItems = [
@ -11,51 +13,54 @@ export function StudentLayout() {
];
return (
<div className="flex flex-col min-h-screen bg-gray-50">
{/* Main Content */}
<main className="flex-1 pb-20 overflow-y-auto">
<Outlet />
</main>
<SidebarProvider>
<div className="min-h-screen flex w-full">
{/* Desktop Sidebar */}
<AppSidebar />
<main className="flex-1">
<SidebarTrigger className="hidden md:block" />
<Outlet />
</main>
{/* Bottom Tab Navigation */}
<nav className="fixed rounded-t-4xl pt-2 bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-4xl 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 font-satoshi tracking-wide ${
isActive
? "text-purple-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>
))}
<nav className="fixed bottom-0 left-0 right-0 rounded-t-4xl pt-2 bg-white border-t border-gray-200 shadow-4xl z-20 md:hidden">
<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 font-satoshi tracking-wide ${
isActive
? "text-purple-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>
</div>
</nav>
</div>
</nav>
</div>
</SidebarProvider>
);
}