Без наложения
Этот навигационный ящик не будет перекрывать выходящий контент.
CSS ящика устанавливается в соответствии с состоянием ящика.
const [open, isOpen] = React.useState(false);
const drawerStyle = open ? `drawer open` : `drawer close`;
CSS ящика.
.drawer {
width: 0;
transition: width 0.5s ease-out;
}
.drawer.close {
width: 0;
}
.drawer.close * {
display: none;
}
.drawer.open {
width: 480px;
border-right: 1px solid rgb(238, 238, 238);
}
.drawer.open * {
display: initial;
}
С наложением
Этот навигационный ящик будет накладываться на выходящее содержимое.
CSS ящика устанавливается в соответствии с состоянием ящика.
const [open, isOpen] = React.useState(false);
const drawerStyle = open ? `drawer open` : `drawer close`;
CSS ящика.
.drawer {
position: absolute;
padding: 0;
width: 0;
height: 100vh;
background-color: #fff;
transition: width 0.5s ease-out;
}
.drawer > div {
padding: 10px;
}
.drawer.close {
width: 0%;
}
.drawer.close * {
visibility: hidden;
transition: visibility 0.3s;
}
.drawer.open {
box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
width: 280px;
border-right: 1px solid rgb(238, 238, 238);
}
.drawer.open * {
visibility: visible;
}