Provide support to persist "isOpen" property in Sidebar Validated

Hi All,

We are using Sidebar component for our project with dock feature enabled. We have two states of Sidebar, as open and closed(docked). As per our requirement, we need to persist the open/close state across multiple renders. So, let's say when user lands on the page the sidebar is open by default. But if user chooses to close the sidebar, and the page re-renders the sidebar should be closed.

Current code trying to implement the above functionality:

const sidebarRef = useRef();

const [isOpen, setIsOpen] = useState(sessionStorage.getItem('isSidebarOpen'));

const toggleSideBar = () => {

  sidebarRef.current.toggle();

  setIsOpen(_isOpen => {

    sessionStorage.setItem('isSidebarOpen', !_isOpen);

    return !_isOpen;

  });

};

<SidebarComponent

  enableDock

  enableGestures={false}

  isOpen={isOpen}

  ref={sidebarRef}

  target={mainContainerClass}>

/*SomeStuff*/   

</SidebarComponent>

We initialize sessionStorage.isSidebarOpen as true, and it works perfectly on the first render. But when user toggles the sidebar and screen re-renders, the sidebar "isOpen" property ignore the "isOpen" state value.

Note: From Syncfusion documentation "enablePersistence" persist "type" and "position" but not "isOpen" property. I think our use case needs a similar feature.

Regards,

Westpac Team