soufiane
062d05d0f0
- Create reusable UserDropdown component for user menu - Create useClickOutside hook for click-outside detection - Refactor admin/layout.tsx and employe/layout.tsx to use shared components - Reduces code duplication between layouts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
868 B
TypeScript
32 lines
868 B
TypeScript
import { useEffect, RefObject } from 'react';
|
|
|
|
/**
|
|
* Hook to detect clicks outside of a specified element
|
|
* @param ref - Reference to the element to monitor
|
|
* @param callback - Function to call when clicking outside
|
|
* @param enabled - Whether the hook is active (default: true)
|
|
*/
|
|
export function useClickOutside<T extends HTMLElement>(
|
|
ref: RefObject<T | null>,
|
|
callback: () => void,
|
|
enabled: boolean = true
|
|
): void {
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
callback();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, [ref, callback, enabled]);
|
|
}
|
|
|
|
export default useClickOutside;
|