Semantic-ui-react: Menu doesn't show properly on HomepageLayout.js example on mobile mode.

[ysfBenali]

Check the issue on this link : https://react.semantic-ui.com/layouts/homepage/

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[geraldoramos]

Plus one for this issue

I spent hours thinking this was an SSR issue related to next.js but after testing the original I confirmed this is not working when loading on mobile.

In order to reproduce on the desktop using the developer tools, make sure to load the site starting as a mobile device (ie: Iphone X), If you start as a desktop and then resize, it works perfectly. The issue is when it's loaded initially as a mobile device.

Sometimes my nextjs cli spits out this error, but I'm not sure if it's related:

Warning: Failed prop type: Element is not defined
    in Sidebar (at pages/index.jsx:162)
    in MobileContainer (at pages/index.jsx:212)

[Briggsdf]

Any updates on this? We're having this issue on our website as well https://gmgt.live .

[Briggsdf]

Just for any future people who encounter this. Install NoSSR and then do this,

 <NoSSR>
    <MobileContainer>{children}</MobileContainer>
    <DesktopContainer >{children}</DesktopContainer>
  </NoSSR>

[deniapps]

This is the issue due to SSR. As you see in the code:

// Heads up!
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
// For more advanced usage please check Responsive docs under the "Usage" section.
const getWidth = () => {
  const isSSR = typeof window === 'undefined'

  return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth
}

The getWidth() does not check SSR from mobile. In which, isSSR is false, so then the width equals to Tablet.minWidth, and then the layout messed up.

The solution is using "mobile-detect" npm to detect the mobile device from the server side by checking the request header's user-agent. The code like this: (copied from Responsive docs under the "Usage" section)

//NOTE: I add this in _app.js (NextJS), then save it in the context, 
//so I don't need to call this on every page
deniApp.getInitialProps = async (appContext) => {
  const agent = appContext.ctx.req
    ? appContext.ctx.req.headers["user-agent"]
    : "";
  const md = new MobileDetect(agent);
  const isMobileFromSSR = !!md.mobile();
  return { isMobileFromSSR };
};

//Then change getWidth() function to check isMobileFromSSR
const getWidthFactory = (isMobileFromSSR) => () => {
  console.log("mobile?", isMobileFromSSR);
  const isSSR = typeof window === "undefined";
  const ssrValue = isMobileFromSSR
    ? Responsive.onlyMobile.maxWidth
    : Responsive.onlyTablet.minWidth;

  return isSSR ? ssrValue : window.innerWidth;
};

DEMO: https://deniapps.com/playground/home
Repos: https://github.com/deniapps/nextfeathers

[layershifter]

Closing in favor of https://github.com/Semantic-Org/Semantic-UI-React/issues/4002#issuecomment-665000116

Responsive will be deprecated and removed. I will provide an upgrade guide.