feat(ui): enhance mobile user experience and authentication handling

Add `UserNavMobile` component for improved mobile navigation. Update dashboard and profile pages to include authentication checks with loading states and login prompts. Introduce category-specific content tabs on the profile page. Apply sidebar enhancements, including new sections for user favorites and memes.

frontend/src/app/(dashboard)/upload/page.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Image as ImageIcon, Loader2, Upload, X } from "lucide-react";
+import { Image as ImageIcon, Loader2, LogIn, Upload, X } from "lucide-react";
 import NextImage from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Form,
 	FormControl,
@@ -27,8 +28,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { useAuth } from "@/providers/auth-provider";
 import { CategoryService } from "@/services/category.service";
 import { ContentService } from "@/services/content.service";
+import { Spinner } from "@/components/ui/spinner";
 import type { Category } from "@/types/content";
 
 const uploadSchema = z.object({
@@ -42,6 +45,7 @@ type UploadFormValues = z.infer<typeof uploadSchema>;
 
 export default function UploadPage() {
 	const router = useRouter();
+	const { isAuthenticated, isLoading } = useAuth();
 	const [categories, setCategories] = React.useState<Category[]>([]);
 	const [file, setFile] = React.useState<File | null>(null);
 	const [preview, setPreview] = React.useState<string | null>(null);
@@ -57,8 +61,42 @@ export default function UploadPage() {
 	});
 
 	React.useEffect(() => {
-		CategoryService.getAll().then(setCategories).catch(console.error);
-	}, []);
+		if (isAuthenticated) {
+			CategoryService.getAll().then(setCategories).catch(console.error);
+		}
+	}, [isAuthenticated]);
+
+	if (isLoading) {
+		return (
+			<div className="flex h-[400px] items-center justify-center">
+				<Spinner className="h-8 w-8 text-primary" />
+			</div>
+		);
+	}
+
+	if (!isAuthenticated) {
+		return (
+			<div className="max-w-2xl mx-auto py-8 px-4">
+				<Card className="text-center p-12">
+					<CardHeader>
+						<div className="mx-auto bg-primary/10 p-4 rounded-full w-fit mb-4">
+							<LogIn className="h-8 w-8 text-primary" />
+						</div>
+						<CardTitle>Connexion requise</CardTitle>
+						<CardDescription>
+							Vous devez être connecté pour partager vos meilleurs mèmes avec la
+							communauté.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Button asChild className="w-full sm:w-auto">
+							<Link href="/login">Se connecter</Link>
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
 
 	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const selectedFile = e.target.files?.[0];