Render content outside SideNav (while open)

<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>