Made drawer responsive on phones (#46)

* Made drawer responsive on phones * Drag on phone * REFAC Co-authored-by: Grzegorz Poreba <[email protected]>
Kraksim · Dec 29, 2021 · faaa5b8 · faaa5b8
1 parent 5c93df0
commit faaa5b8
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -69,7 +69,6 @@
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.3",
-    "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-graph-vis": "^1.0.7",
     "react-redux": "^7.2.5",

diff --git a/src/features/common/hooks.ts b/src/features/common/hooks.ts
@@ -1,5 +1,29 @@
 import { useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 
 export function useUrlParamsQuery(): URLSearchParams {
   return new URLSearchParams(useLocation().search);
 }
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions(): { width: number; height: number } {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
diff --git a/src/features/map/MapVisualizer.tsx b/src/features/map/MapVisualizer.tsx
@@ -72,6 +72,7 @@ function getStaticMapOptions() {
       zoomView: false,
       hover: false,
     },
+    clickToUse: true,
   };
 }
 

diff --git a/src/features/page/menu/PageMenu.tsx b/src/features/page/menu/PageMenu.tsx
@@ -1,5 +1,5 @@
 import {
-  Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, Box, IconButton, 
+  Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, Box, IconButton,
 } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import MapIcon from '@mui/icons-material/Map';
@@ -8,24 +8,26 @@ import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import CreateIcon from '@mui/icons-material/Create';
 import { useHistory } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { isMobile } from 'react-device-detect';
+import SvgIcon from '@mui/material/SvgIcon/SvgIcon';
 
 import CompareSimulationDialog from '../home/dialogs/CompareSimulationsDialog';
+import useWindowDimensions from '../../common/hooks';
 
 const EXPANDED_WIDTH = '250px';
 const COLLAPSED_WIDTH = '66px';
+const MAX_SMALL_SCREEN_WIDTH = 1006;
 
 const ItemText = styled(ListItemText)(() => ({
   whiteSpace: 'nowrap',
 }));
 
-export default function PageMenu(): JSX.Element{ // todo make it look good on phones
+export default function PageMenu(): JSX.Element {
   const [compareSimulationsDialogOpened, setCompareSimulationsDialogOpened] = useState(false);
+  const { width:windowWidth } = useWindowDimensions();
 
   const history = useHistory();
   const [currentPath, setCurrentPath] = useState(history.location.pathname);
 
-
   useEffect(() => {
     return history.listen((location) => {
       setCurrentPath(location.pathname);
@@ -48,69 +50,115 @@ export default function PageMenu(): JSX.Element{ // todo make it look good on ph
     history.push('/');
   };
 
-  const normalTabStyle = { marginBottom:'16px', color:'#A3AED0', borderRadius: '5px' };
-  const currentTabStyle = { ...normalTabStyle,
-    backgroundColor: '#337180',
-    color: '#FFFFFF',
-    ':hover': {
-      bgcolor: '#337180',
-    } };
+  const isBigScreen = windowWidth >= MAX_SMALL_SCREEN_WIDTH;
+  const drawerWidth = isBigScreen ? EXPANDED_WIDTH : COLLAPSED_WIDTH;
+  const listPadding = {
+    padding: '30px',
 
+    '@media (max-width: 1006px)': {
+      padding: '15px 5px 0 5px',
+    },
+
+  };
+  const logoSx = {
+    padding: '18px 0px 22px 30px',
+    '@media (max-width: 1006px)': {
+      padding: '0',
+    },
+  };
   return (
     <>
-    <Drawer variant="permanent" sx={{ width: isMobile ? COLLAPSED_WIDTH : EXPANDED_WIDTH }}>
-        <Box width={ isMobile ? COLLAPSED_WIDTH : EXPANDED_WIDTH }>
-            <Box sx={{ padding: '18px 0px 22px 30px' }}>
-            <IconButton onClick={onLogoClick}>
-                <img alt="kraksim-logo" 
-                style={{ width: '50px', height: '50px' }} 
-                src={'/logo192.png'} 
-                />
-            </IconButton>
+        <Drawer variant="permanent" sx={{ width: drawerWidth }}>
+            <Box width={drawerWidth}>
+                <Box sx={logoSx}>
+                    <IconButton onClick={onLogoClick}>
+                        <img alt="kraksim-logo"
+                             style={{ width: '50px', height: '50px' }}
+                             src={'/logo192.png'}
+                        />
+                    </IconButton>
+                </Box>
+                <Divider/>
+                <List sx={listPadding}>
+                    <PageListItem
+                        text="Maps"
+                        clicked={currentPath === '/maps/all'}
+                        onClick={onViewMapsClicked}
+                        Icon={MapIcon}
+                        expanded={isBigScreen}/>
+                    <PageListItem
+                        text="Simulations"
+                        clicked={currentPath === '/simulations/all'}
+                        onClick={onViewSimulationsClicked}
+                        Icon={UpdateIcon}
+                        expanded={isBigScreen}/>
+                    <PageListItem
+                        text="Comparator"
+                        clicked={currentPath === '/simulations/compare'}
+                        onClick={() => setCompareSimulationsDialogOpened(true)}
+                        Icon={QueryStatsIcon}
+                        expanded={isBigScreen}/>
+                    <PageListItem
+                        text="Map creator"
+                        clicked={currentPath === '/maps/create'}
+                        onClick={onCreateMapClicked}
+                        Icon={CreateIcon}
+                        expanded={isBigScreen}/>
+                </List>
             </Box>
-            <Divider />
-            <List  sx={{ padding: '30px' }}>
-                <ListItem sx = { currentPath === '/maps/all' ? currentTabStyle : normalTabStyle }
-                          button
-                          onClick={onViewMapsClicked}>
-                    <ListItemIcon>
-                        <MapIcon sx ={{ color: currentPath === '/maps/all' ? '#FFFFFF' : '#A3AED0' }}/>
-                    </ListItemIcon>
-                    <ItemText primary="Maps"/>
-                </ListItem>
-                <ListItem sx = { currentPath === '/simulations/all' ? currentTabStyle : normalTabStyle }
-                    button
-                    onClick={onViewSimulationsClicked}>
-                    <ListItemIcon>
-                        <UpdateIcon sx = {{ color: currentPath ===  '/simulations/all' ? '#FFFFFF' : '#A3AED0' }}/>
-                    </ListItemIcon>
-                    <ItemText primary="Simulations"/>
-                </ListItem>
-                <ListItem sx = { currentPath.includes('/simulations/compare') ? currentTabStyle : normalTabStyle }
-                    button
-                    onClick={() => setCompareSimulationsDialogOpened(true)}>
-                    <ListItemIcon>
-                        <QueryStatsIcon
-                            sx = {{ color: currentPath ===  '/simulations/compare' ? '#FFFFFF' : '#A3AED0' }}/>
-                    </ListItemIcon>
-                    <ItemText sx={{ whiteSpace: 'nowrap' }} primary="Comparator"/>
-                </ListItem>
-                <ListItem sx = { currentPath === '/maps/create' ? currentTabStyle : normalTabStyle }
-                    button
-                    onClick={onCreateMapClicked}>
-                    <ListItemIcon>
-                        <CreateIcon sx ={{ color: currentPath === '/maps/create' ? '#FFFFFF' : '#A3AED0' }}/>
-                    </ListItemIcon>
-                    <ItemText primary="Map creator"/>
-                </ListItem>
-            </List>
-        </Box>
-    </Drawer>
-    <CompareSimulationDialog
-        afterConfirm={() => setCompareSimulationsDialogOpened(false)}
-        open={compareSimulationsDialogOpened}
-        onClose={() => setCompareSimulationsDialogOpened(false)}
-    />
+        </Drawer>
+        <CompareSimulationDialog
+            afterConfirm={() => setCompareSimulationsDialogOpened(false)}
+            open={compareSimulationsDialogOpened}
+            onClose={() => setCompareSimulationsDialogOpened(false)}
+        />
     </>
   );
+}
+
+interface Props {
+  text: string;
+  clicked: boolean;
+  onClick: () => void;
+  Icon: typeof SvgIcon;
+  expanded: boolean
+}
+
+export function PageListItem({
+  text, clicked, onClick, Icon, expanded,
+}: Props) : JSX.Element{
+
+  const normalTabStyle = {
+    marginBottom: '16px',
+    color: '#A3AED0',
+    borderRadius: '5px',
+    '@media (max-width: 1006px)': {
+      paddingLeft: '16px',
+    },
+  };
+  const currentTabStyle = {
+    ...normalTabStyle,
+    backgroundColor: '#337180',
+    color: '#FFFFFF',
+    ':hover': {
+      bgcolor: '#337180',
+    },
+  };
+
+
+  const styledIcon = <Icon sx={{ color: clicked ? '#FFFFFF' : '#A3AED0' }}/>;
+  return <ListItem
+        sx={clicked ? currentTabStyle : normalTabStyle}
+        button
+        onClick={onClick}>
+        {
+            expanded
+              ? <ListItemIcon>
+                    {styledIcon}
+                </ListItemIcon>
+              : styledIcon
+        }
+
+        {expanded ? <ItemText primary={text}/> : null}
+    </ListItem>;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -9694,13 +9694,6 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-device-detect@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.1.2.tgz#60abb6fa361ec4cc839469a0c4c3e9b8ea17d6b5"
-  integrity sha512-N42xttwez3ECgu4KpOL2ICesdfoz8NCBfmc1rH9FRYSjH7NmMyANPSrQ3EvAtJyj/6TzJNhrANSO38iXjCB2Ug==
-  dependencies:
-    ua-parser-js "^0.7.30"
-
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -11493,11 +11486,6 @@ typescript@^4.4.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
   integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
 
-ua-parser-js@^0.7.30:
-  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
-  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,6 +72,7 @@ function getStaticMapOptions() { @@
           zoomView: false,
           hover: false,
         },
+        clickToUse: true,
       };
     }
@@ Expand Down @@