From 66a70f676f134f3980894f9a5469dc10c49e68f2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:12:20 +0100
Subject: [PATCH] fix: full-width top bar with logo, sidebar below

Restructure layout: top bar spans full width (Pulse logo left, user
actions right) with continuous bottom border. Sidebar sits below with
no vertical border collision. Remove logo from sidebar. Remove all
transition-colors from nav items to prevent white flash on click.
---
 components/dashboard/DashboardShell.tsx | 12 +++++----
 components/dashboard/Sidebar.tsx        | 17 +------------
 components/dashboard/UtilityBar.tsx     | 34 ++++++++++++++++++-------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 8b3d6cb..3914598 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -14,11 +14,13 @@ export default function DashboardShell({
   const { mobileOpen, closeMobile } = useSidebar()
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-        <UtilityBar />
-        <main className="flex-1 overflow-y-auto">
+    <div className="flex flex-col h-screen overflow-hidden">
+      {/* Top bar: full width — logo left, actions right */}
+      <UtilityBar />
+      {/* Below: sidebar + content */}
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
+        <main className="flex-1 min-w-0 overflow-y-auto">
           {children}
         </main>
       </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b1058e0..c4cd017 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -204,7 +204,7 @@ function NavItemLink({
       } ${
         isActive
           ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
       }`}
     >
       <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
@@ -253,21 +253,6 @@ export default function Sidebar({
 
     return (
       <div className="flex flex-col h-full overflow-hidden">
-        {/* Logo */}
-        <Link
-          href="/"
-          className={`flex items-center gap-2.5 px-4 py-4 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
-        >
-          <img
-            src="/pulse_icon_no_margins.png"
-            alt="Pulse"
-            className="w-8 h-8 shrink-0 object-contain"
-          />
-          {!isCollapsed && (
-            <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
-          )}
-        </Link>
-
         {/* Site Picker */}
         <div className="pt-3 pb-2">
           <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/UtilityBar.tsx
index 7c9f01e..36359f9 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/UtilityBar.tsx
@@ -68,15 +68,31 @@ export default function UtilityBar() {
 
   return (
     <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
-      {/* Left: mobile sidebar toggle */}
-      <button
-        onClick={openMobile}
-        className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-        aria-label="Open navigation"
-      >
-        <MenuIcon className="w-5 h-5" />
-      </button>
-      <div className="hidden lg:block" />
+      {/* Left: Pulse logo + mobile toggle */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={openMobile}
+          className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+          aria-label="Open navigation"
+        >
+          <MenuIcon className="w-5 h-5" />
+        </button>
+        <Link
+          href="/"
+          className="flex items-center gap-3 group relative"
+        >
+          <div className="relative w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center shrink-0">
+            <img
+              src="/pulse_icon_no_margins.png"
+              alt="Pulse Logo"
+              className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 transform-gpu will-change-transform [backface-visibility:hidden]"
+            />
+          </div>
+          <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-300">
+            Pulse
+          </span>
+        </Link>
+      </div>
 
       {/* Right: actions */}
       <div className="flex items-center gap-3">