113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { useConversationsContext } from '../context/ConversationsContext';
|
|
import { useFriendshipsContext } from '../context/FriendshipsContext';
|
|
import { CallBar } from './CallUI';
|
|
import {
|
|
ChatBubbleIcon,
|
|
GearIcon,
|
|
LogoLockup,
|
|
ShieldIcon,
|
|
SignOutIcon,
|
|
UsersIcon,
|
|
} from './icons';
|
|
import { UserBar } from './UserBar';
|
|
|
|
interface NavItem {
|
|
to: string;
|
|
labelKey: string;
|
|
icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
|
|
}
|
|
|
|
const BASE_NAV_ITEMS: NavItem[] = [
|
|
{ to: '/chats', labelKey: 'app:nav.chats', icon: ChatBubbleIcon },
|
|
{ to: '/friends', labelKey: 'app:nav.friends', icon: UsersIcon },
|
|
{ to: '/settings', labelKey: 'app:nav.settings', icon: GearIcon },
|
|
];
|
|
const ADMIN_NAV_ITEM: NavItem = {
|
|
to: '/admin',
|
|
labelKey: 'app:nav.admin',
|
|
icon: ShieldIcon,
|
|
};
|
|
|
|
export function Sidebar() {
|
|
const { t } = useTranslation(['app']);
|
|
const { signOut, profile } = useAuth();
|
|
const { incomingCount } = useFriendshipsContext();
|
|
const { totalUnread } = useConversationsContext();
|
|
|
|
const navItems = profile?.isAdmin ? [...BASE_NAV_ITEMS, ADMIN_NAV_ITEM] : BASE_NAV_ITEMS;
|
|
|
|
return (
|
|
<aside
|
|
aria-label="Primary navigation"
|
|
className="flex h-screen w-72 shrink-0 flex-col border-r border-white/5 bg-ink-900/70 backdrop-blur-xl"
|
|
>
|
|
<div className="flex items-center px-5 pb-3 pt-5">
|
|
<LogoLockup tone="dark" className="h-8 w-auto" aria-label="Netralax" />
|
|
</div>
|
|
|
|
<nav className="mt-2 flex flex-col gap-0.5 px-3">
|
|
{navItems.map((item) => {
|
|
const badge =
|
|
item.to === '/friends'
|
|
? incomingCount
|
|
: item.to === '/chats'
|
|
? totalUnread
|
|
: 0;
|
|
const ariaLabel = badge > 0 ? `${t(item.labelKey)} (${badge})` : undefined;
|
|
return (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
aria-label={ariaLabel}
|
|
className={({ isActive }) =>
|
|
[
|
|
'group flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/50',
|
|
isActive
|
|
? 'bg-brand-500/15 text-white ring-1 ring-brand-400/30'
|
|
: 'text-neutral-400 hover:bg-white/5 hover:text-neutral-100',
|
|
].join(' ')
|
|
}
|
|
>
|
|
<item.icon style={{ width: '18px', height: '18px' }} className="transition" />
|
|
<span className="flex-1">{t(item.labelKey)}</span>
|
|
{badge > 0 && <NavBadge count={badge} />}
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="border-t border-white/5 p-3">
|
|
<CallBar />
|
|
<UserBar />
|
|
<button
|
|
type="button"
|
|
onClick={() => void signOut()}
|
|
className="mt-2 flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium text-neutral-400 transition hover:bg-rose-500/10 hover:text-rose-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/40"
|
|
>
|
|
<SignOutIcon className="h-4 w-4" />
|
|
<span>{t('app:sidebar.sign_out')}</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function NavBadge({ count }: { count: number }) {
|
|
const display = count > 99 ? '99+' : String(count);
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className="inline-flex min-w-[20px] items-center justify-center rounded-full bg-rose-500 px-1.5 text-[10px] font-bold leading-tight text-white shadow-[0_0_0_2px_rgba(15,15,24,1)]"
|
|
>
|
|
{display}
|
|
</span>
|
|
);
|
|
}
|