devias-io / material-kit-react

React Dashboard made with Material UI’s components. Our pro template contains features like TypeScript version, authentication system with Firebase and Auth0 plus many other
http://material-kit-react.devias.io
MIT License
5.37k stars 2.46k forks source link

The navbar toggle button doesn't work #139

Closed znadir closed 1 year ago

znadir commented 1 year ago

Reproduction steps:

  1. Open the live example
  2. Resize the browser window to make it the same as mobile resolution.
  3. Click on the button to display the navbar.

Expected behavior:

Actual behavior:

ralphdelara commented 1 year ago

Hi @nadirzebiri I fixed it in my local by setting default openNav state to false

setting its default to false to avoid seeing nav on page load on < 1200 screens

then updating useEffect to

useEffect(() => {
    if (screen.width > 1199) {
      setOpenNav(true);
    }
 }, []);

screen.width > 1199 means it will show the nav on page load on >= 1200 screens

Hope this helps :)

znadir commented 1 year ago

Thanks for the solution. However, i think using window.innerWidth is better approach than screen.width. I'll keep this issue open until it's resolved in the repository.

acomanescu commented 1 year ago

Thank you @nadirzebiri @ralphdelara, the issue was the useEffect implementation. It should work as expected now.