feat(ui): add sidebar navigation for desktop

src/components/AppSidebar.tsx

@@ -0,0 +1,211 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+} from "../components/ui/sidebar";
+
+import {
+  ChevronDown,
+  BookOpen,
+  Home,
+  Video,
+  User,
+  Target,
+  Zap,
+  Trophy,
+  LayoutGrid,
+} from "lucide-react";
+
+import { useState } from "react";
+import logo from "../assets/ed_logo1.png";
+import { NavLink } from "react-router-dom";
+
+export function AppSidebar() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Sidebar className="border-r bg-black text-white">
+      {/* HEADER */}
+      <SidebarHeader>
+        <div className="flex items-center justify-between px-2 py-2 rounded-lg hover:bg-white/10 cursor-pointer">
+          <div className="flex items-center gap-3">
+            <div className="flex rounded-md w-10 h-10 border overflow-hidden">
+              <img
+                src={logo}
+                className="w-full h-full object-cover object-left"
+                alt="Logo"
+              />
+            </div>
+
+            <div className="flex flex-col text-sm">
+              <span className="font-satoshi-medium text-black">
+                Edbridge Scholars
+              </span>
+              <span className="text-xs text-gray-400 font-satoshi">
+                Student
+              </span>
+            </div>
+          </div>
+          <ChevronDown size={16} />
+        </div>
+      </SidebarHeader>
+
+      {/* CONTENT */}
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel className="text-gray-400 font-satoshi">
+            Platform
+          </SidebarGroupLabel>
+
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <NavLink
+                  to="/student/home"
+                  className={({ isActive }) =>
+                    isActive
+                      ? "bg-zinc-800 text-white"
+                      : "text-zinc-400 hover:bg-zinc-800"
+                  }
+                >
+                  <Home size={18} className="text-black" />
+                  <span className="font-satoshi text-black">Home</span>
+                </NavLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                className="cursor-pointer"
+                asChild
+                onClick={() => setOpen(!open)}
+              >
+                <div>
+                  <BookOpen size={18} className="text-black" />
+                  <span className="font-satoshi text-black">Practice</span>
+
+                  <ChevronDown
+                    size={16}
+                    className={`ml-auto transition-transform ${
+                      open ? "rotate-180" : ""
+                    }`}
+                  />
+                </div>
+              </SidebarMenuButton>
+              {open && (
+                <SidebarMenuSub className="space-y-3 mt-2">
+                  <NavLink
+                    to="/student/practice"
+                    className="text-black text-sm flex items-center gap-3"
+                  >
+                    <LayoutGrid size={18} className="text-black" />
+                    <span className="font-satoshi text-black">
+                      Practice your way
+                    </span>
+                  </NavLink>
+                  <NavLink
+                    to="/student/practice/targeted-practice"
+                    className="text-black text-sm flex items-center gap-3"
+                  >
+                    <Target size={18} className="text-black" />
+                    <span className="font-satoshi text-black">
+                      Targeted Practice
+                    </span>
+                  </NavLink>
+
+                  <NavLink
+                    to="/student/practice/drills"
+                    className="text-black text-sm flex items-center gap-3"
+                  >
+                    <Zap size={18} className="text-black" />
+                    <span className="font-satoshi text-black">Drills</span>
+                  </NavLink>
+                  <NavLink
+                    to="/student/practice/hard-test-modules"
+                    className="text-black text-sm flex items-center gap-3"
+                  >
+                    <Trophy size={18} className="text-black" />
+                    <span className="font-satoshi text-black">
+                      Hard Test Modules
+                    </span>
+                  </NavLink>
+                </SidebarMenuSub>
+              )}
+            </SidebarMenuItem>
+
+            {/* DOCS */}
+            <SidebarMenuItem>
+              <NavLink
+                to={`/student/lessons`}
+                className={({ isActive }) =>
+                  isActive
+                    ? "bg-zinc-800 text-white"
+                    : "text-zinc-400 hover:bg-zinc-800"
+                }
+              >
+                <SidebarMenuButton className="cursor-pointer">
+                  <Video size={18} className="text-black" />
+                  <span className="text-black font-satoshi">Lessons</span>
+                </SidebarMenuButton>
+              </NavLink>
+            </SidebarMenuItem>
+
+            {/* SETTINGS */}
+            <SidebarMenuItem>
+              <NavLink
+                to={`/student/rewards`}
+                className={({ isActive }) =>
+                  isActive
+                    ? "bg-zinc-800 text-white"
+                    : "text-zinc-400 hover:bg-zinc-800"
+                }
+              >
+                <SidebarMenuButton className="cursor-pointer">
+                  <Trophy size={18} className="text-black" />
+                  <span className="text-black font-satoshi">Rewards</span>
+                </SidebarMenuButton>
+              </NavLink>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <NavLink
+                to={`/student/profile`}
+                className={({ isActive }) =>
+                  isActive
+                    ? "bg-zinc-800 text-white"
+                    : "text-zinc-400 hover:bg-zinc-800"
+                }
+              >
+                <SidebarMenuButton className="cursor-pointer">
+                  <User size={18} className="text-black" />
+                  <span className="text-black font-satoshi">Profile</span>
+                </SidebarMenuButton>
+              </NavLink>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      {/* FOOTER */}
+      <SidebarFooter>
+        <div className="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-white/10 cursor-pointer">
+          <img
+            src="https://i.pravatar.cc/40"
+            className="w-8 h-8 rounded-full"
+          />
+          <div className="flex flex-col text-sm">
+            <span className="font-medium text-black">shadcn</span>
+            <span className="text-xs text-gray-400">m@example.com</span>
+          </div>
+          <ChevronDown size={16} className="ml-auto" />
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}