b7c717ffb3
- 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.
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|