CSS-код для цього прикладу:

:root {
  --sidebar-width: 3.5em;
}

* {
  outline: none;
  box-sizing: border-box;
}

.sidebar {
  background-color: #090116;
  position: fixed;
  transition: width 0.1s ease;
  z-index: 100;
  left: 0;
  padding: 35px 0 35px 0;
}

.sidebar nav {
  height: 100%;
}

.sidebar__nav {
  display: flex;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__nav__link {
  display: flex;
  align-items: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sidebar__nav__link:hover {
  background-color: #13052A;
  text-decoration: none;
}

.sidebar__nav__text {
  display: none;
  margin-left: 1.5rem;
  margin-right: auto;
  white-space: nowrap;
  font-size: 1rem;
}

.sidebar__nav i {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Медіа-запити */
@media (max-width: 572px) {
  .sidebar {
    bottom: 0;
    width: 100%;
  }

  .sidebar__nav {
    justify-content: center;
  }

  .sidebar__nav__link {
    height: 100%;
    padding: 1.5em;
  }

  .sidebar__nav i {
    width: 5px;
    height: 5px;
	font-size: 1.5rem;
  }
}

@media (min-width: 572px) {
  .sidebar {
    height: 100vh;
    width: var(--sidebar-width);
  }

  .sidebar:hover {
    width: 9rem;
  }

  .sidebar__nav {
    flex-direction: column;
  }

  .sidebar__nav li:last-child {
    margin-top: auto;
  }

  .sidebar__nav__link {
    padding-left: 1em;
  }

  .sidebar:hover .sidebar__nav__text {
    display: inline;
  }

  .sidebar__nav i {
    font-size: 1.5rem;
  }
}

@media (max-height: 434px) {
  .sidebar {
    overflow-y: scroll;
  }
}

HTML-код для цього прикладу:

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">

<aside class="sidebar">
  <nav>
    <ul class="sidebar__nav">
      <li>
        <a href="#" class="sidebar__nav__link">
          <i class="mdi mdi-home"></i>
          <span class="sidebar__nav__text">Головна</span>
        </a>
      </li>
      <li>
        <a href="#" class="sidebar__nav__link">
          <i class="mdi mdi-briefcase-account"></i>
          <span class="sidebar__nav__text">Новини</span>
        </a>
      </li>
      <li>
        <a href="#" class="sidebar__nav__link">
          <i class="mdi mdi-lead-pencil"></i>
          <span class="sidebar__nav__text">Нотатки</span>
        </a>
      </li>
      <li>
        <a href="#" class="sidebar__nav__link">
          <i class="mdi mdi-information"></i>
          <span class="sidebar__nav__text">Інфо</span>
        </a>
      </li>
      <li>
        <a href="#" class="sidebar__nav__link">
          <i class="mdi mdi-settings"></i>
          <span class="sidebar__nav__text">Опції</span>
        </a>
      </li>
    </ul>
  </nav>
</aside>