How to implement angle left icon on top of a tab like a badge?

Question

I want to implement an angle left icon on top of a vertical column (as you see in the screenshot). This would be use to minimize the tab. Something similar to a badge but unlike a badge it should come over the tab.

The vertical column consists of:

<div class="minimized" fxLayout="column" (click)="maximizeClick()"> 
 <div class="title-wrapper" fxLayoutAlign="center end"  >
    <h2 class="title">
      {{ title }}
    </h2>
  </div>
</div>

Do you know how to implement that?

Answer 1

I don't know Angular but here is how we do with html/css/javascript. I hope you find a way to parse it to angular. =)

function toggleSidebar () {
  const sidebarElement = document.querySelector('.sidebar')
  
  if (sidebarElement.classList.contains('minimized')) {
    sidebarElement.classList.remove('minimized')
  } else {
    sidebarElement.classList.add('minimized')
  }
}

body {
  background-color: lightgray;
}

body, h1 {
  margin: 0;
}


.sidebar {
  position: relative;
  background-color: white;
  width: 250px;
  min-height: 100vh;
  transition: 300ms ease transform;
  transform: translateX(0);
}
.sidebar.minimized {
  transform: translateX(-100%);
}

.sidebar-content {
  padding: 0.5rem;
}

.sidebar-minize-button {
  position: absolute;
  background-color: gray;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  right: 0;
  transform: translateX(50%);
  cursor: pointer;
  top: 10%;
}

<div class="sidebar">
  <div class="sidebar-content">
    <h1>SIDEBAR</h1>
  </div>
  <div class="sidebar-minize-button" onclick="toggleSidebar()"></div>
</div>