feat: responsive for web with sidebar and different styling for test ui on web
This commit is contained in:
@ -16,201 +16,263 @@ import {
|
||||
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";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { useAuthStore } from "../stores/authStore";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
|
||||
export function AppSidebar() {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [open, setOpen] = useState(false);
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const navigate = useNavigate();
|
||||
|
||||
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>
|
||||
<Sidebar
|
||||
variant="floating"
|
||||
className="pointer-events-none border-0 bg-transparent px-0 py-0"
|
||||
>
|
||||
<div className="pointer-events-auto fixed inset-y-2 left-2 flex w-64 flex-col overflow-hidden rounded-[1.75rem] bg-[rgba(249,240,255,0.82)] shadow-[0_18px_45px_rgba(15,23,42,0.16)] transition-colors duration-300">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(168,85,247,0.18),transparent_55%),radial-gradient(circle_at_bottom,rgba(249,115,22,0.1),transparent_55%)]" />
|
||||
|
||||
<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 className="relative flex h-full flex-col">
|
||||
{/* HEADER */}
|
||||
<SidebarHeader className="px-3 pb-4 pt-1">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<div className="flex items-center gap-3 rounded-2xl px-2 py-2">
|
||||
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-linear-to-br from-purple-400 to-purple-500 shadow-[0_6px_18px_rgba(168,85,247,0.55)]">
|
||||
<img
|
||||
src={logo}
|
||||
className="h-full w-full object-cover object-left"
|
||||
alt="Logo"
|
||||
/>
|
||||
</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>
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-satoshi-medium text-slate-900">
|
||||
Edbridge Scholars
|
||||
</span>
|
||||
<span className="font-satoshi text-xs text-slate-400">
|
||||
Student
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
<NavLink
|
||||
to="/student/practice/drills"
|
||||
className="text-black text-sm flex items-center gap-3"
|
||||
{/* CONTENT */}
|
||||
<SidebarContent className="px-1">
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="px-2 text-[0.7rem] font-satoshi tracking-[0.16em] text-slate-400">
|
||||
PLATFORM
|
||||
</SidebarGroupLabel>
|
||||
|
||||
<SidebarMenu className="mt-1 space-y-1.5">
|
||||
{/* HOME */}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
>
|
||||
<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"
|
||||
<NavLink
|
||||
to="/student/home"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Home
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-orange-400" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Home</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
{/* PRACTICE */}
|
||||
<SidebarMenuItem
|
||||
onMouseEnter={() => setOpen(true)}
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
>
|
||||
<SidebarMenuButton
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
asChild
|
||||
>
|
||||
<Trophy size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">
|
||||
Hard Test Modules
|
||||
</span>
|
||||
</NavLink>
|
||||
</SidebarMenuSub>
|
||||
)}
|
||||
</SidebarMenuItem>
|
||||
<NavLink
|
||||
to="/student/practice"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<BookOpen
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-purple-500" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Practice</span>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`ml-auto text-slate-400 transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
{open && (
|
||||
<SidebarMenuSub className="mt-2 space-y-1.5 pl-3">
|
||||
<NavLink
|
||||
to="/student/practice/targeted-practice"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
|
||||
isActive
|
||||
? "bg-white text-slate-900"
|
||||
: "text-slate-500 hover:bg-white hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Target size={18} className="text-slate-400" />
|
||||
<span>Targeted Practice</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/student/practice/drills"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
|
||||
isActive
|
||||
? "bg-white text-slate-900"
|
||||
: "text-slate-500 hover:bg-white hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Zap size={18} className="text-slate-400" />
|
||||
<span>Drills</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/student/practice/hard-test-modules"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
|
||||
isActive
|
||||
? "bg-white text-slate-900"
|
||||
: "text-slate-500 hover:bg-white hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Trophy size={18} className="text-slate-400" />
|
||||
<span>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>
|
||||
{/* LESSONS */}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
>
|
||||
<NavLink
|
||||
to="/student/lessons"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Video
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-cyan-500" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Lessons</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</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>
|
||||
{/* REWARDS */}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
>
|
||||
<NavLink
|
||||
to="/student/rewards"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Trophy
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-emerald-500" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Rewards</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</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">
|
||||
<Avatar>
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback className="font-satoshi-bold bg-linear-to-br from-purple-400 to-purple-500 uppercase">
|
||||
{user?.name.slice(0, 1)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-medium text-black">{user?.name}</span>
|
||||
<span className="text-xs text-gray-400">{user?.email}</span>
|
||||
</div>
|
||||
<ChevronDown size={16} className="ml-auto" />
|
||||
{/* FOOTER – links to profile */}
|
||||
<SidebarFooter className="mt-auto px-3 pb-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/student/profile")}
|
||||
className="flex w-full items-center gap-3 rounded-2xl bg-white/60 px-3 py-2 text-left shadow-sm ring-1 ring-white/80 hover:bg-white"
|
||||
>
|
||||
<Avatar>
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback className="bg-linear-to-br from-purple-400 to-purple-500 font-satoshi-bold uppercase text-white">
|
||||
{user?.name.slice(0, 1)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-medium text-slate-900">{user?.name}</span>
|
||||
<span className="text-xs text-slate-400">{user?.email}</span>
|
||||
</div>
|
||||
<ChevronDown size={16} className="ml-auto text-slate-400" />
|
||||
</button>
|
||||
</SidebarFooter>
|
||||
</div>
|
||||
</SidebarFooter>
|
||||
</div>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user