I would like to add a down arrow for each li `at the right.

Here is an idea of the menu.

menu

How to I create the arrow, please? I have to use an image?

I can you provide my code below:

admin.component.html

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links">
    <li [ngClass]="{ selected: selectedTab === 'market' }">
      <a
        routerLink="market"
        (click)="selectElementMenu(); selectedTab = 'market'"
      >
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">Market</span>
      </a>
    </li>
    <li [ngClass]="{ selected: selectedTab === 'currency' }">
      <a
        routerLink="currency"
        (click)="selectElementMenu(); selectedTab = 'currency'"
      >
        <i class="bx bx-box"></i>
        <span class="links_name">Currency</span>
      </a>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
  </nav>
  <router-outlet></router-outlet>
</section>

styles.css

.sidebar .nav-links {
  padding: 0;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
  height: 50px;
}

.sidebar .nav-links li a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
}

.sidebar .nav-links li a:hover {
  background: #081d45;
}

.sidebar .nav-links li i {
  min-width: 60px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.sidebar .nav-links li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  text-transform: uppercase;
}

.sidebar .nav-links li a:hover,
.selected {
  background: #081d45;
}

You can consult my project below -> https://stackblitz.com/edit/angular-ivy-1sawka?file=src/app/admin/admin.component.html

CodePudding user response：

You may use icons as font with adding to your project instead of using them separated images. I think best option for angular project is material icons.

angular material website

full icon list of material icons

You may also check for font awesome.