diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx index 428b1983..e69c05c3 100644 --- a/src/components/MobileBottomNav.tsx +++ b/src/components/MobileBottomNav.tsx @@ -169,12 +169,6 @@ export function MobileBottomNav() { useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), ); - const handleHomeClick = useCallback(() => { - if (location.pathname === '/') { - window.scrollTo({ top: 0, behavior: 'smooth' }); - } - }, [location.pathname]); - const handleDragEnd = useCallback((event: DragEndEvent) => { const { active, over } = event; if (!over || active.id === over.id) return; @@ -197,9 +191,9 @@ export function MobileBottomNav() { })); }, [orderedItems]); - // Check if current path matches any explore route (excluding __feed which is the Home tab) + // Check if current path matches any explore route const isExploreActive = orderedItems.some((id) => - id !== '__feed' && isItemActive(id, location.pathname, location.search), + isItemActive(id, location.pathname, location.search), ); const handleDrawerClose = (open: boolean) => { @@ -210,21 +204,14 @@ export function MobileBottomNav() { return ( <> - } - label="Home" - active={location.pathname === '/'} - onClick={handleHomeClick} - /> - } - label="Explore" - active={isExploreActive} - onClick={() => setExploreOpen(true)} - /> - {user ? ( + {user && ( <> + } + label="You" + active={location.pathname === userProfileUrl} + /> } @@ -232,21 +219,20 @@ export function MobileBottomNav() { active={location.pathname === '/notifications'} showIndicator={hasUnread} /> - } - label="You" - active={location.pathname === userProfileUrl} - /> > - ) : ( - } - label="Search" - active={location.pathname === '/search'} - /> )} + } + label="Explore" + active={isExploreActive} + onClick={() => setExploreOpen(true)} + /> + } + label="Search" + active={location.pathname === '/search'} + /> {/* Explore bottom sheet */} diff --git a/src/components/MobileDrawer.tsx b/src/components/MobileDrawer.tsx index 1383f317..c3b7dd1d 100644 --- a/src/components/MobileDrawer.tsx +++ b/src/components/MobileDrawer.tsx @@ -114,7 +114,7 @@ export function MobileDrawer({ open, onOpenChange }: MobileDrawerProps) { return ( - + Navigation menu {user ? ( diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx index 18c61c0c..cd5dcbec 100644 --- a/src/components/MobileTopBar.tsx +++ b/src/components/MobileTopBar.tsx @@ -1,6 +1,6 @@ import { useCallback } from 'react'; -import { Link, useLocation, useNavigate } from 'react-router-dom'; -import { Menu, Search } from 'lucide-react'; +import { Link, useLocation } from 'react-router-dom'; +import { Menu } from 'lucide-react'; import { DittoLogo } from '@/components/DittoLogo'; interface MobileTopBarProps { @@ -9,7 +9,6 @@ interface MobileTopBarProps { export function MobileTopBar({ onMenuClick }: MobileTopBarProps) { const location = useLocation(); - const navigate = useNavigate(); const handleLogoClick = useCallback((e: React.MouseEvent) => { if (location.pathname === '/') { @@ -20,35 +19,20 @@ export function MobileTopBar({ onMenuClick }: MobileTopBarProps) { return ( - - {/* Left: hamburger menu */} - - - - - + + {/* Left: Logo / Home */} + + + - {/* Center: Ditto logo */} - - - - - - - {/* Right: search icon */} - - navigate('/search')} - className="rounded-lg p-0.5 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-background transition-colors hover:bg-secondary/60" - aria-label="Search" - > - - - + {/* Right: hamburger menu */} + + + );