Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | 6x 15x 15x 15x 15x 15x 15x 15x 15x 105x 15x 15x 45x 45x 2x 1x | import { useState } from "react";
import { Link, useRouterState } from "@tanstack/react-router";
import {
Home,
Target,
LayoutGrid,
Bell,
MoreHorizontal,
} from "lucide-react";
import { useUnreadCount } from "../../hooks/queries/useNotificationQueries";
import { useSocialDrafts } from "../../hooks/queries/useSocialDraftQueries";
import { usePro } from "../../lib/pro-context";
import { MoreSheet } from "./more-sheet";
const NAV_ITEMS = [
{ to: "/", icon: Home, label: "Home", exact: true },
{ to: "/crm", icon: Target, label: "CRM", exact: false },
{ to: "/projects", icon: LayoutGrid, label: "Projects", exact: false },
] as const;
export function BottomNav({ visible }: { visible: boolean }) {
const [moreOpen, setMoreOpen] = useState(false);
const routerState = useRouterState();
const { data: unreadCount = 0 } = useUnreadCount();
const { proId } = usePro();
const { data: socialDraftsData } = useSocialDrafts(proId ?? null);
const socialPendingDraftCount = socialDraftsData?.pendingCount ?? 0;
const pathname = routerState.location.pathname;
const moreRoutes = [
"/analytics",
"/profile",
"/team",
"/website",
"/blogs",
"/settings",
"/social-studio",
];
const isMoreActive = moreRoutes.some((r) => pathname.startsWith(r));
const isNotificationsActive = pathname.startsWith("/notifications");
return (
<>
<nav
className={`fixed inset-x-0 bottom-0 z-50 border-t border-border-default bg-background-elevated pb-safe sm:hidden transition-transform duration-200 ${
visible ? "translate-y-0" : "translate-y-full"
}`}
aria-label="Main navigation"
>
<ul className="flex h-14 items-stretch">
{NAV_ITEMS.map(({ to, icon: Icon, label, exact }) => {
const isActive = exact
? pathname === to
: pathname.startsWith(to);
return (
<li key={to} className="flex-1">
<Link
to={to}
className={`flex h-full flex-col items-center justify-center gap-0.5 text-[10px] transition-colors ${
isActive
? "text-primary-700 font-semibold"
: "text-foreground-muted"
}`}
>
<Icon
className="h-5 w-5"
fill={isActive ? "currentColor" : "none"}
/>
{label}
</Link>
</li>
);
})}
{/* Notifications */}
<li className="flex-1">
<Link
to="/notifications"
className={`flex h-full flex-col items-center justify-center gap-0.5 text-[10px] transition-colors relative ${
isNotificationsActive
? "text-primary-700 font-semibold"
: "text-foreground-muted"
}`}
>
<div className="relative">
<Bell
className="h-5 w-5"
fill={
isNotificationsActive ? "currentColor" : "none"
}
/>
{unreadCount > 0 && (
<span className="absolute -top-1.5 -right-2 bg-error text-white text-[8px] font-bold px-1 py-0.5 rounded-full min-w-[14px] text-center leading-tight">
{unreadCount > 99 ? "99+" : unreadCount}
</span>
)}
</div>
Notifications
</Link>
</li>
{/* More */}
<li className="flex-1">
<button
type="button"
onClick={() => setMoreOpen(true)}
className={`flex h-full w-full flex-col items-center justify-center gap-0.5 text-[10px] transition-colors ${
isMoreActive
? "text-primary-700 font-semibold"
: "text-foreground-muted"
}`}
>
<div className="relative">
<MoreHorizontal
className="h-5 w-5"
fill={isMoreActive ? "currentColor" : "none"}
/>
{socialPendingDraftCount > 0 && (
<span className="absolute -top-1.5 -right-2 h-2 w-2 rounded-full bg-primary-600" />
)}
</div>
More
</button>
</li>
</ul>
</nav>
<MoreSheet open={moreOpen} onClose={() => setMoreOpen(false)} />
</>
);
}
|