Multiple HierarchicalMenu with same facets in the same page (different window size)

Open Q&A
,
1

Hello!

We have two Filter components that use connectHierarchicalMenu() on one page. We would like to render one of them on bigger devices like desktops and one for tablets & mobile devices.

Expected behavior:
Users must able to open the page in desktop size and see <BigFilter /> component and when they resize the window to a smaller size like a tablet/mobile, we want to render <SmallFilter /> component.

We tried checking the userAgent & window.innerWidth to prevent rendering both at the same time, but it seems they invoke together.

Imaginary sample code from our page:

const Exmaple = () => {

  const THRESHOLD  = 1000;
  const isBrowser =  typeof window !== 'undefined';
  const isDesktop = isBrowser && (window.innerWidth ?? 0) > THRESHOLD;

  return (
    <div>
      {isDesktop && <BigFilter />}
      {!isDesktop && <SmallFilter />}
    </div>
  );
};

NOTE: We are using SSR and this is the reason I checked window object before using it.

I guess this is a very common scenario to have two different components for small & big devices, with the same facet reference. but I stuck with the following error:

Error: Cannot declare two hierarchical facets with the same name: `myExampleFacet`

Thanks in advance