Topic: Implement MDBSidenav contentRef (mode: side) - dynamic adaptation on single-page application

Herzmann priority asked 1 year ago

My Single-page app is based on the Admin-Dashboard template. I'm trying to implement the dynamic content adaptation capabilities on it that are available with the modes "push" and "side".

Expected behavior

When I open/close the Sidenav, regardless of the page that I'm on, have the contents dynamically resize appropriately (become larger/move to the center when closing the sidenav, vice versa when opening it).

Actual behavior

When I try to pass the main component as the reference <main ref={sidenavContent}>, I get a dispatcher is null error. The content on every page has an MDBContainer as parent component if that helps. How can I implement this without having to manually listen for opening/closure and manually changing the CSS of the margins/padding?

Grzegorz Bujański staff commented 1 year ago

Unfortunately, I am unable to reproduce this error. Can you provide the sample code you are using?

Herzmann priority commented 1 year ago

In Sidenav.js: * Everything is the same as you may find it in the Admin dashboard template. Other than the additions of: js const sidenavContent = useRef(null); const [contentContainer, setContent] = useState(null); ... useEffect( () => { setContent(contentContainer.current); }, []); ... <MDBSideNav contentRef={sidenavContent} ... > No matter which component I put the ref={sidenavContent} in, it doesn't work. Page just turns to white and doesn't load anything.

Grzegorz Bujański staff answered 1 year ago

It looks like you have a bug in your code. Change this: setContent(contentContainer.current) to this: setContent(sidenavContent.current).

Additionally, note that the element whose ref you are passing must exist in the component. If you haven't made any additional changes to the admin template, the ref element you're passing in doesn't exist.

Herzmann priority commented 1 year ago

I believe that the existence problem you mentioned here is the actual issue. I fixed the bug mentioned, and the problem persists. How could I do this with that in mind?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.1.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: Yes
  • Provided link: No