Topic: Implement MDBSidenav contentRef (mode: side) - dynamic adaptation on single-page application
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?
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 pro premium priority commented 2 years 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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 5.1.0
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 2 years ago
Unfortunately, I am unable to reproduce this error. Can you provide the sample code you are using?
Herzmann pro premium priority commented 2 years 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 theref={sidenavContent}in, it doesn't work. Page just turns to white and doesn't load anything.