- Sidebar: useSidebarNavigation hook, ARIA, token-based layout - Layout: lg:ml-main-expanded/collapsed (replace arbitrary ml-64) - TrackCardSkeleton + PlaylistCardSkeleton: KŌDŌ tokens, min-heights for CLS - ContentFadeIn: 200ms fade-in with --ease-out - TrackGrid, PlaylistList, LibraryPage: integrate skeletons + fade-in - Player: player-bar subcomponents, useAudioAnalyser - Tests: TrackGrid wrapper (QueryClient, ToastProvider) Co-authored-by: Cursor <cursoragent@cursor.com>
34 lines
904 B
TypeScript
34 lines
904 B
TypeScript
import { useCallback } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useAuthStore } from '@/features/auth/store/authStore';
|
|
import { useUIStore } from '@/stores/ui';
|
|
|
|
const SIDEBAR_BREAKPOINT = 1024;
|
|
|
|
/**
|
|
* Hook encapsulant la logique de navigation de la Sidebar :
|
|
* - Navigation vers une route
|
|
* - Fermeture automatique sur mobile après clic
|
|
* - Déconnexion
|
|
*/
|
|
export function useSidebarNavigation() {
|
|
const navigate = useNavigate();
|
|
const { logout } = useAuthStore();
|
|
const { setSidebarOpen } = useUIStore();
|
|
|
|
const handleMobileNav = useCallback(() => {
|
|
if (typeof window !== 'undefined' && window.innerWidth < SIDEBAR_BREAKPOINT) {
|
|
setSidebarOpen(false);
|
|
}
|
|
}, [setSidebarOpen]);
|
|
|
|
const handleLogout = useCallback(() => {
|
|
logout();
|
|
navigate('/login');
|
|
}, [logout, navigate]);
|
|
|
|
return {
|
|
handleMobileNav,
|
|
handleLogout,
|
|
};
|
|
}
|