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

fix: collapse icon uses negative margin to align with sidebar icons

Browse Source
This commit is contained in:
Usman Baig
2026-03-24 23:40:16 +01:00
parent 4702bb91b9
commit 4e5dd6e3f3
1 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/dashboard/DashboardShell.tsx
View File

@@ -38,19 +38,19 @@ function GlassTopBar({ siteId }: { siteId: string }) {
}, [realtime]) }, [realtime])
return ( return (
<div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3"> <div className="hidden md:flex items-center justify-between h-10 shrink-0 pr-3">
{/* Collapse toggle — aligned above sidebar */} {/* Collapse toggle — negative margin to align with sidebar icons */}
<button <button
onClick={toggle} onClick={toggle}
className="flex items-center justify-center p-1.5 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors" className="flex items-center justify-center w-10 h-10 -ml-[52px] text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
> >
<SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} /> <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
</button> </button>
{/* Realtime indicator — aligned above content right edge */} {/* Realtime indicator */}
{lastUpdatedRef.current != null && ( {lastUpdatedRef.current != null && (
<div className="flex items-center gap-1.5 text-xs text-neutral-500 mr-2"> <div className="flex items-center gap-1.5 text-xs text-neutral-500">
<span className="relative flex h-1.5 w-1.5"> <span className="relative flex h-1.5 w-1.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" /> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" /> <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
@@ -75,17 +75,16 @@ export default function DashboardShell({
return ( return (
<SidebarProvider> <SidebarProvider>
<div className="flex flex-col h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60"> <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
{/* Full-width top bar in glass area */} <Sidebar
<GlassTopBar siteId={siteId} /> siteId={siteId}
{/* Sidebar + content side by side */} mobileOpen={mobileOpen}
<div className="flex flex-1 min-h-0"> onMobileClose={closeMobile}
<Sidebar onMobileOpen={openMobile}
siteId={siteId} />
mobileOpen={mobileOpen} <div className="flex-1 flex flex-col min-w-0">
onMobileClose={closeMobile} {/* Glass top bar — above content only, collapse icon reaches back into sidebar column */}
onMobileOpen={openMobile} <GlassTopBar siteId={siteId} />
/>
{/* Content panel */} {/* Content panel */}
<div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 overflow-hidden"> <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 overflow-hidden">
<ContentHeader onMobileMenuOpen={openMobile} /> <ContentHeader onMobileMenuOpen={openMobile} />