Закрытие меню перехода с помощью CSS или JS

Question

У меня есть боковая панель div и содержимое div, которые действуют как два столбца CSS grid. Сама боковая панель состоит из еще двух столбцов, но вот суть настройки:

<div class='site-wrap'>
    <div class='sidebar'>
        <div class='navbar'></div>
        <div class='menu'>
            <ul>
                <li>menu item</li>
            </ul>
        </div>
    </div>
    <div class='content>
        <h1>Hello world</h1></div>
    </div>
</div>

Большая часть CSS не важна, но вот как работает боковая панель:

.site-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
}

.sidebar {
    display: grid;
    grid-template-columns: 64px 1fr;
    height: 100vh
}

Вот JS Fiddle с работающей реализацией: https://jsfiddle.net/z4mLtwoy/

В настоящее время мое решение для закрытия меню заключается в добавлении grid-template-columns: 72px 1fr к site-wrap. Это работает, но я хочу добавить переход. Поскольку у сетки CSS еще нет переходов, есть ли реализация CSS (может быть, flexbox) или JS, которая может предложить переход?

Answer 1

Если вы установите свойство width или max-width для элемента menu, его можно анимировать с помощью CSS-переходов . Нет необходимости использовать сетки, вы можете использовать макет flexbox для отображения их в виде столбцов.

body {
  margin: 0;
  padding: 0;
}

.site-wrap {
  display: flex;
  height: 100vh;
}

.sidebar {
  display: flex;
}

.site-wrap .menu {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-sizing: border-box;
  height: 100vh; 
  margin: 0;
  overflow: hidden;
  padding: 0;
  transition: max-width 0.5s ease;
  max-width: 100px;
}

.site-wrap .navbar {
  background: green;
  height: 100vh;
  width: 64px;
}

.menu li {
  padding: 16px;
  white-space: nowrap;
}

.content {
  background: #EFEFEF;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  flex-grow: 1;
  padding: 16px;
}

.banner {
  background: lightblue;
  box-sizing: border-box;
  padding: 16px;
  height: 64px;
  width: 100%;
}

#trigger {
  display: none;
  position: fixed;  
}

.button {
  background: blue;
  color: white;
  cursor: pointer;
  margin: 8px;
  padding: 8px 16px;  
}

#trigger:checked ~ .site-wrap .menu {
  max-width: 0px;
}

<input id='trigger' type='checkbox'>
<div class='banner'>
  <label for='trigger' class='button'>Click me</label>
</div>
<div class='site-wrap'>
  <div class='sidebar'>
    <div class='navbar'></div>
    <ul class='menu'>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
  <div class='content'>
    <h2>Hello world</h2>
  </div>
</div>