🐛 fix: SSR hydration mismatch in mobile detection & clean up sidebar style
- 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.
This commit is contained in:
@@ -115,7 +115,7 @@ const PageLayout = () => {
|
||||
{showSider && (
|
||||
<Sider
|
||||
style={{
|
||||
position: isMobile ? 'fixed' : 'fixed',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: '64px',
|
||||
zIndex: 99,
|
||||
|
||||
@@ -11,5 +11,6 @@ export const useIsMobile = () => {
|
||||
return () => mql.removeEventListener('change', callback);
|
||||
},
|
||||
() => window.matchMedia(query).matches,
|
||||
() => false,
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user