From b1194e959d10fb090700cd1ac4032bf7c530dc88 Mon Sep 17 00:00:00 2001
From: ELKorede <157540453+ELKorede@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:00:40 +0000
Subject: [PATCH 1/2] feat: add fixed mobile bottom navigation bar

- Add MobileBottomNav component with four tabs (Marketplace, Portfolio,
  Watchlist, Notifications), visible only on viewports below 768px via
  md:hidden
- Active tab highlighted per current route with top-edge indicator bar
- Notification badge on the Notifications tab reads unreadCount from
  useNotifications, capped at 99+
- Add RootLayout wrapper using <Outlet> so MobileBottomNav is mounted
  globally inside the router context without per-page changes
- Nest all routes under RootLayout in routes.tsx
- Document the hidden md:flex intent on Header nav links to make it
  explicit that MobileBottomNav covers mobile navigation
---
 src/components/common/MobileBottomNav.tsx | 127 ++++++++++++++++++++++
 src/components/common/RootLayout.tsx      |  19 ++++
 src/components/home/Header.tsx            |   4 +-
 src/routes.tsx                            |  98 +++++++++--------
 4 files changed, 201 insertions(+), 47 deletions(-)
 create mode 100644 src/components/common/MobileBottomNav.tsx
 create mode 100644 src/components/common/RootLayout.tsx

