matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove edge swipe sidebar detection

Browse Source 
User prefers the existing swipe mechanism for sidebar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-23 02:19:18 +01:00
parent 50199ec0e4
commit acebfb7adb
1 changed files with 1 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/contexts/SidebarContext.tsx
View File

@@ -1,11 +1,8 @@
import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react'; import { createContext, useContext, useState, useEffect, useCallback } from 'react';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { useAuth } from './AuthContext'; import { useAuth } from './AuthContext';
import { settingsAPI } from '../api/client'; import { settingsAPI } from '../api/client';
const EDGE_SWIPE_THRESHOLD = 50; // pixels from left edge to start swipe
const SWIPE_MIN_DISTANCE = 40; // minimum swipe distance to trigger
export type SidebarMode = 'collapsed' | 'expanded' | 'toggle' | 'dynamic'; export type SidebarMode = 'collapsed' | 'expanded' | 'toggle' | 'dynamic';
interface SidebarContextType { interface SidebarContextType {
@@ -112,72 +109,6 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
setIsMobileOpen(false); setIsMobileOpen(false);
}; };
const openMobileMenu = useCallback(() => {
setIsMobileOpen(true);
}, []);
// Edge swipe detection for mobile
const swipeRef = useRef({
startX: 0,
startY: 0,
isEdgeSwipe: false,
isMobile: false,
});
useEffect(() => {
// Check mobile once on mount and on resize
const updateMobile = () => {
swipeRef.current.isMobile = window.innerWidth <= 768;
};
updateMobile();
window.addEventListener('resize', updateMobile, { passive: true });
const handleTouchStart = (e: TouchEvent) => {
if (!swipeRef.current.isMobile) return;
const touch = e.touches[0];
if (!touch) return;
// Check if touch started near left edge
if (touch.clientX <= EDGE_SWIPE_THRESHOLD) {
swipeRef.current.startX = touch.clientX;
swipeRef.current.startY = touch.clientY;
swipeRef.current.isEdgeSwipe = true;
} else {
swipeRef.current.isEdgeSwipe = false;
}
};
const handleTouchMove = (e: TouchEvent) => {
if (!swipeRef.current.isEdgeSwipe) return;
const touch = e.touches[0];
if (!touch) return;
const dx = touch.clientX - swipeRef.current.startX;
const dy = Math.abs(touch.clientY - swipeRef.current.startY);
// If horizontal movement is greater than vertical and exceeds threshold, open sidebar
if (dx > SWIPE_MIN_DISTANCE && dx > dy * 2) {
openMobileMenu();
swipeRef.current.isEdgeSwipe = false; // Prevent multiple triggers
}
};
const handleTouchEnd = () => {
swipeRef.current.isEdgeSwipe = false;
};
document.addEventListener('touchstart', handleTouchStart, { passive: true });
document.addEventListener('touchmove', handleTouchMove, { passive: true });
document.addEventListener('touchend', handleTouchEnd, { passive: true });
return () => {
window.removeEventListener('resize', updateMobile);
document.removeEventListener('touchstart', handleTouchStart);
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
};
}, [openMobileMenu]);
const setSidebarMode = useCallback(async (mode: SidebarMode) => { const setSidebarMode = useCallback(async (mode: SidebarMode) => {
try { try {
if (!token) return; if (!token) return;