ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: eliminate sidebar jitter on collapse/expand

Browse Source 
Root cause: class switching (px-2↔px-3, justify-center↔gap-2.5,
conditional DOM rendering) caused instant layout jumps during the
200ms width transition.

Fix: internal layout is now 100% static — same padding, same gap,
same DOM structure in both states. Only opacity transitions on text
labels (via Label component). The sidebar overflow:hidden + width
transition handles the visual collapse. Collapse icon rotates 180deg
instead of swapping between two icons.
This commit is contained in:
Usman Baig
2026-03-18 16:45:39 +01:00
parent 5807a50092
commit 5c8f334017
1 changed files with 66 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
components/dashboard/Sidebar.tsx
View File

@@ -22,6 +22,8 @@ import {
} from '@ciphera-net/ui'
const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
const EXPANDED = 256
const COLLAPSED = 56
type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
@@ -32,10 +34,7 @@ interface NavItem {
matchPrefix?: boolean
}
interface NavGroup {
label: string
items: NavItem[]
}
interface NavGroup { label: string; items: NavItem[] }
const NAV_GROUPS: NavGroup[] = [
{
@@ -58,23 +57,24 @@ const NAV_GROUPS: NavGroup[] = [
]
const SETTINGS_ITEM: NavItem = {
label: 'Settings',
href: (id) => `/sites/${id}/settings`,
icon: SettingsIcon,
matchPrefix: true,
label: 'Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
}
// Label that fades with the sidebar — always in the DOM, never removed
function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
return (
<span
className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
style={{ opacity: collapsed ? 0 : 1 }}
>
{children}
</span>
)
}
// ─── Site Picker ────────────────────────────────────────────
function SitePicker({
sites,
siteId,
collapsed,
}: {
sites: Site[]
siteId: string
collapsed: boolean
}) {
function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: string; collapsed: boolean }) {
const [open, setOpen] = useState(false)
const [search, setSearch] = useState('')
const ref = useRef<HTMLDivElement>(null)
@@ -85,10 +85,7 @@ function SitePicker({
useEffect(() => {
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) {
setOpen(false)
setSearch('')
}
if (ref.current && !ref.current.contains(e.target as Node)) { setOpen(false); setSearch('') }
}
document.addEventListener('mousedown', handler)
return () => document.removeEventListener('mousedown', handler)
@@ -96,38 +93,33 @@ function SitePicker({
const switchSite = (id: string) => {
router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
setOpen(false)
setSearch('')
setOpen(false); setSearch('')
}
const filtered = sites.filter(
(s) =>
s.name.toLowerCase().includes(search.toLowerCase()) ||
s.domain.toLowerCase().includes(search.toLowerCase())
(s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
)
return (
<div className={`relative mb-4 ${collapsed ? 'px-2' : 'px-3'}`} ref={ref}>
<div className="relative mb-4 px-3" ref={ref}>
<button
onClick={() => setOpen(!open)}
className={`w-full flex items-center rounded-lg py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
collapsed ? 'justify-center px-0' : 'gap-2.5 px-2'
}`}
className="w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
title={collapsed ? currentSite?.name || 'Select site' : undefined}
>
<span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
{initial}
</span>
{!collapsed && (
<>
<span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
<Label collapsed={collapsed}>
<span className="flex items-center gap-1">
<span className="truncate">{currentSite?.name || 'Select site'}</span>
<ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
</>
)}
</span>
</Label>
</button>
{open && (
<div className={`absolute top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px] ${collapsed ? 'left-1 right-auto' : 'left-3 right-3'}`}>
<div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden">
<div className="p-2">
<input
type="text"
@@ -158,16 +150,10 @@ function SitePicker({
</span>
</button>
))}
{filtered.length === 0 && (
<p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>
)}
{filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
</div>
<div className="border-t border-neutral-200 dark:border-neutral-700 p-2">
<Link
href="/sites/new"
onClick={() => setOpen(false)}
className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg"
>
<Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg">
<PlusIcon className="w-4 h-4" />
Add new site
</Link>
@@ -181,52 +167,30 @@ function SitePicker({
// ─── Nav Item ───────────────────────────────────────────────
function NavLink({
item,
siteId,
collapsed,
onClick,
pendingHref,
onNavigate,
item, siteId, collapsed, onClick, pendingHref, onNavigate,
}: {
item: NavItem
siteId: string
collapsed: boolean
onClick?: () => void
pendingHref: string | null
onNavigate: (href: string) => void
item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
pendingHref: string | null; onNavigate: (href: string) => void
}) {
const pathname = usePathname()
const href = item.href(siteId)
// Active if pathname matches OR if this link was just clicked (optimistic)
const matchesPathname = item.matchPrefix ? pathname.startsWith(href) : pathname === href
const matchesPending = pendingHref !== null && (item.matchPrefix ? pendingHref.startsWith(href) : pendingHref === href)
const active = matchesPathname || matchesPending
const handleClick = () => {
onNavigate(href)
onClick?.()
}
return (
<Link
href={href}
onClick={handleClick}
onClick={() => { onNavigate(href); onClick?.() }}
title={collapsed ? item.label : undefined}
className={`flex items-center rounded-lg py-2 text-sm font-medium ${
collapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5'
} ${
className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden ${
active
? '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'
}`}
>
<item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
{!collapsed && (
<span className="whitespace-nowrap overflow-hidden">
{item.label}
</span>
)}
<Label collapsed={collapsed}>{item.label}</Label>
</Link>
)
}
@@ -234,15 +198,9 @@ function NavLink({
// ─── Main Sidebar ───────────────────────────────────────────
export default function Sidebar({
siteId,
mobileOpen,
onMobileClose,
onMobileOpen,
siteId, mobileOpen, onMobileClose, onMobileOpen,
}: {
siteId: string
mobileOpen: boolean
onMobileClose: () => void
onMobileOpen: () => void
siteId: string; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
}) {
const { user } = useAuth()
const canEdit = user?.role === 'owner' || user?.role === 'admin'
@@ -254,24 +212,15 @@ export default function Sidebar({
return localStorage.getItem(SIDEBAR_KEY) === 'true'
})
useEffect(() => {
listSites().then(setSites).catch(() => {})
}, [])
useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
// Clear pending href once navigation completes
useEffect(() => {
setPendingHref(null)
onMobileClose()
}, [pathname, onMobileClose])
// Keyboard shortcut: [ to toggle
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
const tag = (e.target as HTMLElement)?.tagName
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
e.preventDefault()
toggle()
e.preventDefault(); toggle()
}
}
document.addEventListener('keydown', handler)
@@ -279,66 +228,39 @@ export default function Sidebar({
}, [collapsed])
const toggle = useCallback(() => {
setCollapsed((prev) => {
const next = !prev
localStorage.setItem(SIDEBAR_KEY, String(next))
return next
})
setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
}, [])
const handleNavigate = useCallback((href: string) => {
setPendingHref(href)
}, [])
const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
const sidebarContent = (isMobile: boolean) => {
const isCollapsed = isMobile ? false : collapsed
const c = isMobile ? false : collapsed
return (
<div className="flex flex-col h-full overflow-x-hidden">
{/* Logo */}
<Link
href="/"
className={`flex items-center shrink-0 group py-5 ${
isCollapsed ? 'justify-center px-0' : 'gap-3 px-5'
}`}
>
<img
src="/pulse_icon_no_margins.png"
alt="Pulse"
className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
/>
{!isCollapsed && (
<span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-150 whitespace-nowrap">
Pulse
</span>
)}
<div className="flex flex-col h-full overflow-hidden">
{/* Logo — fixed layout, text fades */}
<Link href="/" className="flex items-center gap-3 px-4 py-5 shrink-0 group overflow-hidden">
<img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
<span className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
Pulse
</span>
</Link>
{/* Site Picker */}
<SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
<SitePicker sites={sites} siteId={siteId} collapsed={c} />
{/* Nav Groups */}
<nav className={`flex-1 overflow-y-auto overflow-x-hidden space-y-4 ${isCollapsed ? 'px-2' : 'px-3'}`}>
<nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
{NAV_GROUPS.map((group) => (
<div key={group.label}>
{isCollapsed ? (
<div className="h-2" />
) : (
<p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
<div className="h-5 flex items-center overflow-hidden">
<p className={`px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
{group.label}
</p>
)}
</div>
<div className="space-y-0.5">
{group.items.map((item) => (
<NavLink
key={item.label}
item={item}
siteId={siteId}
collapsed={isCollapsed}
onClick={isMobile ? onMobileClose : undefined}
pendingHref={pendingHref}
onNavigate={handleNavigate}
/>
<NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
))}
</div>
</div>
@@ -346,33 +268,18 @@ export default function Sidebar({
</nav>
{/* Bottom */}
<div className={`border-t border-neutral-200 dark:border-neutral-800 py-3 space-y-0.5 shrink-0 ${isCollapsed ? 'px-2' : 'px-3'}`}>
<div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
{canEdit && (
<NavLink
item={SETTINGS_ITEM}
siteId={siteId}
collapsed={isCollapsed}
onClick={isMobile ? onMobileClose : undefined}
pendingHref={pendingHref}
onNavigate={handleNavigate}
/>
<NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
)}
{!isMobile && (
<button
onClick={toggle}
className={`flex items-center rounded-lg py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
isCollapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5'
}`}
className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
>
{collapsed ? (
<CollapseRightIcon className="w-[18px] h-[18px] shrink-0" />
) : (
<>
<CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
<span className="whitespace-nowrap overflow-hidden">Collapse</span>
</>
)}
<CollapseLeftIcon className={`w-[18px] h-[18px] shrink-0 transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
<Label collapsed={c}>Collapse</Label>
</button>
)}
</div>
@@ -382,13 +289,10 @@ export default function Sidebar({
return (
<>
{/* Desktop */}
{/* Desktop — width transitions, internal layout never changes */}
<aside
className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
style={{
width: collapsed ? 56 : 256,
transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
}}
style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
>
{sidebarContent(false)}
</aside>
@@ -396,17 +300,11 @@ export default function Sidebar({
{/* Mobile overlay */}
{mobileOpen && (
<>
<div
className="fixed inset-0 z-40 bg-black/30 md:hidden"
onClick={onMobileClose}
/>
<div className="fixed inset-0 z-40 bg-black/30 md:hidden" onClick={onMobileClose} />
<aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
<div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
<span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
<button
onClick={onMobileClose}
className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
>
<button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300">
<XIcon className="w-5 h-5" />
</button>
</div>