侧边菜单栏变色块：渐进折叠菜单设计

在设计网站时，一个清晰的侧边菜单栏对于帮助用户浏览网站内容非常重要。但是，当侧边菜单栏有很多分级时，子菜单可能会被缩进，如果子菜单过长就会被挡住。

为了解决这个问题，我们可以使用三目判断来根据sidebarFold的tf值来修改style，保留折叠的效果。

<style>
  #sidebar {
    width: 200px;
    height: 100%;
    background-color: #f5f5f5;
    position: fixed;
    top: 0;
    left: 0;
  }

  #sidebar-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  #sidebar-menu li {
    display: block;
    padding: 10px 15px;
    cursor: pointer;
  }

  #sidebar-menu li:hover {
    background-color: #e5e5e5;
  }

  #sidebar-menu li.active {
    background-color: #d5d5d5;
  }

  #sidebar-menu li.submenu {
    position: relative;
  }

  #sidebar-menu li.submenu > ul {
    display: none;
    position: absolute;
    left: 200px;
    top: 0;
  }

  #sidebar-menu li.submenu > ul li {
    display: block;
    padding: 10px 15px;
    cursor: pointer;
  }

  #sidebar-menu li.submenu > ul li:hover {
    background-color: #e5e5e5;
  }

  #sidebar-menu li.submenu > ul li.active {
    background-color: #d5d5d5;
  }

  #sidebar-fold {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
  }

  #sidebar-fold:hover {
    background-color: #e5e5e5;
  }

  #sidebar-fold.active {
    background-color: #d5d5d5;
  }
</style>

<div id="sidebar">
  <div id="sidebar-fold" @click="sidebarFold = !sidebarFold">
    <i class="fas fa-angle-left"></i>
  </div>
  <ul id="sidebar-menu">
    <li class="active">
      <a href="#">Dashboard</a>
    </li>
    <li>
      <a href="#">Users</a>
    </li>
    <li class="submenu">
      <a href="#">Orders</a>
      <ul>
        <li><a href="#">All Orders</a></li>
        <li><a href="#">Pending Orders</a></li>
        <li><a href="#">Shipped Orders</a></li>
        <li><a href="#">Delivered Orders</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Products</a>
    </li>
    <li>
      <a href="#">Categories</a>
    </li>
    <li>
      <a href="#">Reports</a>
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
  </ul>
</div>

<script>
  var sidebarFold = false;
</script>

当sidebarFold为true时，菜单栏的样式将被修改，子菜单将被隐藏。否则，菜单栏将保持不变。

这种方法可以很容易地实现侧边菜单栏的折叠效果，并且不会影响子菜单的显示。