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/components/app-sidebar.tsx

@@ -3,7 +3,9 @@
 import {
 	ChevronRight,
 	Clock,
+	Heart,
 	HelpCircle,
+	History,
 	Home,
 	LayoutGrid,
 	LogIn,
@@ -14,7 +16,7 @@ import {
 	User as UserIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -68,6 +70,7 @@ const mainNav = [
 
 export function AppSidebar() {
 	const pathname = usePathname();
+	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
 	const [categories, setCategories] = React.useState<Category[]>([]);
 
@@ -149,6 +152,36 @@ export function AppSidebar() {
 						</SidebarMenuItem>
 					</SidebarMenu>
 				</SidebarGroup>
+
+				<SidebarGroup>
+					<SidebarGroupLabel>Ma Bibliothèque</SidebarGroupLabel>
+					<SidebarMenu>
+						<SidebarMenuItem>
+							<SidebarMenuButton
+								asChild
+								isActive={pathname === "/profile" && searchParams.get("tab") === "favorites"}
+								tooltip="Mes Favoris"
+							>
+								<Link href="/profile?tab=favorites">
+									<Heart />
+									<span>Mes Favoris</span>
+								</Link>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+						<SidebarMenuItem>
+							<SidebarMenuButton
+								asChild
+								isActive={pathname === "/profile" && searchParams.get("tab") === "memes"}
+								tooltip="Mes Mèmes"
+							>
+								<Link href="/profile?tab=memes">
+									<History />
+									<span>Mes Mèmes</span>
+								</Link>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					</SidebarMenu>
+				</SidebarGroup>
 			</SidebarContent>
 			<SidebarFooter>
 				<SidebarMenu>

frontend/src/components/user-nav-mobile.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { LogIn, User as UserIcon } from "lucide-react";
+import Link from "next/link";
+import * as React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/providers/auth-provider";
+
+export function UserNavMobile() {
+	const { user, isAuthenticated, isLoading } = useAuth();
+
+	if (isLoading) {
+		return <div className="h-8 w-8 rounded-full bg-zinc-200 animate-pulse" />;
+	}
+
+	if (!isAuthenticated || !user) {
+		return (
+			<Button variant="ghost" size="icon" asChild className="h-9 w-9">
+				<Link href="/login">
+					<LogIn className="h-5 w-5" />
+				</Link>
+			</Button>
+		);
+	}
+
+	return (
+		<Button variant="ghost" size="icon" asChild className="h-9 w-9 p-0">
+			<Link href="/profile">
+				<Avatar className="h-8 w-8 border">
+					<AvatarImage src={user.avatarUrl} alt={user.username} />
+					<AvatarFallback>
+						{user.username.slice(0, 2).toUpperCase()}
+					</AvatarFallback>
+				</Avatar>
+			</Link>
+		</Button>
+	);
+}