MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile-nav): enhance responsive sidebar with user info and auth actions

Browse Source 
- Remove userRole prop, read user directly from auth store
- Add user info section (avatar, name, email) when logged in
- Add Masuk/Daftar buttons at bottom when unauthenticated
- Add Keluar button with loading state when authenticated
- Add tagline under logo in sidebar header
- Add backdrop blur effect for better visual depth
- Use flex-col layout for consistent spacing at any height
This commit is contained in:
seriouselly
2026-06-06 02:15:43 +07:00
parent 5129bbe958
commit 9f9098b91b
14 changed files with 137 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/catalog-page.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export function CatalogPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div>
<h1 className="text-2xl font-bold text-emerald-800">Pustaka Penyakit</h1>
<p className="text-gray-500 mt-1 text-md">
apps/web/src/pages/dashboard-page.tsx
+10 -10
View File
@@ -77,13 +77,13 @@ export function DashboardPage() {
style={{ backgroundImage: `url(${bg})` }}
>
<div className="absolute inset-0 bg-gradient-to-b from-[#2F6E1A]/60 to-black/30" />
<div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 p-10">
<div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 p-6 md:p-10">
<div className="space-y-3 w-full md:w-2/3 text-white">
<span className="inline-block rounded-full bg-[#1E8A2A]/80 px-4 py-2 text-xs font-semibold">
AI FOR SMART EDUCATION
</span>
<h1 className="text-4xl font-extrabold">Selamat Datang di</h1>
<h2 className="text-4xl font-extrabold tracking-tight text-[#9AD872]">
<h1 className="text-2xl md:text-4xl font-extrabold">Selamat Datang di</h1>
<h2 className="text-2xl md:text-4xl font-extrabold tracking-tight text-[#9AD872]">
ZeaVis Edu
</h2>
<p className="mt-3 max-w-xl text-white/90">
@@ -91,11 +91,11 @@ export function DashboardPage() {
Indonesia mendeteksi penyakit daun secara mandiri, cepat, dan
akurat.
</p>
<div className="mt-6 flex items-center gap-4">
<div className="mt-6 flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
<Button
asChild
variant="outline"
className="bg-[#306D29] hover:bg-[#1E8A2A]/90 px-6 py-6 text-lg font-semibold text-white"
className="bg-[#306D29] hover:bg-[#1E8A2A]/90 px-4 md:px-6 py-3 md:py-6 text-sm md:text-lg font-semibold text-white"
>
<Link to="/scan" className="inline-flex items-center gap-2">
<Scan className="h-5 w-6" />
@@ -105,7 +105,7 @@ export function DashboardPage() {
<Button
asChild
variant="outline"
className="px-6 py-6 text-lg font-semibold text-white hover:bg-[#1E8A2A]"
className="px-4 md:px-6 py-3 md:py-6 text-sm md:text-lg font-semibold text-white hover:bg-[#1E8A2A]"
>
<Link
to="/catalog"
@@ -149,7 +149,7 @@ export function DashboardPage() {
}
>
<div className="md:col-span-4 text-xl font-bold">
<h3 className="text-[24px] font-extrabold text-[#214B11]">
<h3 className="text-lg md:text-[24px] font-extrabold text-[#214B11]">
Proyek Urgensi
</h3>
<p className="text-[15px] font-normal text-muted-foreground">
@@ -231,7 +231,7 @@ export function DashboardPage() {
{/* Mission section */}
<section className="space-y-5 rounded-4xl bg-[#EEF4E8] py-6 md:py-8">
<div className="space-y-1">
<h3 className="text-[24px] font-extrabold text-[#214B11]">
<h3 className="text-lg md:text-[24px] font-extrabold text-[#214B11]">
Misi Platform
</h3>
<p className="text-[15px] font-normal text-muted-foreground">
@@ -272,7 +272,7 @@ export function DashboardPage() {
<section className="space-y-4">
<div className="mb-2 flex items-start justify-between">
<div>
<h3 className="text-[24px] font-extrabold text-[#214B11]">
<h3 className="text-lg md:text-[24px] font-extrabold text-[#214B11]">
Penyakit yang Dapat Dideteksi
</h3>
<p className="text-[15px] font-normal text-muted-foreground">
@@ -322,7 +322,7 @@ export function DashboardPage() {
</section>
{/* Scan quick access */}
<div className="mt-12 flex items-center gap-6 bg-[#1E8A2A] rounded-3xl p-6">
<div className="mt-12 flex flex-col sm:flex-row items-center gap-4 sm:gap-6 bg-[#1E8A2A] rounded-3xl p-5 sm:p-6">
<div className="flex-1 text-white">
<h3 className="text-2xl font-bold">Siap Mendeteksi Penyakit Daun?</h3>
<p className="text-sm text-[#9AD872] font-normal mt-2">
apps/web/src/pages/diagnoses-page.tsx
+2 -2
View File
@@ -114,7 +114,7 @@ export function DiagnosesPage() {
))}
</select>
<div className="ml-auto text-sm text-muted-foreground">
<div className="w-full sm:w-auto sm:ml-auto text-sm text-muted-foreground">
Total: {filtered.length}
</div>
</div>
@@ -150,7 +150,7 @@ export function DiagnosesPage() {
<img
src={d.imageUrl}
alt="Daun"
className="h-24 w-24 rounded-md object-cover bg-muted"
className="h-16 md:h-24 w-16 md:w-24 rounded-md object-cover bg-muted shrink-0"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
apps/web/src/pages/diagnosis-detail-page.tsx
+8 -10
View File
@@ -14,23 +14,22 @@ export function DiagnosisDetailPage() {
enabled: Boolean(id),
});
if (query.isLoading) return <main className="p-8 text-center text-muted-foreground">Memuat diagnosis...</main>;
if (query.error || !query.data) return <main className="p-8 text-center text-red-600">Diagnosis tidak ditemukan</main>;
if (query.isLoading) return <div className="p-8 text-center text-muted-foreground">Memuat diagnosis...</div>;
if (query.error || !query.data) return <div className="p-8 text-center text-red-600">Diagnosis tidak ditemukan</div>;
const diagnosis = query.data;
return (
<main className="min-h-screen px-6 py-8">
<div className="mx-auto max-w-5xl space-y-6">
<div className="flex items-center justify-between gap-4">
<div className="space-y-6">
<div className="flex items-center justify-between gap-4">
<div>
<p className="text-sm font-medium text-primary">Detail Diagnosis</p>
<h1 className="text-3xl font-bold">{diagnosis.disease?.commonName ?? 'Diagnosis gagal'}</h1>
<h1 className="text-xl md:text-3xl font-bold">{diagnosis.disease?.commonName ?? 'Diagnosis gagal'}</h1>
</div>
<Button asChild variant="outline"><Link to="/dashboard">Kembali</Link></Button>
</div>
<section className="grid gap-6 lg:grid-cols-[360px_1fr]">
<section className="grid gap-6 lg:grid-cols-2">
<Card>
<CardContent className="p-4">
<img src={diagnosis.imageUrl} alt="Daun jagung" className="w-full rounded-xl object-cover" />
@@ -99,6 +98,5 @@ export function DiagnosisDetailPage() {
</Card>
)}
</div>
</main>
);
}
);
}
apps/web/src/pages/disease-detail-page.tsx
+2 -2
View File
@@ -78,7 +78,7 @@ export function DiseaseDetailPage() {
<div className="space-y-4">
<div className="flex items-start justify-between gap-4">
<div>
<h1 className="text-4xl font-bold tracking-tight">{disease.commonName}</h1>
<h1 className="text-2xl md:text-4xl font-bold tracking-tight">{disease.commonName}</h1>
<p className="mt-2 text-lg text-muted-foreground">{disease.label}</p>
</div>
<RiskBadge level={disease.riskLevel} />
@@ -131,7 +131,7 @@ export function DiseaseDetailPage() {
</CardContent>
</Card>
<div className="flex gap-3 pt-4">
<div className="flex flex-col sm:flex-row gap-3 pt-4">
<Button asChild className="flex-1">
<Link to="/catalog">Lihat Katalog Lengkap</Link>
</Button>
apps/web/src/pages/expert-reviews-page.tsx
+5 -5
View File
@@ -69,7 +69,7 @@ export function ExpertReviewsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div>
<h1 className="text-2xl font-bold text-emerald-800">Review Pakar</h1>
<p className="text-gray-500 mt-1 text-md">
@@ -111,11 +111,11 @@ export function ExpertReviewsPage() {
}`}
>
<Card className="transition hover:border-primary">
<CardContent className="flex gap-3 p-3">
<CardContent className="flex gap-3 p-3 items-start">
<img
src={review.imageUrl}
alt="Daun jagung"
className="h-20 w-20 rounded-lg object-cover"
className="h-14 md:h-20 w-14 md:w-20 rounded-lg object-cover shrink-0"
/>
<div className="min-w-0 flex-1 space-y-1">
<div className="flex flex-wrap items-center justify-between gap-1">
@@ -168,7 +168,7 @@ export function ExpertReviewsPage() {
<img
src={selected.imageUrl}
alt={`Gambar daun jagung untuk ${selected.disease?.commonName ?? "diagnosis"}`}
className="h-64 w-full rounded-lg object-cover"
className="h-48 md:h-64 w-full rounded-lg object-cover"
/>
<div className="space-y-2">
@@ -218,7 +218,7 @@ export function ExpertReviewsPage() {
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium">Keputusan</label>
<div className="flex gap-3">
<div className="flex flex-col sm:flex-row gap-3">
<label
htmlFor="verdict-verified"
className="flex items-center gap-2"
apps/web/src/pages/library-page.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export function LibraryPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between gap-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
<div>
<h1 className="text-2xl font-bold text-emerald-800">Pustaka Penyakit</h1>
<p className="text-gray-500 mt-1 text-md">
apps/web/src/pages/login-page.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function LoginPage() {
return (
<main className="flex min-h-screen items-center justify-center px-6 py-12">
<div className="w-full space-y-4">
<div className="w-full max-w-sm md:max-w-md space-y-4">
<AuthForm
mode="login"
isSubmitting={mutation.isPending}
apps/web/src/pages/register-page.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function RegisterPage() {
return (
<main className="flex min-h-screen items-center justify-center px-6 py-12">
<div className="w-full space-y-4">
<div className="w-full max-w-sm md:max-w-md space-y-4">
<AuthForm
mode="register"
isSubmitting={mutation.isPending}
apps/web/src/pages/scan-page.tsx
+4 -4
View File
@@ -76,7 +76,7 @@ export function ScanPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between gap-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
<div>
<h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1>
<p className="text-gray-500 mt-1 text-md">
@@ -91,7 +91,7 @@ export function ScanPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-4">
<Card className="w-full h-117 py-3">
<Card className="w-full lg:h-117 py-3">
<CardContent className="px-6 py-4 h-full flex flex-col">
{/* Left Sidebar */}
<div className="text-black flex items-center gap-2 mb-3 text-lg font-semibold">
@@ -198,7 +198,7 @@ export function ScanPage() {
<p className="text-sm text-muted-foreground">
File: <span className="font-medium">{fileName}</span>
</p>
<div className="flex gap-3">
<div className="flex flex-wrap gap-3">
<Button
variant="outline"
onClick={() => {
@@ -248,7 +248,7 @@ export function ScanPage() {
</div>
{/* Right Sidebar */}
<aside className="md:col-span-1 flex flex-col gap-5">
<aside className="lg:col-span-1 flex flex-col gap-5">
{/* Card 1: Panduan Pengambilan Foto */}
<Card className="w-full h-max">
<CardContent className="px-6 py-4">