fix(admin-ui): сайдбар в collapsed-mode показывает badge как corner overlay
В collapsed-режиме (56px полоска) рендерили только иконку без label и без badge — счётчик pending записей/драфтов был не виден, юзер не понимал что есть необработанные элементы пока не раскроет сайдбар. Теперь в collapsed: badge → маленький круглый pill в углу иконки (top-right, 16×16, ring-1 от bg чтобы хорошо отделялся от иконки). Cap "99+" если число большое — uniform width. Tooltip на link включает label + (count) при hover. Expanded-mode без изменений — badge справа от label как был.
This commit is contained in:
@@ -583,7 +583,17 @@ function SidebarLink({
|
|||||||
<Link
|
<Link
|
||||||
to={to}
|
to={to}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
title={collapsed ? (typeof label === 'string' ? label : undefined) : undefined}
|
// Tooltip в collapsed-mode включает label + текущий badge (если есть),
|
||||||
|
// чтобы юзер видел число при hover на узкой полоске.
|
||||||
|
title={
|
||||||
|
collapsed
|
||||||
|
? typeof label === 'string'
|
||||||
|
? badge !== undefined
|
||||||
|
? `${label} (${badge})`
|
||||||
|
: label
|
||||||
|
: undefined
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
className={cn(
|
className={cn(
|
||||||
// text-body = 13px workhorse per handoff (см. styles.css @utility).
|
// text-body = 13px workhorse per handoff (см. styles.css @utility).
|
||||||
'group flex items-center rounded-md text-body transition-colors',
|
'group flex items-center rounded-md text-body transition-colors',
|
||||||
@@ -593,9 +603,28 @@ function SidebarLink({
|
|||||||
: 'text-ink-2 hover:text-ink hover:bg-surface-2',
|
: 'text-ink-2 hover:text-ink hover:bg-surface-2',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Icon size={collapsed ? 18 : 15} strokeWidth={1.75} className="shrink-0" />
|
{/* Icon + corner-badge overlay в collapsed-mode. Wrapper relative нужен
|
||||||
{!collapsed && (
|
для absolute badge'а; в expanded-mode иконка без обёртки + badge
|
||||||
|
справа от label'а как было. */}
|
||||||
|
{collapsed ? (
|
||||||
|
<span className="relative inline-flex items-center justify-center">
|
||||||
|
<Icon size={18} strokeWidth={1.75} className="shrink-0" />
|
||||||
|
{badge !== undefined && (
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn(
|
||||||
|
'absolute -top-1.5 -right-1.5 inline-flex items-center justify-center',
|
||||||
|
'min-w-[1rem] h-4 px-1 rounded-full text-cap font-mono leading-none',
|
||||||
|
'bg-accent text-on-accent ring-1 ring-surface',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{typeof badge === 'number' && badge > 99 ? '99+' : badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
<>
|
<>
|
||||||
|
<Icon size={15} strokeWidth={1.75} className="shrink-0" />
|
||||||
<span className="flex-1 truncate">{label}</span>
|
<span className="flex-1 truncate">{label}</span>
|
||||||
{badge !== undefined && (
|
{badge !== undefined && (
|
||||||
<span
|
<span
|
||||||
|
|||||||
Reference in New Issue
Block a user