4640d0a4aa
The `handleNavLinkClick` function in `HeaderBar.js` was previously forcing the sidebar to be visible for all non-'home' navigation links on non-mobile devices. This interfered with the intended logic in `StyleContext` which controls sidebar visibility based on the current route. This commit modifies `handleNavLinkClick` to: - Only apply specific style dispatches (setting inner padding and sider to false) for the 'home' link, which may have unique layout requirements. - Remove the logic that unconditionally set sidebar visibility and inner padding for other navigation links. - Continue to close the mobile menu загрязнения (`setMobileMenuOpen(false)`) on any nav link click. This change ensures that `StyleContext` is the single source of truth for determining sidebar visibility based on the route, resolving an issue where clicking a non-console link Pferde (e.g., 'Pricing', 'About') would incorrectly display the sidebar, especially when the link was clicked Pferde a second time while already on that page.
96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
// contexts/User/index.jsx
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { isMobile as getIsMobile } from '../../helpers/index.js';
|
|
|
|
export const StyleContext = React.createContext({
|
|
dispatch: () => null,
|
|
});
|
|
|
|
export const StyleProvider = ({ children }) => {
|
|
const location = useLocation();
|
|
const initialIsMobile = getIsMobile();
|
|
|
|
const initialPathname = location.pathname;
|
|
let initialShowSiderValue = false;
|
|
let initialInnerPaddingValue = false;
|
|
|
|
if (initialPathname.includes('/console')) {
|
|
initialShowSiderValue = !initialIsMobile;
|
|
initialInnerPaddingValue = true;
|
|
}
|
|
|
|
const [state, setState] = useState({
|
|
isMobile: initialIsMobile,
|
|
showSider: initialShowSiderValue,
|
|
siderCollapsed: false,
|
|
shouldInnerPadding: initialInnerPaddingValue,
|
|
});
|
|
|
|
const dispatch = useCallback((action) => {
|
|
if ('type' in action) {
|
|
switch (action.type) {
|
|
case 'TOGGLE_SIDER':
|
|
setState((prev) => ({ ...prev, showSider: !prev.showSider }));
|
|
break;
|
|
case 'SET_SIDER':
|
|
setState((prev) => ({ ...prev, showSider: action.payload }));
|
|
break;
|
|
case 'SET_MOBILE':
|
|
setState((prev) => ({ ...prev, isMobile: action.payload }));
|
|
break;
|
|
case 'SET_SIDER_COLLAPSED':
|
|
setState((prev) => ({ ...prev, siderCollapsed: action.payload }));
|
|
break;
|
|
case 'SET_INNER_PADDING':
|
|
setState((prev) => ({ ...prev, shouldInnerPadding: action.payload }));
|
|
break;
|
|
default:
|
|
setState((prev) => ({ ...prev, ...action }));
|
|
}
|
|
} else {
|
|
setState((prev) => ({ ...prev, ...action }));
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const updateMobileStatus = () => {
|
|
dispatch({ type: 'SET_MOBILE', payload: getIsMobile() });
|
|
};
|
|
window.addEventListener('resize', updateMobileStatus);
|
|
return () => window.removeEventListener('resize', updateMobileStatus);
|
|
}, [dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (state.isMobile && state.showSider) {
|
|
dispatch({ type: 'SET_SIDER', payload: false });
|
|
}
|
|
}, [state.isMobile, state.showSider, dispatch]);
|
|
|
|
useEffect(() => {
|
|
const currentPathname = location.pathname;
|
|
const currentlyMobile = getIsMobile();
|
|
|
|
if (currentPathname === '/console' || currentPathname.startsWith('/console/')) {
|
|
dispatch({ type: 'SET_SIDER', payload: !currentlyMobile });
|
|
dispatch({ type: 'SET_INNER_PADDING', payload: true });
|
|
} else {
|
|
dispatch({ type: 'SET_SIDER', payload: false });
|
|
dispatch({ type: 'SET_INNER_PADDING', payload: false });
|
|
}
|
|
}, [location.pathname, dispatch]);
|
|
|
|
useEffect(() => {
|
|
const isCollapsed =
|
|
localStorage.getItem('default_collapse_sidebar') === 'true';
|
|
dispatch({ type: 'SET_SIDER_COLLAPSED', payload: isCollapsed });
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<StyleContext.Provider value={[state, dispatch]}>
|
|
{children}
|
|
</StyleContext.Provider>
|
|
);
|
|
};
|