feat: enhance mobile and desktop layouts in Daily and Kanban pages
- Refactored `DailyPageClient` to prioritize mobile layout with today's section first and calendar at the bottom for better usability. - Updated `KanbanPageClient` to include responsive controls for mobile, improving task management experience. - Adjusted `DailyCheckboxItem` and `DailySection` for better touch targets and responsive design. - Cleaned up `TODO.md` to reflect changes in mobile interface considerations and task management features.
This commit is contained in:
29
src/hooks/useIsMobile.ts
Normal file
29
src/hooks/useIsMobile.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* Hook pour détecter si l'utilisateur est sur mobile
|
||||
* Utilise un breakpoint à 640px (sm en Tailwind)
|
||||
*/
|
||||
export function useIsMobile(breakpoint: number = 640): boolean {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const checkIsMobile = () => {
|
||||
setIsMobile(window.innerWidth < breakpoint);
|
||||
};
|
||||
|
||||
// Check initial
|
||||
checkIsMobile();
|
||||
|
||||
// Écouter les changements de taille
|
||||
window.addEventListener('resize', checkIsMobile);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkIsMobile);
|
||||
};
|
||||
}, [breakpoint]);
|
||||
|
||||
return isMobile;
|
||||
}
|
||||
Reference in New Issue
Block a user