1 files changed, 6 insertions, 4 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 7fd4315..08ba343 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -3,6 +3,8 @@ import { useHistory } from 'react-router-dom';
 import {
   makeStyles, Paper, Toolbar, TextField, IconButton, Button,
 } from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import { uiActions } from './store/ui';
 
 import { useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -22,7 +24,6 @@ import BottomMenu from './components/BottomMenu';
 import { useTranslation } from './LocalizationProvider';
 import PoiMap from './map/PoiMap';
 import MapPadding from './map/MapPadding';
-
 const useStyles = makeStyles((theme) => ({
   root: {
     height: '100vh',
@@ -93,19 +94,20 @@ const MainPage = () => {
   const classes = useStyles();
   const history = useHistory();
   const theme = useTheme();
+  const dispatch = useDispatch();
   const t = useTranslation();
 
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
   const [deviceName, setDeviceName] = useState('');
-  const [collapsed, setCollapsed] = useState(false);
+  const collapsed = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
-    setCollapsed(!collapsed);
+    dispatch(uiActions.setCollapsed(!collapsed));
   };
 
-  useEffect(() => setCollapsed(isTablet), [isTablet]);
+  useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
 
   return (
     <div className={classes.root}>