CODEWITHSUNDEEP
javascriptreactjs
tripleD
tripleD

Reputation: 53

React hide sidebar on mobile and show on big screen

I got a Sidebar from MaterialUI and I want it to hide on mobile screen, but if you click on the menu icon it should be visible and on big screens it should be visible by default, if you click on the menu icon it should close. I would like to use the library "react-responsive" for this, but I don't understand how to use it.

Sidebar.js

// ...imports and styles..


export const SideBar = ({ open }) => {
  const history = useHistory();

  return (
    <StyledSideBar variant="permanent" open={open}>
      <ModuleButton onClick={() => history.push('/dashboard')}>
        <Tooltip title="Dashdoard" placement="right" arrow >
          <FontAwesomeIcon icon={faTachometerAltFast} />
        </Tooltip >
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/chat')}>
        <Tooltip title="Chat" placement="right" arrow>
          <FontAwesomeIcon icon={faCommentsAlt} />
        </Tooltip>
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/calendar')}>
        <Tooltip title="Calendar" placement="right" arrow>
          <FontAwesomeIcon icon={faCalendarAlt} />
        </Tooltip>
      </ModuleButton>
    </StyledSideBar>
  );
}

export default SideBar;

MainPage.js

...imports and styles...

export const MainPage = () => {
  const dispatch = useDispatch();
  const onLogout = () => dispatch(logout());
  const [showSidebar, setShowSidebar] = useState(false);

  const onToggleSidebar = () => {
    setShowSidebar(!showSidebar);
  };

  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)'
  })

  const isTabletOrMobileDevice = useMediaQuery({
    query: '(max-device-width: 1224px)'
  })

  return (
    <>
      <MainHeader onLogout={onLogout} onToggleSidebar={onToggleSidebar} />
      {isDesktopOrLaptop &&
        <SideBar open={showSidebar}  />
      }
      {isTabletOrMobileDevice &&
        <SmSideBar open={showSidebar} />
      }
      <Container>
        <BrowserRouter>
          <Route path="*" exact component={MainContent} />
        </BrowserRouter>
      </Container>
    </>
  );
}

export default authGuardFactory(Redirect)(emailGuardFactory(Redirect)(MainPage));

SmSideBar.js

...import and styles...

export const SmSideBar = ({ open }) => {
  const history = useHistory();

  return (
    <StyledSideBar variant="persistent" open={open} >
      <ModuleButton onClick={() => history.push('/dashboard')}>
        <Tooltip title="Dashdoard" placement="right" arrow >
          <FontAwesomeIcon icon={faTachometerAltFast} />
        </Tooltip >
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/chat')}>
        <Tooltip title="Chat" placement="right" arrow>
          <FontAwesomeIcon icon={faCommentsAlt} />
        </Tooltip>
      </ModuleButton>
      <ModuleButton onClick={() => history.push('/calendar')}>
        <Tooltip title="Calendar" placement="right" arrow>
          <FontAwesomeIcon icon={faCalendarAlt} />
        </Tooltip>
      </ModuleButton>
    </StyledSideBar>
  );
}

export default SmSideBar;

I tried to add another Sidebar only for Tablet and Mobile, but it dont work. The only difference between the two is the variant.

Upvotes: 1

Views: 2931

Answers (1)

tripleD
tripleD

Reputation: 53

I solved the Problem with methods by using react-responsive library and js Breakpoints.

MainPage.js

export const MainPage = ( { match }) => {
  const dispatch = useDispatch();
  const onLogout = () => dispatch(logout());

  const onSizeChange = (matches) => {
    setShowSidebar(matches);
  }
  const isDesktopOrLaptop = useMediaQuery(breakpoints.MAndUp, undefined, onSizeChange)

  const [showSidebar, setShowSidebar] = useState(isDesktopOrLaptop);
  const onToggleSidebar = () => {
    setShowSidebar(!showSidebar);
  };

Now everything works fine :)

Upvotes: 2

Related Questions