implement a sidebar-menu-item component

[enriquezrene]

The current sidebar structure looks like:

<div class="bg-light border-right" id="sidebar-wrapper">
        <div class="list-group list-group-flush">
          <a [routerLink]="['/time-clock']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
          <a [routerLink]="['/time-entries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
          <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
          <a [routerLink]="['/project-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i>   Projects</a>
          <a [routerLink]="['/activities-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-file-alt"></i>   Activities</a>
        </div>
    </div>

As you can see, each menu option has the same pattern so we can create a sidebar-menu-item component having all the common code in there and just pass the parameter that needs to be configurable such as:

• routerLink
• <i> icon
• Text that appears in the menu

Acceptance Criteria

• A new menu item component is created following the above-described instructions
• The sidebar.component.html file should be updated to use the component created as part of this ticket
• The menu should look exactly the same as it looks right now
• All the implemented code should have at least 80% code coverage