Side nav with badge

app/components/SideNav.module.css

@@ -50,7 +50,7 @@
 
 .sideNavLink {
 	font-size: var(--fonts-xs);
-	color: var(--color-text-high);
+	color: var(--color-text);
 	text-decoration: none;
 	padding: var(--s-1) var(--s-2);
 	border-radius: var(--rounded-xs);
@@ -87,6 +87,8 @@
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
+	gap: var(--s-0-5);
+	width: 100%;
 }
 
 .sideNavLinkTitle {
@@ -99,6 +101,13 @@
 	}
 }
 
+.sideNavLinkSubtitleRow {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	color: var(--color-text-high);
+}
+
 .sideNavLinkSubtitle {
 	font-size: var(--fonts-xxs);
 	color: var(--color-text-lighter);
@@ -106,3 +115,14 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+.sideNavLinkBadge {
+	margin-left: auto;
+	font-size: var(--fonts-xxxs);
+	font-weight: var(--semi-bold);
+	color: var(--color-accent-low);
+	background-color: var(--color-accent-high);
+	padding: 0 var(--s-1);
+	border-radius: var(--rounded-xs);
+	flex-shrink: 0;
+}

app/components/SideNav.tsx

@@ -38,6 +38,7 @@ export function SideNavLink({
 	isActive,
 	imageUrl,
 	subtitle,
+	badge,
 }: {
 	children: React.ReactNode;
 	href: string;
@@ -45,6 +46,7 @@ export function SideNavLink({
 	isActive?: boolean;
 	imageUrl?: string;
 	subtitle?: string;
+	badge?: string;
 }) {
 	return (
 		<a
@@ -58,8 +60,15 @@ export function SideNavLink({
 			) : null}
 			<div className={styles.sideNavLinkContent}>
 				<span className={styles.sideNavLinkTitle}>{children}</span>
-				{subtitle ? (
-					<span className={styles.sideNavLinkSubtitle}>{subtitle}</span>
+				{subtitle || badge ? (
+					<div className={styles.sideNavLinkSubtitleRow}>
+						{subtitle ? (
+							<span className={styles.sideNavLinkSubtitle}>{subtitle}</span>
+						) : null}
+						{badge ? (
+							<span className={styles.sideNavLinkBadge}>{badge}</span>
+						) : null}
+					</div>
 				) : null}
 			</div>
 		</a>