1

I'm new in Reactjs, nevertheless I was trying to make a beautiful desktop platform that contains a map. In order to achieve this I used react-map-gl and react-pro-sidebar libraries. You can look at the libraries here https://www.npmjs.com/package/react-pro-sidebar https://visgl.github.io/react-map-gl/ . After make used of these libraries I came across a problem that when the side-bar is not collapsed the window of the map does not resize to 100% as I defined in the MapContainer div. As you can see in the code above(I only put a chunck of code because it's a lot):

const [viewport, setViewport] = useState({
    width: '100%',
    height: '100%',
    latitude: 40.634135,
    longitude: -8.6598916,
    zoom: 6
  });
return (
    <MapContainer>
      <ReactMapGL
        {...viewport}
        mapStyle="mapbox://styles/mapbox/light-v10"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN} >
        (...)
       </ReactMapGL>
     </MapContainer>
   
const MapContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
`;

The code of my side-bar is this:

    const [collapsed, setCollapsed] = useState();
    
    return (

        <ProSidebar onMouseLeave={() => setCollapsed(true)} onMouseEnter={() => setCollapsed(false)} collapsed={collapsed}>
            <SidebarHeader>
                <img src={logo} alt="Logo" />
                    </SidebarHeader>
            <SidebarContent>
                <Menu iconShape="square">
                    <MenuItem icon={<RiDashboardLine />}>
                        Dashboard
                                <Link to="/dashboard" />
                    </MenuItem >
                    <MenuItem icon={<AiFillAlert />}>
                        Alerts
                                <Link to="/alerts" />
                    </MenuItem>
                    <MenuItem icon={<RiBroadcastLine />}>
                        RSUs
                                <Link to="/rsus" />
                    </MenuItem>
                </Menu>
            </SidebarContent>
            <SidebarFooter>

            </SidebarFooter>
        </ProSidebar>

You can watch the outcame here: enter image description here

enter image description here

Hope you can help me fix this bug! I've tried to fix it but I failed to accomplish :/

Lucas Seabra
  • 63
  • 1
  • 1
  • 5
  • Is `MapContainer` what needs 100% of the view width, or is it the `viewport` state? How do your two snippets relate? is the state for the menu being open/closed accessible in the code defining the width you are trying to control? – Drew Reese Jun 13 '21 at 23:49
  • MapContainer is the wrapper div that when I define it as width: 100% and height:100% make possible that my viewport be width: 100% and height:100%. Otherwise I would need to define viewport as width: 100vw and height:100vh – Lucas Seabra Jun 15 '21 at 10:09
  • The state of the menu is not accessible because only the side-bar code can access it. I can make it accessible via store. Now my question is: Why would I need it? In the library of **react-pro-sidebar** it shows that automatically resize window when collapsed or not collapsed – Lucas Seabra Jun 15 '21 at 10:13
  • My guess then is that you've not structured your layout in the same way the [react-pro-sidebar demo](https://azouaoui-med.github.io/react-pro-sidebar/) has, it uses flex containers to by dynamic and responsive. – Drew Reese Jun 15 '21 at 16:34

0 Answers0