<ul>
  <li>
    <a href="#">
      <i class="ai-home"></i>
      <span>Dashboard</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="ai-image"></i>
      <span>Images</span>
    </a>
  </li> 
  <li>
    <a href="#">
      <i class="ai-file"></i>
      <span>Files</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="ai-game-controller"></i>
      <span>Games</span>
    </a>
  </li> 
  <li>
    <a href="#">
      <i class="ai-book-open"></i>
      <span>Books</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="ai-bell"></i>
      <span>Notifications</span>
    </a>
  </li>
  <li>  
    <a href="#">
      <i class="ai-gear"></i>
      <span>Settings</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="ai-person"></i>
      <span>Profile</span>
    </a>
  </li>
</ul>

<details>
  <summary>How it works<i class="ai-question-fill"></i></summary>
  <div>
      <p>Inside each <code>&lt;a&gt;</code> element there's a hidden (using transform and opacity) <code>&lt;span&gt;</code> containing the text. Like this: </p>
    <p><pre><code>a span { 
&nbsp;position: absolute;
&nbsp;left: calc(100% + 1.5rem); //Moves it all the way to the right
&nbsp;
&nbsp;opacity: 0;
&nbsp;transform: scale(0);
&nbsp;transform-origin: center left;
&nbsp;transition: .15s ease;
}</code></pre> </p>
<p>On hover or focus this span becomes visible through a transition of both transform and opacity. Like this:</p>
<p><pre><code>a:hover span, a:focus span { 
&nbsp;opacity: 1;
&nbsp;transform: scale(1);
}</code></pre> </p>
  <p>The <code>&lt;span&gt;</code> also has a psuedo-element in the shape of a rectangle, but rotated 45 degrees to make it look like a triangle. See the code for more details.</p>
  </div>
</details>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5vh;
  padding-bottom: 5vh;
  background-color: #f2f5f7;
}

 

ul { 
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto; 
  margin-right: auto;
  background-color: #05043e;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .75rem;
  border-radius: 10px;
  box-shadow: 0 10px 50px 0 rgba(#05043e, .25);
}

li:nth-child(6) {
  margin-top: 5rem; 
  padding-top: 1.25rem;
  border-top: 1px solid #363664;
}

li + li {
  margin-top: .75rem;
}

a {
  color: #FFF; 
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  position: relative;
  &:hover, &:focus, &.active {
    background-color: #30305a;
    outline: 0;
    
    span { 
      transform: scale(1);
      opacity: 1;
    }
  }
  
  i {
    font-size: 1.375rem;
  }
  
  span {
    position: absolute;
    background-color: #30305a;
    white-space: nowrap;
    padding: .5rem 1rem;
    border-radius: 6px;
    left: calc(100% + 1.5rem);
    transform-origin: center left;
    transform: scale(0);
    opacity: 0;
    transition: .15s ease;
    &:before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      position: absolute;
      background-color: #30305a;
      left: -5px;
      top: 50%;
      transform: translatey(-50%) rotate(45deg);
      border-radius: 3px;
    }
  }
  

}

details {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  margin-top: 2rem;
  color: #05043e; 
  display: flex;
  flex-direction: column;

  div {
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(#000, 0.15);
    padding: 1.25rem;
    border-radius: 8px;
    position: absolute;
    max-height: calc(100vh - 100px);
    width: 400px;
    max-width: calc(100vw - 2rem);
    bottom: calc(100% + 1rem);
    right: 0;
    overflow: auto;
    transform-origin: 100% 100%;
    &::-webkit-scrollbar {
      width: 15px;
      background-color:#fff;
    }

    &::-webkit-scrollbar-thumb {
      width: 5px;
      border-radius: 99em;
      background-color: #ccc;
      border: 5px solid #fff;
    }
    & > * + * {
      margin-top: 0.75em;
    }

    p > code {
      font-size: 1rem;
      font-family: monospace;
      color: #185adb;
      font-weight: 600;
    }

    pre {
      white-space: pre-line;
      background-color: #f9f9f9;
      border: 1px solid #95a3b9;
      border-radius: 6px;
      font-family: monospace;
      padding: 0.75em;
      font-size: 0.875rem;
      // color: #fff;
    }
  }

  &[open] div {
    animation: scale 0.25s ease;
  }
}

summary {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 0.625em 1.25em .625em 1.25em;
  border-radius: 99em;
  color: #fff;
  background-color: #185adb;
  box-shadow: 0 5px 15px rgba(#000, 0.1);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease;
  position: relative;
  &::-webkit-details-marker {
    display: none;
  }

  &:hover,
  &:focus {
    background-color: mix(#000, #185adb, 20%);
    // color: #6366f1;
  }

  i {
    font-size: 1.375em;
    margin-left: .25em;
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

// The script for the icon font from https://akaricons.com/ is in this pen's JS settings