Простой навигационный ящик с помощью React и CSS

Без наложения

Этот навигационный ящик не будет перекрывать выходящий контент.

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

Войти в полноэкранный режим Выход из полноэкранного режима