veza/apps/web/src/hooks/useSidebarNavigation.ts
senke 95e31646cb feat(ui): Sidebar refactor, premium skeletons, ContentFadeIn transitions
- 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>
2026-02-10 22:51:51 +01:00

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,
};
}