Public Access
lobo
3712e3905f
One glossary (docs/GLOSSARY.md) for all de and en texts. Five nav items; phones get a bottom bar with labels. Community page with following, followers, player search and stats. The bell is the one place for notes, news and open questions. Settings in tabs; auto-save is silent and rolls back on error. Questions page explains itself; removed games are a library filter. Own profile: menu link, public chip, copy link, private hint. Points page starts with a short summary; stats use status colors.
30 lines
1.2 KiB
React
30 lines
1.2 KiB
React
import {Link, useLocation} from 'react-router-dom';
|
|
import {useTranslation} from 'react-i18next';
|
|
|
|
import {cn} from '@/lib/utils';
|
|
import {isNavActive, NAV_ITEMS} from './navItems.js';
|
|
|
|
/**
|
|
* The main navigation on a phone: a bar at the bottom edge, every item with its label.
|
|
*/
|
|
export default function BottomNav() {
|
|
const {t} = useTranslation();
|
|
const {pathname} = useLocation();
|
|
return (
|
|
<nav aria-label={t('NAV.MENU')}
|
|
className="fixed inset-x-0 bottom-0 z-50 flex border-t bg-background/95 pb-[env(safe-area-inset-bottom)] backdrop-blur md:hidden">
|
|
{NAV_ITEMS.map((item) => {
|
|
const active = isNavActive(item, pathname);
|
|
return (
|
|
<Link key={item.to} to={item.to} aria-current={active ? 'page' : undefined}
|
|
className={cn('flex flex-1 flex-col items-center gap-0.5 py-2 text-[11px] font-medium',
|
|
active ? 'text-primary' : 'text-muted-foreground')}>
|
|
<item.Icon className="size-5"/>
|
|
<span className="max-w-full truncate px-1">{t(item.labelKey)}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|