Sidebar Transition

by sungsoonz

HTML

<div id="app">
  <nav>
    <div class="branding">
      <svg class="logomark" width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6651 14.0911V0H13.1023L3.4319 14.0911V0H0V19.9806H3.56277L13.2477 5.88948V19.9806H16.7959L26.5681 5.7586V19.9806H30V0H26.35L16.6651 14.0911Z" fill="white" />
      </svg>
      <svg class="wordmark" width="100" height="19" viewBox="0 0 100 19" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0)">
          <path d="M93.8455 12.3322V13.4196H96.0899V3.07721H93.7761V8.63019C93.7761 9.48628 93.5679 10.1341 93.1283 10.5737C92.6887 11.0134 92.1102 11.291 91.393 11.291C90.7451 11.291 90.2361 11.0828 89.7965 10.6432C89.3569 10.2035 89.1486 9.6251 89.1486 8.97726V3.10035H86.9043V9.02353C86.9043 10.3192 87.2745 11.5455 88.0612 12.3322C88.7784 13.1189 89.7965 13.4891 91.0228 13.4891H91.0459C92.1796 13.4659 93.1977 13.0263 93.8455 12.3322Z" fill="white" />
          <path d="M7.10317 11.3141C4.6506 11.3141 2.70705 9.3706 2.70705 6.91803C2.70705 4.46546 4.6506 2.52192 7.10317 2.52192C8.53769 2.52192 9.92593 3.23918 10.7126 4.39605L12.6562 3.23918C11.4993 1.43446 9.41691 0.277588 7.10317 0.277588C3.42431 0.277588 0.393311 3.30859 0.393311 6.98744C0.393311 10.6663 3.42431 13.6973 7.10317 13.6973C9.41691 13.6973 11.4299 12.5404 12.6562 10.7357L10.7126 9.57884C9.83339 10.5969 8.53769 11.3141 7.10317 11.3141Z" fill="white" />
          <path d="M99.8381 0.277588H97.5938V13.3965H99.8381V0.277588Z" fill="white" />
          <path d="M59.9259 0.347046L56.2471 6.61729L52.5682 0.347046H49.676V13.4197H51.9204V3.6557L55.4604 9.6483H57.0337L60.6432 3.6557V13.4197H62.8875V0.347046H59.9259Z" fill="white" />
          <path d="M45.1411 5.39101H48.1721V3.14668H45.1411V0.347046H42.8967V9.16241V9.60202C42.8967 11.8464 43.9148 13.4891 46.7144 13.4891H48.1489V11.1754H46.8532C45.2567 11.1754 45.0485 10.3887 45.0485 9.57888V9.20868L45.1411...

SCSS

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.33333;
  color: #13324b;
  margin: 0;
}

ol,
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#app {
  display: grid;
  transition: all .2s ease-out;
  grid-template-areas: "vertical-navbar app-toolbar app-toolbar""vertical-navbar sidebar main";
  grid-template-columns: auto auto 1fr;
  grid-template-rows: 1fr;
/*   @media screen and (min-width: 1200px) {
    grid-template-columns: 266px auto 1fr;
  } */
  nav {
    width: 66px;
    transition: all .2s ease-out;
    @media screen and (min-width: 1200px) {
      width: 266px;
    }
  }
}

nav {
  grid-area: vertical-navbar;
  z-index: 2;
  background: #13324b;
  text-align: center;

  .branding {
    text-align: left;
    padding-left: 1.1rem;
    position: relative;
    height: 80px;
    transition: all .2s ease-out;
    @media screen and (min-width: 1200px) {
      padding-left: 1.4rem;
    }
  }

  .logomark,
  .wordmark {
    position: absolute;
    height: 80px;
    transition: all .2s ease-out;
  }

  .logomark {
    @media screen and (min-width: 1200px) {
      opacity: 0;
    }
  }

  .wordmark {
    opacity: 0;

    @media screen and (min-width: 1200px) {
      opacity: 1;
    }
  }

  li {
    margin: 0.9rem 0;
    display: block;
    transition: all .2s ease-out;
    &.active {
      a {
        background: #3C688A;
        &:hover {
          background: #3C688A;
        }
      }
    }
    &:first-child {
      .icon-sidebar {
        @media screen and (min-width: 1200px) {
          margin-left: 1.6rem;
        }
      }
    }
    &:last-child {
      .icon-sidebar {
        @media screen and (min-width: 1200px) {
          margin-left: 1.25rem;
        }
      }
    }
    a {
      display: block;
      transition: all .2s ease-in;
      cursor: pointer;
      border-radius:...