Phase 8

src/components/navigation/staff-shell.tsx

@@ -1,4 +1,5 @@
 import { NotificationBell } from "@/features/notifications/components/notification-bell";
+import { getBranding } from "@/lib/business/branding";
 import { BottomNav } from "./bottom-nav";
 import { StaffSidebarNav } from "./staff-sidebar-nav";
 import type { BottomNavItem } from "./bottom-nav";
@@ -10,8 +11,12 @@ import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
  * defaults to the staff nav; (owner) passes OWNER_NAV_ITEMS instead (see
  * staff-nav-items.ts) — same shell, same sidebar/bottom-nav components,
  * different item set, per the Phase 6 brief's own nav requirement.
+ *
+ * Reads business branding itself (async Server Component) rather than
+ * requiring every (staff)/(owner) layout to fetch and thread it through —
+ * one call site covers both.
  */
-export function StaffShell({
+export async function StaffShell({
   children,
   items = STAFF_NAV_ITEMS,
   footerLink,
@@ -24,9 +29,10 @@ export function StaffShell({
   notificationsHref?: string;
   unreadNotificationCount?: number;
 }) {
+  const branding = await getBranding();
   return (
     <div className="min-h-screen bg-stone pb-24 lg:pb-0 lg:pl-56">
-      <StaffSidebarNav items={items} footerLink={footerLink} />
+      <StaffSidebarNav items={items} footerLink={footerLink} businessName={branding.name} logoUrl={branding.logoUrl} />
       <NotificationBell href={notificationsHref} unreadCount={unreadNotificationCount} />
       <div id="main-content">{children}</div>
       <BottomNav items={items} variant="staff" />

src/components/navigation/staff-sidebar-nav.tsx

@@ -18,10 +18,14 @@ import type { BottomNavItem } from "./bottom-nav";
 export function StaffSidebarNav({
   items,
   footerLink,
+  businessName,
+  logoUrl,
 }: {
   items: BottomNavItem[];
   /** Owner sidebar's explicit "back to barber tools" — see the brief's "clear access back to barber tools". Omitted on the staff sidebar itself. */
   footerLink?: { href: string; label: string };
+  businessName: string;
+  logoUrl: string | null;
 }) {
   const pathname = usePathname();
 
@@ -31,8 +35,13 @@ export function StaffSidebarNav({
       className="fixed inset-y-0 left-0 z-50 hidden w-56 flex-col border-r border-white/5 bg-[#0c0c0c] px-4 py-6 lg:flex"
     >
       <div className="mb-8 flex items-center gap-2 px-2 text-white">
-        <Scissors className="h-5 w-5" aria-hidden="true" />
-        <span className="text-sm font-bold tracking-widest uppercase">NextChair</span>
+        {logoUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element -- external, business-supplied URL.
+          <img src={logoUrl} alt="" className="h-5 w-5 rounded object-cover" />
+        ) : (
+          <Scissors className="h-5 w-5" aria-hidden="true" />
+        )}
+        <span className="truncate text-sm font-bold tracking-widest uppercase">{businessName}</span>
       </div>
       <div className="flex flex-1 flex-col gap-1">
         {items.map(({ href, label, icon }) => {