feat(ui): add responsive mobile header and footer components

- Implemented `MobileHeader` with support for displaying unread messages.
- Created `MobileFooter` with navigation to key sections (home, explore, publish, trends, profile).
- Replaced legacy mobile header with new `MobileHeader` and `MobileFooter` in the dashboard layout.
- Optimized mobile sidebar rendering for improved responsiveness.

frontend/src/components/mobile-footer.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Home, PlusCircle, Search, TrendingUp, User } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { useAuth } from "@/providers/auth-provider";
+
+export function MobileFooter() {
+	const pathname = usePathname();
+	const { user, isAuthenticated } = useAuth();
+
+	const navItems = [
+		{
+			title: "Accueil",
+			url: "/",
+			icon: Home,
+		},
+		{
+			title: "Explorer",
+			url: "/trends?openSearch=true",
+			icon: Search,
+		},
+		{
+			title: "Publier",
+			url: "/upload",
+			icon: PlusCircle,
+		},
+		{
+			title: "Tendances",
+			url: "/trends",
+			icon: TrendingUp,
+		},
+		{
+			title: "Profil",
+			url: "/profile",
+			icon: User,
+		},
+	];
+
+	return (
+		<footer className="lg:hidden fixed bottom-0 left-0 right-0 border-t bg-background z-40 h-16">
+			<nav className="flex h-full items-center justify-around px-2">
+				{navItems.map((item) => {
+					const isActive = pathname === item.url.split("?")[0];
+					const isProfile = item.title === "Profil";
+
+					return (
+						<Link
+							key={item.url}
+							href={item.url}
+							className={cn(
+								"flex flex-1 flex-col items-center justify-center gap-1 transition-colors min-h-[44px]",
+								isActive ? "text-primary" : "text-muted-foreground hover:text-primary",
+							)}
+						>
+							{isProfile && isAuthenticated && user ? (
+								<Avatar
+									className={cn(
+										"h-6 w-6 border",
+										isActive && "ring-2 ring-primary ring-offset-2",
+									)}
+								>
+									<AvatarImage src={user.avatarUrl} alt={user.username} />
+									<AvatarFallback className="text-[8px]">
+										{user.username.slice(0, 2).toUpperCase()}
+									</AvatarFallback>
+								</Avatar>
+							) : (
+								<item.icon className={cn("h-6 w-6", isActive && "fill-current")} />
+							)}
+							<span className="text-[10px] font-medium">{item.title}</span>
+						</Link>
+					);
+				})}
+			</nav>
+		</footer>
+	);
+}