matsen-tool-fe/matsen-tool/src/app/_components/layout/two-column/two-column.component.html

<div class="row ps-2 position-relative">
    <div id="btn-sidebar" (click)="toggleSidebar()" [class.nav-open]="navOpen"></div>
    <div class="col-2 spt-sidebar" [class.nav-open]="navOpen">
        <ul class="nav flex-column">
            <li class="nav-item mb-3">
                <a class="card" routerLink="/customer" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="customer">
                        <h3 class="position-absolute m-0">{{'basic.customer' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/supplier" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="supplier">
                        <h3 class="position-absolute m-0">{{'basic.supplier' | translate}}</h3>
                    </div>
                </a>
            </li>
<!--            <li class="nav-item mb-3">-->
<!--                <a class="card" routerLink="/service" routerLinkActive="active">-->
<!--                    <div class="card-body position-relative" data-cat="service">-->
<!--                        <h3 class="position-absolute m-0">{{'basic.service' | translate}}</h3>-->
<!--                    </div>-->
<!--                </a>-->
<!--            </li>-->
            <li class="nav-item mb-3">
                <a class="card" routerLink="/product" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="product">
                        <h3 class="position-absolute m-0">{{'basic.products' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/task" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="task">
                        <h3 class="position-absolute m-0">{{'basic.tasks' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/document" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="document">
                        <h3 class="position-absolute m-0">{{'basic.documents' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/sale" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="sale">
                        <h3 class="position-absolute m-0">{{'basic.sales' | 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">{{'basic.profile' | translate}}</h3>
                    </div>
                </a>
            </li>
            <li class="nav-item mb-3">
                <a class="card" routerLink="/user" routerLinkActive="active">
                    <div class="card-body position-relative" data-cat="user">
                        <h3 class="position-absolute m-0">{{'basic.users' | translate}}</h3>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="col-12 col-xl-10 pb-5 spt-main">
        <div class="pe-3 pt-3">
            <div class="spt-back-btn mb-4" (click)="goBack()">{{'basic.back' | translate}}</div>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>