|
@@ -26,16 +26,25 @@ export const StyleProvider = ({ children }) => {
|
|
|
showSider: initialShowSiderValue,
|
|
showSider: initialShowSiderValue,
|
|
|
siderCollapsed: false,
|
|
siderCollapsed: false,
|
|
|
shouldInnerPadding: initialInnerPaddingValue,
|
|
shouldInnerPadding: initialInnerPaddingValue,
|
|
|
|
|
+ manualSiderControl: false,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const dispatch = useCallback((action) => {
|
|
const dispatch = useCallback((action) => {
|
|
|
if ('type' in action) {
|
|
if ('type' in action) {
|
|
|
switch (action.type) {
|
|
switch (action.type) {
|
|
|
case 'TOGGLE_SIDER':
|
|
case 'TOGGLE_SIDER':
|
|
|
- setState((prev) => ({ ...prev, showSider: !prev.showSider }));
|
|
|
|
|
|
|
+ setState((prev) => ({
|
|
|
|
|
+ ...prev,
|
|
|
|
|
+ showSider: !prev.showSider,
|
|
|
|
|
+ manualSiderControl: true
|
|
|
|
|
+ }));
|
|
|
break;
|
|
break;
|
|
|
case 'SET_SIDER':
|
|
case 'SET_SIDER':
|
|
|
- setState((prev) => ({ ...prev, showSider: action.payload }));
|
|
|
|
|
|
|
+ setState((prev) => ({
|
|
|
|
|
+ ...prev,
|
|
|
|
|
+ showSider: action.payload,
|
|
|
|
|
+ manualSiderControl: action.manual || false
|
|
|
|
|
+ }));
|
|
|
break;
|
|
break;
|
|
|
case 'SET_MOBILE':
|
|
case 'SET_MOBILE':
|
|
|
setState((prev) => ({ ...prev, isMobile: action.payload }));
|
|
setState((prev) => ({ ...prev, isMobile: action.payload }));
|
|
@@ -56,27 +65,40 @@ export const StyleProvider = ({ children }) => {
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
const updateMobileStatus = () => {
|
|
const updateMobileStatus = () => {
|
|
|
- dispatch({ type: 'SET_MOBILE', payload: getIsMobile() });
|
|
|
|
|
|
|
+ const currentIsMobile = getIsMobile();
|
|
|
|
|
+ if (!currentIsMobile &&
|
|
|
|
|
+ (location.pathname === '/console' || location.pathname.startsWith('/console/'))) {
|
|
|
|
|
+ dispatch({ type: 'SET_SIDER', payload: true, manual: false });
|
|
|
|
|
+ }
|
|
|
|
|
+ dispatch({ type: 'SET_MOBILE', payload: currentIsMobile });
|
|
|
};
|
|
};
|
|
|
window.addEventListener('resize', updateMobileStatus);
|
|
window.addEventListener('resize', updateMobileStatus);
|
|
|
return () => window.removeEventListener('resize', updateMobileStatus);
|
|
return () => window.removeEventListener('resize', updateMobileStatus);
|
|
|
- }, [dispatch]);
|
|
|
|
|
|
|
+ }, [dispatch, location.pathname]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
- if (state.isMobile && state.showSider) {
|
|
|
|
|
|
|
+ if (state.isMobile && state.showSider && !state.manualSiderControl) {
|
|
|
dispatch({ type: 'SET_SIDER', payload: false });
|
|
dispatch({ type: 'SET_SIDER', payload: false });
|
|
|
}
|
|
}
|
|
|
- }, [state.isMobile, state.showSider, dispatch]);
|
|
|
|
|
|
|
+ }, [state.isMobile, state.showSider, state.manualSiderControl, dispatch]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
const currentPathname = location.pathname;
|
|
const currentPathname = location.pathname;
|
|
|
const currentlyMobile = getIsMobile();
|
|
const currentlyMobile = getIsMobile();
|
|
|
|
|
|
|
|
if (currentPathname === '/console' || currentPathname.startsWith('/console/')) {
|
|
if (currentPathname === '/console' || currentPathname.startsWith('/console/')) {
|
|
|
- dispatch({ type: 'SET_SIDER', payload: !currentlyMobile });
|
|
|
|
|
|
|
+ dispatch({
|
|
|
|
|
+ type: 'SET_SIDER',
|
|
|
|
|
+ payload: !currentlyMobile,
|
|
|
|
|
+ manual: false
|
|
|
|
|
+ });
|
|
|
dispatch({ type: 'SET_INNER_PADDING', payload: true });
|
|
dispatch({ type: 'SET_INNER_PADDING', payload: true });
|
|
|
} else {
|
|
} else {
|
|
|
- dispatch({ type: 'SET_SIDER', payload: false });
|
|
|
|
|
|
|
+ dispatch({
|
|
|
|
|
+ type: 'SET_SIDER',
|
|
|
|
|
+ payload: false,
|
|
|
|
|
+ manual: false
|
|
|
|
|
+ });
|
|
|
dispatch({ type: 'SET_INNER_PADDING', payload: false });
|
|
dispatch({ type: 'SET_INNER_PADDING', payload: false });
|
|
|
}
|
|
}
|
|
|
}, [location.pathname, dispatch]);
|
|
}, [location.pathname, dispatch]);
|