I am currently developing a web application and I want to implement a feature where pressing the hamburger button will cause the side drawer to slide the entire content to the right.
In the following link, you can see a dummy component called "Main" that represents any content placed between the header and footer.
At the Layout Component's grid, the main section should have an auto row height to make use of the available space after setting the header and footer. To ensure this functionality, I have set the height to 100% for all parent tags up to the root html.
If the height of any element inside Main exceeds the remaining viewport height (you can check on mobile view using your browser dev tools), the page breaks with content overflowing beyond the total height. The Backdrop and SideDrawer will not cover the entire page as before, leaving some parts uncovered.
I want the behavior such that when the main content extends beyond the 100% height limit, everything gets pushed down and the browser recognizes the content within the 100% height calculation.
Why is this happening? What mistake am I making?
I will include my sidedrawer and Layout components here so you can test this small demo here
import React, { useState } from "react";
import "./Layout.scss";
import Toolbar from "../../Components/Toolbar/Toolbar";
import Footer from "../../Components/Footer/Footer";
import SideDrawer from "../../Components/Sidebar/SideDrawer";
const Layout = props => {
const [toggler, setToggler] = useState(false);
const buttonTogglerHandler = () => {
setToggler(!toggler);
};
const cssClasses = [
"Layout",
toggler ? "Layout__slideOn" : "Layout__slideOff"
];
return (
<div className={cssClasses.join(" ")}>
<Toolbar toggler={toggler} onToggled={buttonTogglerHandler} />
<SideDrawer show={toggler} close={buttonTogglerHandler} />
<main>{props.children}</main>
<Footer />
</div>
);
};
export default Layout;
.Layout {
height: 100%;
width: 100%;
display: grid;
grid: {
template-rows: 3rem auto 5rem;
template-areas: "header"
"main"
"footer"
}
&__slideOn {
animation: slideLayout 300ms forwards ease-in;
@keyframes slideLayout {
0% {
transform: translateX(0);
}
100% {
transform: translateX(80%);
}
}
}
&__slideOff {
animation: unslideLayout 300ms forwards ease-out;
@keyframes unslideLayout {
0% {
transform: translateX(80%);
}
100% {
transform: translateX(0)
}
}
}
& main {
grid-area: main;
}
& footer {
grid-area: footer;
}
}
import React, { Fragment } from "react";
import "./Sidebar.scss";
import Backdrop from "../../UI/Backdrop/Backdrop";
import CSSTransition from 'react-transition-group/CSSTransition';
const SideDrawer = props => {
return (
<CSSTransition
in={props.show}
mountOnEnter
unmountOnExit
timeout={300}
classNames={{
enterActive: "Sidebar__open",
exitActive: "Sidebar__close"
}}
>
<Fragment>
<div className="Sidebar">sidebar</div>
<Backdrop show={props.show} closeBackdrop={props.close} />
</Fragment>
</CSSTransition>
);
};
export default SideDrawer;
.Sidebar {
position: fixed;
top: 0;
left: -80vw;
bottom: 0;
width: 80vw;
background-color: blue;
opacity: .5;
&__open {
animation: openSidebar 300ms forwards ease-in;
@keyframes openSidebar {
0% {
transform: translateX(0)
}
100% {
transform: translateX(80%)
}
}
}
&__close {
animation: closeSidebar 300ms forwards ease-out;
@keyframes closeSidebar {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-100%)
}
}
}
}