<div class="row ps-2 position-relative">
    <div id="btn-sidebar" (click)="toggleSidebar()" [class.nav-open]="navOpen"></div>
    <div class="spt-sidebar" [class.nav-open]="navOpen">
        <ul class="nav flex-column">
            <li class="nav-item mb-3">
                <a class="card" routerLink="/dashboard" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="dashboard">
                        <h3 class="position-absolute m-0">{{'dashboard.view' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/base-data" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="dashboard">
                        <h3 class="position-absolute m-0">{{'base_data.view' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/trips" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="dashboard">
                        <h3 class="position-absolute m-0">{{'trip.view' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/user-trips" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="dashboard">
                        <h3 class="position-absolute m-0">{{'user_trip.view' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/users" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="user">
                        <h3 class="position-absolute m-0">{{'basic.users' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/profile" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="profile">
                        <h3 class="position-absolute m-0">{{'profile.view' | translate}}</h3>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="pb-5 spt-main">
        <div class="pe-3 pt-3">
            <div class="btn-back mb-1" (click)="goBack()" id="go-back"></div>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>