fix: sidebar polish — logo, scrollbar, utility bar height, icon flash
- Fix stretched logo with object-contain - Remove border below logo - Add overflow-hidden to prevent scrollbar flash during transition - Match utility bar height to old header (py-3.5) - Remove transition-colors from active nav items to prevent white flash
This commit is contained in:
@@ -199,12 +199,12 @@ function NavItemLink({
|
|||||||
href={href}
|
href={href}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
title={collapsed ? item.label : undefined}
|
title={collapsed ? item.label : undefined}
|
||||||
className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors ${
|
className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
|
||||||
collapsed ? 'justify-center' : ''
|
collapsed ? 'justify-center' : ''
|
||||||
} ${
|
} ${
|
||||||
isActive
|
isActive
|
||||||
? 'bg-brand-orange/10 text-brand-orange'
|
? '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'
|
: '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'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
|
<item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
|
||||||
@@ -252,16 +252,16 @@ export default function Sidebar({
|
|||||||
const isCollapsed = isMobile ? false : collapsed
|
const isCollapsed = isMobile ? false : collapsed
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full overflow-hidden">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
className={`flex items-center gap-2.5 px-4 py-4 border-b border-neutral-200 dark:border-neutral-800 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
|
className={`flex items-center gap-2.5 px-4 py-4 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/pulse_icon_no_margins.png"
|
src="/pulse_icon_no_margins.png"
|
||||||
alt="Pulse"
|
alt="Pulse"
|
||||||
className="w-8 h-8 shrink-0"
|
className="w-8 h-8 shrink-0 object-contain"
|
||||||
/>
|
/>
|
||||||
{!isCollapsed && (
|
{!isCollapsed && (
|
||||||
<span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
|
<span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export default function UtilityBar() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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-6 py-2">
|
<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 */}
|
{/* Left: mobile sidebar toggle */}
|
||||||
<button
|
<button
|
||||||
onClick={openMobile}
|
onClick={openMobile}
|
||||||
|
|||||||
Reference in New Issue
Block a user