diff --git a/src/components/common/MobileBottomNav.tsx b/src/components/common/MobileBottomNav.tsx
new file mode 100644
index 00000000..8aae9751
--- /dev/null
+++ b/src/components/common/MobileBottomNav.tsx
@@ -0,0 +1,127 @@
+import { LayoutGrid, BarChart2, Bookmark, Bell } from 'lucide-react';
+import { NavLink, useLocation } from 'react-router';
+import { cn } from '@/lib/utils';
+import { useNotifications } from '@/hooks/useNotifications';
+import { useProfileStore } from '@/hooks/useProfileStore';
+
+interface Tab {
+	label: string;
+	href: string;
+	/** Additional paths that should also highlight this tab as active. */
+	matchPaths?: string[];
+	icon: React.ReactNode;
+	activeIcon?: React.ReactNode;
+}
+
+const tabs: Tab[] = [
+	{
+		label: 'Marketplace',
+		href: '/',
+		matchPaths: ['/creators'],
+		icon: <LayoutGrid className="size-5" aria-hidden="true" />,
+	},
+	{
+		label: 'Portfolio',
+		href: '/profile',
+		icon: <BarChart2 className="size-5" aria-hidden="true" />,
+	},
+	{
+		label: 'Watchlist',
+		href: '/following',
+		icon: <Bookmark className="size-5" aria-hidden="true" />,
+	},
+	{
+		label: 'Notifications',
+		href: '/notifications',
+		icon: <Bell className="size-5" aria-hidden="true" />,
+	},
+];
+
+/**
+ * Fixed bottom navigation bar for mobile viewports (< 768px).
+ *
+ * Renders four primary navigation tabs (Marketplace, Portfolio, Watchlist,
+ * Notifications) with active route highlighting and an unread-count badge on
+ * the Notifications tab.  Hidden on md+ viewports via Tailwind's `md:hidden`.
+ */
+export function MobileBottomNav() {
+	const { pathname } = useLocation();
+	const profile = useProfileStore(state => state.profile);
+	const userId = profile?.id ?? '';
+
+	const { unreadCount } = useNotifications(userId);
+
+	function isTabActive(tab: Tab): boolean {
+		if (tab.href === '/') {
+			// Only exact match for root to avoid matching everything
+			return pathname === '/' || (tab.matchPaths?.includes(pathname) ?? false);
+		}
+		return (
+			pathname === tab.href ||
+			pathname.startsWith(tab.href + '/') ||
+			(tab.matchPaths?.some(p => pathname === p || pathname.startsWith(p + '/')) ?? false)
+		);
+	}
+
+	return (
+		<nav
+			aria-label="Mobile navigation"
+			className="md:hidden fixed inset-x-0 bottom-0 z-50 border-t border-border bg-background/95 backdrop-blur-md"
+		>
+			<ul className="flex h-16 items-stretch" role="list">
+				{tabs.map(tab => {
+					const active = isTabActive(tab);
+					const isNotifications = tab.href === '/notifications';
+
+					return (
+						<li key={tab.href} className="flex flex-1">
+							<NavLink
+								to={tab.href}
+								aria-current={active ? 'page' : undefined}
+								aria-label={
+									isNotifications && unreadCount > 0
+										? `${tab.label} — ${unreadCount} unread`
+										: tab.label
+								}
+								className={cn(
+									'relative flex flex-1 flex-col items-center justify-center gap-1 text-[10px] font-medium transition-colors',
+									active
+										? 'text-foreground'
+										: 'text-muted-foreground hover:text-foreground'
+								)}
+							>
+								{/* Icon wrapper — relative so badge can be positioned inside it */}
+								<span className="relative">
+									{tab.icon}
+
+									{/* Notification badge */}
+									{isNotifications && unreadCount > 0 && (
+										<span
+											data-testid="mobile-nav-notification-badge"
+											aria-hidden="true"
+											className="absolute -right-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 font-mono text-[9px] font-bold leading-none text-white"
+										>
+											{unreadCount > 99 ? '99+' : unreadCount}
+										</span>
+									)}
+								</span>
+
+								{/* Active indicator dot */}
+								{active && (
+									<span
+										aria-hidden="true"
+										className="absolute top-0 left-1/2 h-0.5 w-8 -translate-x-1/2 rounded-full bg-foreground"
+									/>
+								)}
+
+								<span>{tab.label}</span>
+							</NavLink>
+						</li>
+					);
+				})}
+			</ul>
+		</nav>
+	);
+}
+
+export default MobileBottomNav;
diff --git a/src/components/common/RootLayout.tsx b/src/components/common/RootLayout.tsx
new file mode 100644
index 00000000..7fa9d6a1
--- /dev/null
+++ b/src/components/common/RootLayout.tsx
@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router';
+import MobileBottomNav from '@/components/common/MobileBottomNav';
+
+/**
+ * Root layout shared by all routes.
+ *
+ * Renders the matched child route via <Outlet> and mounts the
+ * MobileBottomNav globally so it is always available on mobile viewports
+ * without each page having to include it individually.
+ */
+export default function RootLayout() {
+	return (
+		<>
+			<Outlet />
+			{/* Fixed bottom navigation bar — visible only on viewports < 768px (md:hidden) */}
+			<MobileBottomNav />
+		</>
+	);
+}
diff --git a/src/components/home/Header.tsx b/src/components/home/Header.tsx
index f18a9130..908123fb 100644
--- a/src/components/home/Header.tsx
+++ b/src/components/home/Header.tsx
@@ -50,7 +50,9 @@ export default function Header() {
 					</span>
 				</Link>
 
-				{/* Nav */}
+				{/* Nav — hidden on mobile (< 768px) because MobileBottomNav handles
+				    primary navigation on small viewports.  `md:flex` keeps it
+				    visible on tablet and desktop. */}
 				<nav className="hidden items-center gap-8 md:flex shrink-0">
 					{navLinks.map(link =>
 						link.external ? (
diff --git a/src/routes.tsx b/src/routes.tsx
index 395c43df..ba6e23bb 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,3 +1,4 @@
+import RootLayout from './components/common/RootLayout';
 import HomePage from './pages/HomePage';
 import NotFoundPage from './pages/NotFoundPage';
 import AdminDashboardPage from './pages/AdminDashboardPage';
@@ -10,51 +11,56 @@ import FollowingPage from './pages/FollowingPage';
 
 export const routes = [
 	{
-		path: '/',
-		element: <HomePage />,
-	},
-	{
-		path: '/creators',
-		element: <HomePage />,
-	},
-	{
-		path: '/leaderboard',
-		element: <LeaderboardPage />,
-	},
-	{
-		path: '/creator/:id',
-		element: <CreatorDetailPage />,
-	},
-	{
-		path: '/creators/:id',
-		element: <CreatorDetailPage />,
-	},
-	{
-		path: '/creator/:id/dashboard',
-		element: <CreatorDashboardPage />,
-	},
-	{
-		path: '/creators/:id/dashboard',
-		element: <CreatorDashboardPage />,
-	},
-	{
-		path: '/notifications',
-		element: <NotificationsPage />,
-	},
-	{
-		path: '/profile',
-		element: <ProfilePage />,
-	},
-	{
-		path: '/following',
-		element: <FollowingPage />,
-	},
-	{
-		path: '/admin/dashboard',
-		element: <AdminDashboardPage />,
-	},
-	{
-		path: '*',
-		element: <NotFoundPage />,
+		element: <RootLayout />,
+		children: [
+			{
+				path: '/',
+				element: <HomePage />,
+			},
+			{
+				path: '/creators',
+				element: <HomePage />,
+			},
+			{
+				path: '/leaderboard',
+				element: <LeaderboardPage />,
+			},
+			{
+				path: '/creator/:id',
+				element: <CreatorDetailPage />,
+			},
+			{
+				path: '/creators/:id',
+				element: <CreatorDetailPage />,
+			},
+			{
+				path: '/creator/:id/dashboard',
+				element: <CreatorDashboardPage />,
+			},
+			{
+				path: '/creators/:id/dashboard',
+				element: <CreatorDashboardPage />,
+			},
+			{
+				path: '/notifications',
+				element: <NotificationsPage />,
+			},
+			{
+				path: '/profile',
+				element: <ProfilePage />,
+			},
+			{
+				path: '/following',
+				element: <FollowingPage />,
+			},
+			{
+				path: '/admin/dashboard',
+				element: <AdminDashboardPage />,
+			},
+			{
+				path: '*',
+				element: <NotFoundPage />,
+			},
+		],
 	},
 ];

From 4bc7f7fbd6e2b036a1d6dbf34f325c3aac1d4613 Mon Sep 17 00:00:00 2001
From: ELKorede <157540453+ELKorede@users.noreply.github.com>
Date: Fri, 4 Sep 2026 17:51:32 +0000
Subject: [PATCH 2/2] fix: wire RootLayout as parent layout route in routes.tsx

RootLayout was imported but never used, causing an ESLint
@typescript-eslint/no-unused-vars error in CI. Restructured the routes
array to use RootLayout as the top-level layout route with all existing
routes as children, so MobileBottomNav is rendered on every page via
the Outlet pattern.
---
 src/routes.tsx | 105 ++++++++++++++++++++++++++-----------------------
 1 file changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/routes.tsx b/src/routes.tsx
index acc9a1da..cff98070 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -12,55 +12,60 @@ import ComparePage from './pages/ComparePage';
 
 export const routes = [
 	{
-		path: '/',
-		element: <HomePage />,
-	},
-	{
-		path: '/creators',
-		element: <HomePage />,
-	},
-	{
-		path: '/leaderboard',
-		element: <LeaderboardPage />,
-	},
-	{
-		path: '/creator/:id',
-		element: <CreatorDetailPage />,
-	},
-	{
-		path: '/creators/:id',
-		element: <CreatorDetailPage />,
-	},
-	{
-		path: '/creator/:id/dashboard',
-		element: <CreatorDashboardPage />,
-	},
-	{
-		path: '/creators/:id/dashboard',
-		element: <CreatorDashboardPage />,
-	},
-	{
-		path: '/notifications',
-		element: <NotificationsPage />,
-	},
-	{
-		path: '/profile',
-		element: <ProfilePage />,
-	},
-	{
-		path: '/following',
-		element: <FollowingPage />,
-	},
-	{
-		path: '/compare',
-		element: <ComparePage />,
-	},
-	{
-		path: '/admin/dashboard',
-		element: <AdminDashboardPage />,
-	},
-	{
-		path: '*',
-		element: <NotFoundPage />,
+		element: <RootLayout />,
+		children: [
+			{
+				path: '/',
+				element: <HomePage />,
+			},
+			{
+				path: '/creators',
+				element: <HomePage />,
+			},
+			{
+				path: '/leaderboard',
+				element: <LeaderboardPage />,
+			},
+			{
+				path: '/creator/:id',
+				element: <CreatorDetailPage />,
+			},
+			{
+				path: '/creators/:id',
+				element: <CreatorDetailPage />,
+			},
+			{
+				path: '/creator/:id/dashboard',
+				element: <CreatorDashboardPage />,
+			},
+			{
+				path: '/creators/:id/dashboard',
+				element: <CreatorDashboardPage />,
+			},
+			{
+				path: '/notifications',
+				element: <NotificationsPage />,
+			},
+			{
+				path: '/profile',
+				element: <ProfilePage />,
+			},
+			{
+				path: '/following',
+				element: <FollowingPage />,
+			},
+			{
+				path: '/compare',
+				element: <ComparePage />,
+			},
+			{
+				path: '/admin/dashboard',
+				element: <AdminDashboardPage />,
+			},
+			{
+				path: '*',
+				element: <NotFoundPage />,
+			},
+		],
 	},
 ];