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/app/(dashboard)/layout.tsx

@@ -1,15 +1,11 @@
 import * as React from "react";
 import { AppSidebar } from "@/components/app-sidebar";
 import { MobileFilters } from "@/components/mobile-filters";
-import { ModeToggle } from "@/components/mode-toggle";
+import { MobileFooter } from "@/components/mobile-footer";
+import { MobileHeader } from "@/components/mobile-header";
 import { SearchSidebar } from "@/components/search-sidebar";
-import {
-	SidebarInset,
-	SidebarProvider,
-	SidebarTrigger,
-} from "@/components/ui/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import { UserNavMobile } from "@/components/user-nav-mobile";
 
 export default function DashboardLayout({
 	children,
@@ -22,20 +18,9 @@ export default function DashboardLayout({
 		<React.Suspense fallback={null}>
 			<SidebarProvider>
 				<AppSidebar />
-				<SidebarInset className="flex flex-row overflow-hidden">
+				<SidebarInset className="flex flex-row overflow-hidden pb-16 lg:pb-0">
 					<div className="flex-1 flex flex-col min-w-0">
-						<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden sticky top-0 bg-background z-40">
-							<SidebarTrigger />
-							<div className="flex-1 flex justify-center">
-								<span className="font-bold text-primary text-xl tracking-tight">
-									MemeGoat
-								</span>
-							</div>
-							<div className="flex items-center gap-2">
-								<ModeToggle />
-								<UserNavMobile />
-							</div>
-						</header>
+						<MobileHeader />
 						<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
 							{children}
 							{modal}
@@ -43,6 +28,7 @@ export default function DashboardLayout({
 						<React.Suspense fallback={null}>
 							<MobileFilters />
 						</React.Suspense>
+						<MobileFooter />
 					</div>
 					<React.Suspense fallback={null}>
 						<SearchSidebar />

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

@@ -3,16 +3,19 @@
 import {
 	Calendar,
 	Camera,
+	HelpCircle,
 	LogIn,
 	LogOut,
 	Settings,
 	Share2,
+	ShieldCheck,
 } from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import * as React from "react";
 import { toast } from "sonner";
 import { ContentList } from "@/components/content-list";
+import { ModeToggle } from "@/components/mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -157,6 +160,19 @@ export default function ProfilePage() {
 						</div>
 
 						<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
+							{user.role === "admin" && (
+								<Button
+									asChild
+									variant="outline"
+									size="sm"
+									className="h-9 px-4 border-primary/20 hover:bg-primary/5 text-primary"
+								>
+									<Link href="/admin">
+										<ShieldCheck className="h-4 w-4 mr-2" />
+										Administration
+									</Link>
+								</Button>
+							)}
 							<Button asChild variant="outline" size="sm" className="h-9 px-4">
 								<Link href="/settings">
 									<Settings className="h-4 w-4 mr-2" />
@@ -181,6 +197,14 @@ export default function ProfilePage() {
 								<LogOut className="h-4 w-4 mr-2" />
 								Déconnexion
 							</Button>
+
+							<Button asChild variant="outline" size="sm" className="h-9 px-4">
+								<Link href="/help">
+									<HelpCircle className="h-4 w-4 mr-2" />
+									Aide
+								</Link>
+							</Button>
+							<ModeToggle />
 						</div>
 					</div>
 				</div>