409a3eac5a
- Added a server-snapshot fallback (`() => false`) to `useIsMobile` to ensure consistent results between server-side rendering and the browser, preventing hydration mismatches. - Removed a redundant ternary in `PageLayout` sidebar styles, replacing `isMobile ? 'fixed' : 'fixed'` with a single `'fixed'` value for clarity. These changes improve SSR reliability and tidy up inline styles without affecting runtime functionality.
16 lines
463 B
JavaScript
16 lines
463 B
JavaScript
export const MOBILE_BREAKPOINT = 768;
|
|
|
|
import { useSyncExternalStore } from 'react';
|
|
|
|
export const useIsMobile = () => {
|
|
const query = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
|
|
return useSyncExternalStore(
|
|
(callback) => {
|
|
const mql = window.matchMedia(query);
|
|
mql.addEventListener('change', callback);
|
|
return () => mql.removeEventListener('change', callback);
|
|
},
|
|
() => window.matchMedia(query).matches,
|
|
() => false,
|
|
);
|
|
};
|