officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dock: lift the nav-dock hide threshold when the music dock is present

Browse Source 
The nav dock rides MUSIC_DOCK_HEIGHT higher while the music dock is up, but the
hide threshold was still measured from the bottom — so hovering the raised dock
read as past HIDE_THRESHOLD and it slid away under the cursor. Lift hideAt (and
the magnify gate) by MUSIC_DOCK_HEIGHT; the reveal trigger stays at the edge.
Also read musicDockPresent via a ref so the once-registered mousemove handler
reacts to music starting/stopping.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-07-27 13:56:51 +00:00
co-authored by Claude Opus 4.8
parent ee6c7b0fdd
commit d317bfc983
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx
+11 -5
View File
@@ -37,17 +37,23 @@ export const Dock = ({ items, className }: DockProps) => {
const location = useLocation(); const location = useLocation();
const { current } = useMusicPlayer(); const { current } = useMusicPlayer();
const musicDockPresent = !!current; const musicDockPresent = !!current;
// Read the latest value inside the (once-registered) mousemove handler, so it reacts to the music
// dock appearing/disappearing without re-binding the listener.
const musicPresentRef = useRef(musicDockPresent);
musicPresentRef.current = musicDockPresent;
const isActive = (to: string) => (to === '/' ? location.pathname === '/' : location.pathname.startsWith(to)); const isActive = (to: string) => (to === '/' ? location.pathname === '/' : location.pathname.startsWith(to));
useEffect(() => { useEffect(() => {
const handleMouseMove = (ev: MouseEvent) => { const handleMouseMove = (ev: MouseEvent) => {
const distFromBottom = window.innerHeight - ev.clientY; const distFromBottom = window.innerHeight - ev.clientY;
setVisible((prev) => { // When the music dock is present the nav dock rides MUSIC_DOCK_HEIGHT higher, so lift the hide/
if (!prev) return distFromBottom <= SHOW_THRESHOLD; // magnify zone by the same amount — otherwise hovering the raised dock counts as past the hide
return distFromBottom <= HIDE_THRESHOLD; // threshold and it slides away under the cursor. The reveal trigger stays at the bottom edge.
}); const lift = musicPresentRef.current ? MUSIC_DOCK_HEIGHT : 0;
if (distFromBottom <= HIDE_THRESHOLD) { const hideAt = HIDE_THRESHOLD + lift;
setVisible((prev) => (prev ? distFromBottom <= hideAt : distFromBottom <= SHOW_THRESHOLD));
if (distFromBottom <= hideAt) {
const rect = dockRef.current?.getBoundingClientRect(); const rect = dockRef.current?.getBoundingClientRect();
if (rect) setMouseX(ev.clientX - rect.left); if (rect) setMouseX(ev.clientX - rect.left);
} else { } else {