Core ui react sidebar disappearing after clicking inside window and resizing

Question

I have used CoreUI to create a sidebar for my react project

<CSidebar style={vars} className="show">
    <CSidebarBrand
      className="sidebar_brand"
      onClick={() => {
        sidebarNavigate("/");
      }}
    >
      Survey Mate
    </CSidebarBrand>
    <CSidebarNav>
      <CNavTitle className="sidebar_title">Menu</CNavTitle>

      <CNavItem
        onClick={(e) => {
          e.preventDefault();
          sidebarNavigate("/");
        }}
        href="/"
      >
        <SidebarItemRow text={"Home"} icon={faHome} />
      </CNavItem>
      <CNavItem
        onClick={(e) => {
          e.preventDefault();
          sidebarNavigate("/");
        }}
        href="/"
      >
        <SidebarItemRow text={"Create Survey"} icon={faPlusSquare} />
      </CNavItem>
      <CNavGroup toggler="Publish Survey" className="dropdown_link">
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            sidebarNavigate("/");
          }}
          href="/"
        >
          <SidebarItemRow text={"Publish by Group "} icon={faPeopleGroup} />
        </CNavItem>
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            sidebarNavigate("/");
          }}
          href="/"
        >
          <SidebarItemRow text={"Publish by File"} icon={faFile} />
        </CNavItem>
      </CNavGroup>
      <CNavGroup toggler="Recipients/Groups" className="dropdown_link">
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            sidebarNavigate("/");
          }}
          href="/"
        >
          <SidebarItemRow text={"Add Recipient"} icon={faUser} />
        </CNavItem>
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            sidebarNavigate("/");
          }}
          href="/"
        >
          <SidebarItemRow text={"Create Group"} icon={faPeopleGroup} />
        </CNavItem>
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            sidebarNavigate("/");
          }}
          href="/"
        >
          <SidebarItemRow text={"Add to Group"} icon={faPlusSquare} />
        </CNavItem>
      </CNavGroup>
    </CSidebarNav>
    <div>
      <CSidebarNav>
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            sidebarNavigate("/");
          }}
          href="/"
        >
          <SidebarItemRow text={"Profile"} icon={faCircleUser} />
        </CNavItem>
        <CNavItem
          onClick={(e) => {
            e.preventDefault();
            logoutUser();
          }}
          href="/"
        >
          <SidebarItemRow text={"Logout"} icon={faRightFromBracket} />
        </CNavItem>
      </CSidebarNav>
    </div>
  </CSidebar>

I added the class show so it does not automatically hide on mobile devices. The problem is, if the browser window width gets smaller than the size it was originally set to hide at (which by default was 768px), then i click anywhere in the browser window, the sidebar will begin to hide once the window get bigger than 768px (reverse of its default behaviour).

Anyone know how to stop this?

Answer 1

I had the same problem and my solution was to use logic in the parent component:

function App() {
  const [sidebarVisible, setSidebarVisible] = useState(false)
  const handleToggleSidebar = () => setSidebarVisible(!sidebarVisible)
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 768) {
        setSidebarVisible(false);
      }
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

...

  return (
    <>
        <AppSideBar   visible={sidebarVisible} onToggleClicked={handleToggleSidebar} />
    </>  
  );
}

In my side bar component, I have something like

interface AppSideBarProps {
  visible: boolean;
  onToggleClicked: () => void;
}

export function AppSideBar({ visible, onToggleClicked }: AppSideBarProps) {
  return (
    <CCollapse id="navbarToggleExternalContent" visible={visible} horizontal>
      <CSidebar>
        <CSidebarBrand>Sidebar Brand</CSidebarBrand>
        <CSidebarNav>
...

It's not ideal, but I consider this a big in the library and I hope they fix this in future versions. This logic ideally should be inside the library.