@designa8/vibedesign-stripe-deepseek-85ea 0.2.0 → 0.2.2

package/src/atoms/Sidebar/preview.tsx

@@ -2,30 +2,35 @@ import * as React from "react";
 import { Avatar } from "../Avatar";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
-import { SidebarDesktop, type SidebarDesktopNavItem } from "../SidebarDesktop";
-import { SidebarMobile } from "../SidebarMobile";
+import { type SidebarDesktopNavItem } from "../SidebarDesktop";
 import { Sidebar, type SidebarNavTarget } from "./Sidebar";
 
-const ITEMS: SidebarDesktopNavItem[] = [
-  { id: "payments", label: "Payments", icon: "credit-card", href: "/payments" },
+/** Nav fixtures with the count wired to state, so the pill really hides at 0. */
+const buildItems = (pending: number): SidebarDesktopNavItem[] => [
+  {
+    id: "payments",
+    label: "Tasks",
+    icon: "credit-card",
+    href: "/tasks",
+    badge: pending,
+  },
   { id: "balances", label: "Balances", icon: "layers", href: "/balances" },
   {
     id: "payouts",
-    label: "Payouts",
+    label: "Approvals",
     icon: "arrow-left-right",
+    badge: pending,
     children: [
-      { id: "scheduled", label: "Scheduled payouts", href: "/payouts/scheduled" },
-      { id: "payout-accounts", label: "Payout accounts", href: "/payouts/accounts" },
-      { id: "payout-limits", label: "Payout limits", href: "/payouts/limits" },
+      { id: "scheduled", label: "Scheduled payouts", href: "/approvals/scheduled" },
+      { id: "payout-accounts", label: "Payout accounts", href: "/approvals/accounts" },
     ],
   },
   { id: "developers", label: "Developers", icon: "code", href: "/developers" },
-  { id: "api-logs", label: "API logs", icon: "file", href: "/api-logs" },
 ];
 
 const SECONDARY_ITEMS: SidebarDesktopNavItem[] = [
   { id: "settings", label: "Settings", icon: "settings", href: "/settings" },
-  { id: "team", label: "Team", icon: "group", href: "/team" },
+  { id: "team", label: "Team", icon: "group", href: "/team", badge: "New" },
 ];
 
 const ACCOUNTS = [
@@ -35,27 +40,11 @@ const ACCOUNTS = [
 
 const PROFILE = { name: "Priya Shah", email: "priya@acme.com" };
 
-/** A tiny content pane so the routed shell reads as a page, not a floating rail. */
-const ContentPane = ({ route, unread }: { route: string; unread: number }) => (
-  <div className="flex min-w-0 flex-col gap-sm bg-canvas p-lg">
-    <p className="text-caption uppercase text-muted">Current route</p>
-    <p className="text-heading-md text-ink">{route}</p>
-    <p className="text-body-sm text-body">
-      Click any destination in the navigation to route there. The rail keeps its
-      header and footer pinned while the destination list scrolls on its own.
-    </p>
-    <p className="text-body-sm text-body">
-      {unread > 0
-        ? `${unread} unread notifications waiting in the footer bell.`
-        : "Notifications cleared — the badge is gone."}
-    </p>
-  </div>
-);
-
 export default function Preview() {
   const [activeId, setActiveId] = React.useState("payments");
-  const [route, setRoute] = React.useState("/payments");
+  const [route, setRoute] = React.useState("/tasks");
   const [unread, setUnread] = React.useState(4);
+  const [pending, setPending] = React.useState(2);
 
   const handleNavigate = (item: SidebarNavTarget) => {
     setRoute(item.href ?? `#${item.id}`);
@@ -63,99 +52,68 @@ export default function Preview() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-3xl space-y-xl p-lg">
-      {/* The whole control: one instance, responsive in CSS. */}
-      <section className="space-y-sm">
+    <div className="mx-auto w-full max-w-3xl space-y-sm p-lg">
+      <div className="flex flex-wrap items-center justify-between gap-sm">
         <p className="text-caption uppercase text-muted">
-          Routed app shell — rail above md, header below
+          Count pill unfolded, dot on the glyph once folded
         </p>
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-xl border border-hairline bg-surface md:grid-cols-[auto_minmax(0,1fr)]">
-          <Sidebar
-            wordmark="Nimbus"
-            homeHref="/"
-            items={ITEMS}
-            activeId={activeId}
-            onNavigate={handleNavigate}
-            secondaryItems={SECONDARY_ITEMS}
-            secondaryActiveId="settings"
-            accounts={ACCOUNTS}
-            profile={PROFILE}
-            plan={{ name: "Pro", price: "$2,400.00 / month", href: "/billing" }}
-            notificationCount={unread}
-            onNotifications={() => setUnread(0)}
-            mobileActions={
-              <>
-                <Button variant="bare" size="icon-sm" aria-label="Search">
-                  <Icon name="search" size={20} strokeWidth={1.75} />
-                </Button>
-                <Button variant="bare" size="icon-sm" aria-label="Notifications">
-                  <Icon name="bell" size={20} strokeWidth={1.75} />
-                </Button>
-                <Avatar name={PROFILE.name} size="sm" />
-              </>
-            }
-            mobileDrawerFooter={
-              <Button variant="outline-soft" size="md" fullWidth>
-                Switch theme
-              </Button>
-            }
-          />
-          <ContentPane route={route} unread={unread} />
-        </div>
-      </section>
+        <Button
+          variant="outline-soft"
+          size="sm"
+          onClick={() => setPending((current) => (current === 0 ? 2 : 0))}
+        >
+          {pending === 0 ? "Show pending counts" : "Clear pending counts"}
+        </Button>
+      </div>
 
-      {/* The desktop part on its own, folded down to its icon column. */}
-      <section className="space-y-sm">
-        <p className="text-caption uppercase text-muted">
-          Desktop rail — folded, with a notification badge
-        </p>
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-xl border border-hairline bg-surface md:grid-cols-[auto_minmax(0,1fr)]">
-          <SidebarDesktop
-            items={ITEMS}
-            activeId={activeId}
-            onNavigate={handleNavigate}
-            secondaryItems={SECONDARY_ITEMS}
-            accounts={ACCOUNTS}
-            profile={PROFILE}
-            notificationCount={12}
-            defaultFolded
-          />
-          <ContentPane route={route} unread={unread} />
-        </div>
-      </section>
-
-      {/* The mobile part: the flush header, with the drawer it opens. */}
-      <section className="space-y-sm">
-        <p className="text-caption uppercase text-muted">
-          Mobile header — tap the menu to open the drawer
-        </p>
-        <div className="w-full overflow-hidden rounded-xl border border-hairline bg-surface">
-          <SidebarMobile
-            items={ITEMS}
-            activeId={activeId}
-            onNavigate={handleNavigate}
-            secondaryItems={SECONDARY_ITEMS}
-            accounts={ACCOUNTS}
-            profile={PROFILE}
-            plan={null}
-            notificationCount={unread}
-            mobileActions={
-              <>
-                <Button variant="bare" size="icon-sm" aria-label="Search">
-                  <Icon name="search" size={20} strokeWidth={1.75} />
-                </Button>
-                <Avatar name={PROFILE.name} size="sm" />
-              </>
-            }
-            mobileDrawerFooter={
-              <Button variant="outline-soft" size="md" fullWidth>
-                Switch theme
+      <div className="grid w-full grid-cols-1 overflow-hidden rounded-xl border border-hairline bg-surface md:grid-cols-[auto_minmax(0,1fr)]">
+        <Sidebar
+          wordmark="Nimbus"
+          homeHref="/"
+          items={buildItems(pending)}
+          activeId={activeId}
+          onNavigate={handleNavigate}
+          secondaryItems={SECONDARY_ITEMS}
+          secondaryActiveId="settings"
+          accounts={ACCOUNTS}
+          profile={PROFILE}
+          plan={{ name: "Pro", price: "$2,400.00 / month", href: "/billing" }}
+          notificationCount={unread}
+          onNotifications={() => setUnread(0)}
+          defaultExpandedId={null}
+          mobileActions={
+            <>
+              <Button variant="bare" size="icon-sm" aria-label="Search">
+                <Icon name="search" size={20} strokeWidth={1.75} />
+              </Button>
+              <Button variant="bare" size="icon-sm" aria-label="Notifications">
+                <Icon name="bell" size={20} strokeWidth={1.75} />
               </Button>
-            }
-          />
-          <ContentPane route={route} unread={unread} />
+              <Avatar name={PROFILE.name} size="sm" />
+            </>
+          }
+          mobileDrawerFooter={
+            <Button variant="outline-soft" size="md" fullWidth>
+              Switch theme
+            </Button>
+          }
+        />
+
+        <div className="flex min-w-0 flex-col gap-sm bg-canvas p-lg">
+          <p className="text-caption uppercase text-muted">Current route</p>
+          <p className="text-heading-md text-ink">{route}</p>
+          <p className="text-body-sm text-body">
+            Tasks carries a count pill after its label. Collapse the rail and the
+            same count becomes a dot on the glyph, while the row still announces
+            the number to a screen reader.
+          </p>
+          <p className="text-body-sm text-body">
+            {unread > 0
+              ? `${unread} unread notifications sit in the footer bell.`
+              : "Notifications cleared — the bell badge is gone."}
+          </p>
         </div>
-      </section>
+      </div>
     </div>
   );
 }

package/src/atoms/SidebarDesktop/SidebarDesktop.tsx

@@ -36,6 +36,12 @@ export interface SidebarDesktopNavItem {
   icon: IconName;
   /** Destination for a plain row. */
   href?: string;
+  /**
+   * Pending-work count painted as a pill after the label, and as a dot on the
+   * glyph while the rail is folded. A number (99+ collapses), or a short string
+   * such as "New". Hidden when undefined, empty, or zero.
+   */
+  badge?: number | string;
   /** Nested rows: turns the parent into a disclosure. */
   children?: Array<{ id: string; label: string; href?: string }>;
 }
@@ -149,6 +155,85 @@ const glyph = (name: IconName, size = 16, strokeWidth = 1.75) => (
   />
 );
 
+/** True when an item carries a count worth painting. Zero and empties hide. */
+const hasBadge = (badge?: number | string) => {
+  if (badge === undefined || badge === null) {
+    return false;
+  }
+  if (typeof badge === "number") {
+    return Number.isFinite(badge) && badge !== 0;
+  }
+  const trimmed = badge.trim();
+  return trimmed.length > 0 && trimmed !== "0";
+};
+
+/** The pill copy: numbers above 99 collapse so a row never reflows. */
+const badgeText = (badge: number | string) =>
+  typeof badge === "number"
+    ? badge > 99
+      ? "99+"
+      : String(badge)
+    : badge.trim();
+
+/**
+ * The row's accessible name. The count rides along as pending work, so a folded
+ * icon rail still announces "API logs, 12 pending" instead of a bare glyph.
+ */
+const rowAccessibleName = (label: string, badge?: number | string) => {
+  if (!hasBadge(badge)) {
+    return label;
+  }
+  return typeof badge === "number"
+    ? `${label}, ${badge} pending`
+    : `${label}, ${badgeText(badge as string)}`;
+};
+
+/**
+ * The count pill that follows a row's label. It wears the same recipe as the
+ * footer bell: the brand fill with inverse type on the navy rail, flipped to the
+ * inverse fill while the row itself is the selected brand block.
+ */
+const RailBadge = ({
+  badge,
+  active,
+}: {
+  badge: number | string;
+  active?: boolean;
+}) => (
+  <span
+    aria-hidden="true"
+    data-active={active || undefined}
+    className={cn(
+      "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
+      "bg-primary px-xxs text-caption text-on-primary",
+      "data-[active=true]:bg-on-primary data-[active=true]:text-primary",
+    )}
+  >
+    {badgeText(badge)}
+  </span>
+);
+
+/**
+ * The leading glyph plus, while the rail is folded, a dot on its top corner.
+ * The folded rail has no room for a pill, so the dot carries the signal and the
+ * count lives in the row's accessible name.
+ */
+const railGlyph = (item: SidebarDesktopNavItem, folded: boolean) => (
+  <span className="relative inline-flex shrink-0 items-center">
+    {glyph(item.icon, 16, 1.75)}
+    {folded && hasBadge(item.badge) ? (
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute -right-xxs -top-xxs size-2 rounded-full",
+          "bg-primary",
+          "group-data-[active=true]:bg-on-primary",
+        )}
+      />
+    ) : null}
+  </span>
+);
+
 /** The visible label, kept in the tree as an accessible name while folded. */
 const RowLabel = ({
   folded,
@@ -170,7 +255,7 @@ const RowLabel = ({
  */
 const railRowClass = (active: boolean, folded: boolean) =>
   cn(
-    "flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
+    "group flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
     "text-body-md transition duration-150 ease-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
     "focus-visible:ring-inset",
@@ -201,6 +286,10 @@ interface PanelBox {
  * width and the labels change, so the item order and the active row survive the
  * fold.
  *
+ * A destination may carry a count: unfolded it reads as a pill after the label,
+ * folded it becomes a dot on the glyph, and either way the number is part of the
+ * row's accessible name. Nothing is painted when the count is absent or zero.
+ *
  * The rail fills the height of its parent (`h-full`), so a one-viewport shell
  * (`md:sticky md:top-0 md:h-dvh`) is all the sizing it needs. The header, the
  * account switcher and the footer stay pinned; only the destination list
@@ -606,6 +695,7 @@ export const SidebarDesktop = React.forwardRef<HTMLElement, SidebarDesktopProps>
           >
             {navItems.map((item) => {
               const active = item.id === activeId;
+              const badged = hasBadge(item.badge);
 
               if (!item.children?.length) {
                 return (
@@ -614,11 +704,19 @@ export const SidebarDesktop = React.forwardRef<HTMLElement, SidebarDesktopProps>
                     href={item.href ?? `#${item.id}`}
                     onClick={navigate({ id: item.id, href: item.href })}
                     aria-current={active ? "page" : undefined}
-                    aria-label={isFolded ? item.label : undefined}
+                    data-active={active}
+                    aria-label={
+                      isFolded || badged
+                        ? rowAccessibleName(item.label, item.badge)
+                        : undefined
+                    }
                     className={railRowClass(active, isFolded)}
                   >
-                    {glyph(item.icon, 16, 1.75)}
+                    {railGlyph(item, isFolded)}
                     <RowLabel folded={isFolded}>{item.label}</RowLabel>
+                    {!isFolded && badged ? (
+                      <RailBadge badge={item.badge as number | string} active={active} />
+                    ) : null}
                   </a>
                 );
               }
@@ -633,21 +731,34 @@ export const SidebarDesktop = React.forwardRef<HTMLElement, SidebarDesktopProps>
                     size="rail"
                     aria-expanded={expanded}
                     aria-controls={subId}
-                    aria-label={isFolded ? item.label : undefined}
+                    aria-label={
+                      isFolded || badged
+                        ? rowAccessibleName(item.label, item.badge)
+                        : undefined
+                    }
                     data-active={active}
                     data-folded={isFolded}
                     onClick={() => toggleExpanded(item.id)}
-                    leadingIcon={glyph(item.icon, 16, 1.75)}
+                    className="group"
+                    leadingIcon={railGlyph(item, isFolded)}
                     trailingIcon={
                       isFolded ? undefined : (
-                        <span
-                          aria-hidden="true"
-                          className={cn(
-                            "flex shrink-0 items-center transition-transform duration-200 ease-out",
-                            expanded ? "rotate-180" : "rotate-0",
-                          )}
-                        >
-                          {glyph("chevron-down", 16, 2)}
+                        <span className="flex items-center gap-xs">
+                          {badged ? (
+                            <RailBadge
+                              badge={item.badge as number | string}
+                              active={active}
+                            />
+                          ) : null}
+                          <span
+                            aria-hidden="true"
+                            className={cn(
+                              "flex shrink-0 items-center transition-transform duration-200 ease-out",
+                              expanded ? "rotate-180" : "rotate-0",
+                            )}
+                          >
+                            {glyph("chevron-down", 16, 2)}
+                          </span>
                         </span>
                       )
                     }
@@ -713,6 +824,7 @@ export const SidebarDesktop = React.forwardRef<HTMLElement, SidebarDesktopProps>
           <nav aria-label="Secondary" className="mt-lg flex flex-col gap-xxs">
             {secondaryNav.map((item) => {
               const active = item.id === secondaryActiveId;
+              const badged = hasBadge(item.badge);
 
               return (
                 <a
@@ -720,11 +832,19 @@ export const SidebarDesktop = React.forwardRef<HTMLElement, SidebarDesktopProps>
                   href={item.href ?? `#${item.id}`}
                   onClick={navigate({ id: item.id, href: item.href })}
                   aria-current={active ? "page" : undefined}
-                  aria-label={isFolded ? item.label : undefined}
+                  data-active={active}
+                  aria-label={
+                    isFolded || badged
+                      ? rowAccessibleName(item.label, item.badge)
+                      : undefined
+                  }
                   className={railRowClass(active, isFolded)}
                 >
-                  {glyph(item.icon, 16, 1.75)}
+                  {railGlyph(item, isFolded)}
                   <RowLabel folded={isFolded}>{item.label}</RowLabel>
+                  {!isFolded && badged ? (
+                    <RailBadge badge={item.badge as number | string} active={active} />
+                  ) : null}
                 </a>
               );
             })}

package/src/atoms/SidebarMobile/SidebarMobile.tsx

@@ -33,6 +33,12 @@ export interface SidebarMobileNavItem {
   icon: IconName;
   /** Destination for a plain row. */
   href?: string;
+  /**
+   * Pending-work count painted as a pill after the label. A number (99+
+   * collapses), or a short string such as "New". Hidden when undefined, empty,
+   * or zero, and always part of the row's accessible name.
+   */
+  badge?: number | string;
   /** Nested rows: turns the parent into a disclosure. */
   children?: Array<{ id: string; label: string; href?: string }>;
 }
@@ -156,6 +162,64 @@ const glyph = (name: IconName, size = 18, strokeWidth = 1.75) => (
   <Icon name={name} size={size} strokeWidth={strokeWidth} style={{ color: "inherit" }} />
 );
 
+/** True when an item carries a count worth painting. Zero and empties hide. */
+const hasBadge = (badge?: number | string) => {
+  if (badge === undefined || badge === null) {
+    return false;
+  }
+  if (typeof badge === "number") {
+    return Number.isFinite(badge) && badge !== 0;
+  }
+  const trimmed = badge.trim();
+  return trimmed.length > 0 && trimmed !== "0";
+};
+
+/** The pill copy: numbers above 99 collapse so a row never reflows. */
+const badgeText = (badge: number | string) =>
+  typeof badge === "number"
+    ? badge > 99
+      ? "99+"
+      : String(badge)
+    : badge.trim();
+
+/**
+ * The row's accessible name. The count rides along as pending work, so the row
+ * announces "Tasks, 2 pending" instead of only its label.
+ */
+const rowAccessibleName = (label: string, badge?: number | string) => {
+  if (!hasBadge(badge)) {
+    return label;
+  }
+  return typeof badge === "number"
+    ? `${label}, ${badge} pending`
+    : `${label}, ${badgeText(badge as string)}`;
+};
+
+/**
+ * The count pill that follows a row's label. It wears the brand fill with
+ * inverse type on the light drawer, flipped to the inverse fill while the row
+ * itself is the selected brand block.
+ */
+const NavBadge = ({
+  badge,
+  active,
+}: {
+  badge: number | string;
+  active?: boolean;
+}) => (
+  <span
+    aria-hidden="true"
+    data-active={active || undefined}
+    className={cn(
+      "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
+      "bg-primary px-xxs text-caption text-on-primary",
+      "data-[active=true]:bg-on-primary data-[active=true]:text-primary",
+    )}
+  >
+    {badgeText(badge)}
+  </span>
+);
+
 /**
  * A destination row in the drawer. A nav row spans the panel's gutter, so its
  * press is a tint rather than a scale — scaling would pull the fill away from
@@ -174,8 +238,8 @@ const rowClass = (active: boolean) =>
   );
 
 /** A nested destination: one step quieter and tighter than its parent, indented
- *  onto the parent's label by an invisible glyph-sized spacer rather than a
- *  second padding utility. */
+ * onto the parent's label by an invisible glyph-sized spacer rather than a
+ * second padding utility. */
 const subRowClass = cn(
   "flex min-h-7 w-full cursor-pointer items-center gap-md rounded-md px-md py-xxs",
   "text-body-sm text-body transition duration-150 ease-out",
@@ -203,6 +267,10 @@ const isModified = (event: React.MouseEvent) =>
  * profile row pinned to the foot of the panel. A row click closes the drawer, so
  * a routed navigation never leaves the panel hanging open behind the new page.
  *
+ * A destination may carry a count: it reads as a pill after the label, and the
+ * number is part of the row's accessible name. Nothing is painted when the
+ * count is absent or zero.
+ *
  * The panel stays mounted and travels with `translate-x`, so the close
  * animation is never skipped; it only drops out of the paint once it has
  * finished travelling, and nothing inside can be tabbed while it is off-canvas.
@@ -557,6 +625,7 @@ export const SidebarMobile = React.forwardRef<HTMLDivElement, SidebarMobileProps
                   <nav aria-label="Primary" className="mt-md flex flex-col gap-xxs">
                     {navItems.map((item) => {
                       const active = item.id === activeId;
+                      const badged = hasBadge(item.badge);
 
                       if (!item.children?.length) {
                         return (
@@ -565,10 +634,21 @@ export const SidebarMobile = React.forwardRef<HTMLDivElement, SidebarMobileProps
                             href={item.href ?? `#${item.id}`}
                             onClick={navigate({ id: item.id, href: item.href })}
                             aria-current={active ? "page" : undefined}
+                            aria-label={
+                              badged
+                                ? rowAccessibleName(item.label, item.badge)
+                                : undefined
+                            }
                             className={rowClass(active)}
                           >
                             {glyph(item.icon, 18, 1.75)}
                             <span className="truncate">{item.label}</span>
+                            {badged ? (
+                              <NavBadge
+                                badge={item.badge as number | string}
+                                active={active}
+                              />
+                            ) : null}
                           </a>
                         );
                       }
@@ -583,18 +663,32 @@ export const SidebarMobile = React.forwardRef<HTMLDivElement, SidebarMobileProps
                             size="rail"
                             aria-expanded={expanded}
                             aria-controls={subId}
+                            aria-label={
+                              badged
+                                ? rowAccessibleName(item.label, item.badge)
+                                : undefined
+                            }
                             data-active={active}
                             onClick={() => toggleExpanded(item.id)}
                             className="px-md"
                             leadingIcon={glyph(item.icon, 18, 1.75)}
                             trailingIcon={
-                              <span
-                                className={cn(
-                                  "flex shrink-0 items-center transition-transform duration-200 ease-out",
-                                  expanded ? "rotate-180" : "rotate-0",
-                                )}
-                              >
-                                {glyph("chevron-down", 18, 2)}
+                              <span className="flex items-center gap-xs">
+                                {badged ? (
+                                  <NavBadge
+                                    badge={item.badge as number | string}
+                                    active={active}
+                                  />
+                                ) : null}
+                                <span
+                                  aria-hidden="true"
+                                  className={cn(
+                                    "flex shrink-0 items-center transition-transform duration-200 ease-out",
+                                    expanded ? "rotate-180" : "rotate-0",
+                                  )}
+                                >
+                                  {glyph("chevron-down", 18, 2)}
+                                </span>
                               </span>
                             }
                           >
@@ -659,6 +753,7 @@ export const SidebarMobile = React.forwardRef<HTMLDivElement, SidebarMobileProps
                   <nav aria-label="Secondary" className="flex flex-col gap-xxs">
                     {secondaryNav.map((item) => {
                       const active = item.id === secondaryActiveId;
+                      const badged = hasBadge(item.badge);
 
                       return (
                         <a
@@ -666,10 +761,21 @@ export const SidebarMobile = React.forwardRef<HTMLDivElement, SidebarMobileProps
                           href={item.href ?? `#${item.id}`}
                           onClick={navigate({ id: item.id, href: item.href })}
                           aria-current={active ? "page" : undefined}
+                          aria-label={
+                            badged
+                              ? rowAccessibleName(item.label, item.badge)
+                              : undefined
+                          }
                           className={rowClass(active)}
                         >
                           {glyph(item.icon, 18, 1.75)}
                           <span className="truncate">{item.label}</span>
+                          {badged ? (
+                            <NavBadge
+                              badge={item.badge as number | string}
+                              active={active}
+                            />
+                          ) : null}
                         </a>
                       );
                     })}