frontend-smartfarming/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html

<div class="d-flex flex-column container align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
    <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
        <span class="fs-5 d-none d-sm-inline space">Agrilink Vocpro</span>
    </a>
    <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
        <li>
            <a routerLink='/dashboard' data-bs-toggle="collapse" class="nav-link px-0 align-middle">
                <i class="bi bi-graph-up title"></i> <span class="ms-1 d-none d-sm-inline menu">Dashboard</span> </a>
        </li>
        <li>
            <a routerLink='/historygraph' data-bs-toggle="collapse" class="nav-link px-0 align-middle">
                <i class="bi bi-file-earmark-text title"></i> <span class="ms-1 d-none d-sm-inline menu">History Graph</span> </a>
        </li>
    </ul>
    <hr>

    <div class="dropdown pb-4">
    <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
        <img [src]="avatar || 'https://github.com/mdo.png'" alt="User Avatar" width="30" height="30" class="rounded-circle"> <!-- Use avatar or a default image -->
        <span class="d-none d-sm-inline mx-1">{{ fullName }}</span>
    </a>
    <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
        <li><a class="dropdown-item" (click)="onLogout()">Sign out</a></li>
    </ul>
    </div>
</div>