Hackathons/VTHacks13
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SideBar Style Update

Browse Source
This commit is contained in:
GamerBoss101
2025-09-27 15:40:50 -04:00
parent 4571f8f9c9
commit 59422b4c12
1 changed files with 47 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/app/components/DirectionsSidebar.tsx
View File

@@ -255,7 +255,7 @@ export default function DirectionsSidebar({ mapRef, profile = "mapbox/driving" }
ref={containerRef} ref={containerRef}
role="region" role="region"
aria-label="Directions sidebar" aria-label="Directions sidebar"
className={`flex flex-col transition-all duration-200 ease-in-out z-40 ${collapsed ? 'w-11 h-11 self-start m-3 rounded-full' : 'w-[340px] h-full bg-[#111214] rounded-tr-lg rounded-br-lg'}`} className={`relative flex flex-col z-40 ${collapsed ? 'w-11 h-11 self-start m-3 rounded-full overflow-hidden bg-transparent' : 'w-[340px] h-full bg-[#111214] rounded-tr-lg rounded-br-lg'}`}
> >
{/* Toggle */} {/* Toggle */}
<button <button
@@ -263,15 +263,21 @@ export default function DirectionsSidebar({ mapRef, profile = "mapbox/driving" }
onClick={() => setCollapsed((s) => !s)} onClick={() => setCollapsed((s) => !s)}
title={collapsed ? 'Expand directions' : 'Minimize directions'} title={collapsed ? 'Expand directions' : 'Minimize directions'}
className={collapsed className={collapsed
? 'w-full h-full rounded-full bg-white text-black/85 flex items-center justify-center shadow-md border border-black/10' ? 'w-full h-full rounded-full bg-white text-black/85 flex items-center justify-center shadow-md border border-black/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white/60'
: 'absolute top-3 right-3 w-9 h-9 rounded-md bg-white/5 text-white border border-black/10 flex items-center justify-center hover:bg-white/10' : 'absolute top-3 right-3 -m-1 p-1 w-9 h-9 rounded-md bg-white/5 text-white border border-black/10 flex items-center justify-center hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white/60 z-50 pointer-events-auto'
} }
> >
<span aria-hidden="true" className="text-lg leading-none">☰</span> {/* increase hit area with an inner svg and ensure cursor is pointer */}
<svg aria-hidden="true" className="w-5 h-5 pointer-events-none" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6h18" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<path d="M3 12h18" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
<path d="M3 18h18" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button> </button>
{/* Content (hidden when collapsed) */} {/* Content — render only when expanded to avoid any collapsed 'strip' */}
<div className={`${collapsed ? 'hidden' : 'flex'} flex-col flex-1 p-4 overflow-auto`} aria-hidden={collapsed}> {!collapsed && (
<div className="flex flex-col flex-1 p-4 overflow-auto">
<div className="flex items-center justify-between mb-3 sticky top-2 z-10"> <div className="flex items-center justify-between mb-3 sticky top-2 z-10">
<strong className="text-sm">Directions</strong> <strong className="text-sm">Directions</strong>
</div> </div>
@@ -307,6 +313,7 @@ export default function DirectionsSidebar({ mapRef, profile = "mapbox/driving" }
{pickMode && <div className="text-sm">Click on the map to set {pickMode}.</div>} {pickMode && <div className="text-sm">Click on the map to set {pickMode}.</div>}
</div> </div>
</div> </div>
)}
</div> </div>
); );
} }