JavaScript 56.7%
TypeScript 42.6%
1"use client";23import Link from "next/link";4import { usePathname } from "next/navigation";5import { motion } from "framer-motion";6import { Home, FolderOpen, Search, Star, Menu } from "lucide-react";7import { useShell } from "./ShellContext";89/** Barre d'onglets mobile (iOS-like) — masquée ≥ lg. */10export default function MobileTabBar() {11 const pathname = usePathname();12 const { openCommand, setMobileNavOpen } = useShell();1314 const tabs = [15 { key: "home", label: "Accueil", icon: Home, href: "/dashboard", active: pathname === "/dashboard" },16 { key: "files", label: "Fichiers", icon: FolderOpen, href: "/dashboard/files", active: pathname.startsWith("/dashboard/files") || pathname.startsWith("/dashboard/folder") },17 { key: "search", label: "Rechercher", icon: Search, onClick: () => openCommand(""), active: false },18 { key: "fav", label: "Favoris", icon: Star, href: "/dashboard/favorites", active: pathname === "/dashboard/favorites" },19 { key: "menu", label: "Menu", icon: Menu, onClick: () => setMobileNavOpen(true), active: false },20 ];2122 return (23 <nav className="lg:hidden fixed bottom-0 inset-x-0 z-40 glass border-t border-line dark:border-white/10 pb-safe" aria-label="Navigation principale">24 <div className="grid grid-cols-5 h-16">25 {tabs.map((t) => {26 const cls = `relative flex flex-col items-center justify-center gap-1 text-[10.5px] font-medium transition-colors ${t.active ? "text-blue-600 dark:text-blue-300" : "text-gray-500 dark:text-gray-400 active:text-gray-900 dark:active:text-white"}`;27 const inner = (28 <>29 {t.active && <motion.span layoutId="tab-dot" className="absolute top-1.5 w-8 h-1 rounded-full bg-blue-500" />}30 <t.icon className={`w-[22px] h-[22px] ${t.key === "search" ? "" : ""}`} strokeWidth={t.active ? 2.4 : 2} />31 <span>{t.label}</span>32 </>33 );34 return t.href ? (35 <Link key={t.key} href={t.href} className={cls} aria-current={t.active ? "page" : undefined}>{inner}</Link>36 ) : (37 <button key={t.key} onClick={t.onClick} className={cls}>{inner}</button>38 );39 })}40 </div>41 </nav>42 );43}44