Topic: Render content outside SideNav (while open)
Hi, how can I render some content outside the SideNav when it is open?
Essentially I want to achieve something like this:
https://drive.google.com/file/d/17HKpLa2DzLMTwbSUJuRJUXNyggSrfS6R/view?usp=sharing
I achieved that with a left aligned fluid modal, but that's not ideal. The SideNav is better suited, but when I render absolute-positioned content outside of the SideNav it does not show. Here's a code sample:
<MSBSideNav isOpenWithButton={isOpen} className="white side-nav-light">
<ModalHeader toggle={() => this.closeModal()}>
<div className="text-center" style={{ color: "black", marginBottom: "-5px" }}>
{data.logoTop &&
<img src={data.logoTop.src} style={{ width: data.logoTop.width }} />
}
<hr />
<h4>{data.title}</h4>
</div>
</ModalHeader>
<ModalBody>
<SideNavNav style={{ marginLeft: "-25px", marginTop: "-24px" }}>
{this.renderLinks(data.nav)}
</SideNavNav>
<ModalFooter>
<div className="text-center">
{data.logoBottom &&
<img src={data.logoBottom.src} style={{ width: data.logoBottom.width }} />
}
</div>
</ModalFooter>
</ModalBody>
{showContent &&
<Container style={{
backgroundColor: "white",
width: (width - sideNavWidth - 45) + "px",
height: (height - 30) + "px",
top: "15px",
left: (sideNavWidth - 40) + "px",
position: "fixed",
border: "1px solid grey"
}}>
<h4 style={{ margin: "0px -15px 0px -15px", padding: "5px 10px 5px 10px", backgroundColor: "gainsboro", borderBottom: "1px solid grey" }}>
{contentTitle}
</h4>
<Button
color="grey"
size="sm"
style={{ padding: "3px 6px 3px 6px", position: "absolute", top: "2px", right: "5px" }}
onClick={() => { this.setState({ showContent: false, contentLink: "", contentTitle: "" }) }}>
<Fa icon="close" />
</Button>
<iframe
style={{
marginLeft: "-15px",
marginRight: "0px",
marginTop: "0px",
marginBottom: "0px",
width: (width - sideNavWidth - 45) + "px",
height: (height - 70) + "px",
border: "0px solid black"
}}
src={contentLink}
/>
</Container>
}
</MSBSideNav>
And here's a sample screenshot of the result. As you can see the Container is "chopped off".
https://drive.google.com/open?id=1m6OgpTJgrJPqi50CmqJNUdASpVS9o2ih
Is there a way to use the SideNav and render content outside the SideNav like how I want it?
Regards,
André
Got it working, with a fluid, right modal that opens next to the SideNav.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.1
- Device: Laptop
- Browser: Chrome, Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Tags
Related topics
Anna Morawska staff commented 6 years ago
Hi there, actually, our component was not designed to work this way, but I'm pretty sure it is possible, but you definitely have to add some custom css rules. Please, check out using developer tools in your browser how sidenav works ( it uses position: fixed; rule the same as a modal component ). Maybe try to use them as siblings components. Best, Ania