From 622172f0387dc7f029c8af797d1f8df2e790771e Mon Sep 17 00:00:00 2001 From: Fringg Date: Mon, 9 Mar 2026 21:09:37 +0300 Subject: [PATCH] feat: add gradient fade indicators to scrollable desktop nav --- src/components/layout/AppShell/AppShell.tsx | 163 ++++++++++++-------- 1 file changed, 102 insertions(+), 61 deletions(-) diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index 24f8a5f..fbc10f8 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useLocation, Link } from 'react-router'; import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -269,6 +269,31 @@ export function AppShell({ children }: AppShellProps) { haptic.impact('light'); }; + // Desktop nav scroll fade indicators + const navRef = useRef(null); + const [navCanScrollLeft, setNavCanScrollLeft] = useState(false); + const [navCanScrollRight, setNavCanScrollRight] = useState(false); + + const updateNavScroll = useCallback(() => { + const el = navRef.current; + if (!el) return; + setNavCanScrollLeft(el.scrollLeft > 2); + setNavCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 2); + }, []); + + useEffect(() => { + const el = navRef.current; + if (!el) return; + updateNavScroll(); + el.addEventListener('scroll', updateNavScroll, { passive: true }); + const ro = new ResizeObserver(updateNavScroll); + ro.observe(el); + return () => { + el.removeEventListener('scroll', updateNavScroll); + ro.disconnect(); + }; + }, [updateNavScroll]); + // Calculate header height based on fullscreen mode (only on mobile Telegram) // On iOS: contentSafeAreaInset.top includes status bar + dynamic island + Telegram header // On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~48px) @@ -317,73 +342,89 @@ export function AppShell({ children }: AppShellProps) { {/* Center Navigation */} - + {/* Right side actions */}