left-menu.component.html

<div class="flex flex-column justify-content-between menu-tr" [ngStyle]="{'width': isCollapsed ? '100px' : '300px'}" style="background: var(--menu-color); height: 100%; position: fixed;">
    <div class="menu flex">
        <div style="display: flex; align-items: center">
            <div class="logo-container">
                <img *ngIf="!isCollapsed" class="logo" src="../../../assets/images/logo-small.png" width="250px">
                <img *ngIf="isCollapsed"  class="logo" src="../../../assets/images/nmaas-cloud.png" width="50px">
            </div>
            <div class="toggle-button" (click)="toggleMenu()" [ngStyle]="{'left': isCollapsed ? '85px' : '284px'}">
                <i *ngIf="!isCollapsed" style="font-size: 1.8rem" class="pi pi-angle-left"></i>
                <i *ngIf="isCollapsed" style="font-size: 1.8rem" class="pi pi-angle-right"></i>
            </div>
        </div>
        <div style="margin-top: 30px">
            <nmaas-domain-filter class="drop-domain"></nmaas-domain-filter>
        </div>
        <ul *ngIf="!toggleAdmin" style="margin-top: 30px" >
            <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/']">
                    <i class="pi pi-th-large" style="margin-right:10px; font-size: 18px" title="Application"></i>
                    <span *ngIf="!isCollapsed">
                      Applications
                  </span>
                </a>
            </li>
            <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a href="#" style="display: flex; align-items: center;" [routerLink]="['/instances']">
                    <i class="pi pi-server" style="margin-right:10px; font-size: 18px" title=" Instances"></i>
                    <span *ngIf="!isCollapsed">
                      Instances
                  </span>
                </a>
            </li>
        </ul>
        <ul *ngIf="toggleAdmin" style="margin-top: 30px">
            <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['admin/dashboard']">
                    <i class="pi pi-chart-bar" style="margin-right:10px; font-size: 18px" title="Dashboard"></i>
                    <span *ngIf="!isCollapsed">
                        Dashboard
                    </span>
                </a>
            </li>
            <p-accordion>
                <p-accordionTab *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']">
                    <ng-template pTemplate="header">
                        <div>
                            <i class="pi pi-server" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.DOMAINS' | translate }}"></i>
                            <span *ngIf="!isCollapsed">
                                 {{ 'NAVBAR.DOMAINS' | translate }}
                            </span>
                        </div>
                    </ng-template>
                    <li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']"
                        [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}" >
                        <a  style="display: flex; align-items: center;" [routerLink]="['/admin/domains']">
                            <i class="pi pi-list" style="margin-right:10px; font-size: 18px" title="List"></i>
                            <span *ngIf="!isCollapsed">
                                List
                            </span>
                        </a>
                    </li>
                    <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']"
                        [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                        <a  style="display: flex; align-items: center;" [routerLink]="['/admin/domains/groups']">
                            <i class="pi pi-table" style="margin-right:10px; font-size: 18px" title="Group"></i>
                            <span *ngIf="!isCollapsed">
                                Group
                            </span>
                        </a>
                    </li>
                    <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']"
                        [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                        <a  style="display: flex; align-items: center;" [routerLink]="['/admin/domains/bulks']">
                            <i class="pi pi-sitemap" style="margin-right:10px; font-size: 18px" title="Bulk deployments"></i>
                            <span *ngIf="!isCollapsed">
                                 Bulk deployments
                            </span>
                        </a>
                    </li>
                </p-accordionTab>
            </p-accordion>
            <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/apps/bulks']">
                    <i class="pi pi-box" style="margin-right:10px; font-size: 18px" title="{{ 'BULK.APP.HEADER' | translate }}"></i>
                    <span *ngIf="!isCollapsed">
                       {{ 'BULK.APP.HEADER' | translate }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/users']">
                    <i class="pi pi-users" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.USERS' | translate }}"></i>
                    <span *ngIf="!isCollapsed">
                        {{ 'NAVBAR.USERS' | translate }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_GROUP_DOMAIN_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/domain/users']">
                    <i class="pi pi-users" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.DOMAIN_USERS' | translate }}"></i>
                    <span *ngIf="!isCollapsed">
                        {{ 'NAVBAR.DOMAIN_USERS' | translate  }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_TOOL_MANAGER']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/apps']">
                    <i class="pi pi-th-large" style="margin-right:10px; font-size: 18px" title="Catalog"></i>
                    <span *ngIf="!isCollapsed">
                        Catalog
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/configuration']">
                    <i class="pi pi-cog" style="margin-right:10px; font-size: 18px" title="Settings"></i>
                    <span *ngIf="!isCollapsed">
                       Settings
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/webhooks']">
                    <i class="pi pi-share-alt" style="margin-right:10px; font-size: 18px" title="Settings"></i>
                    <span *ngIf="!isCollapsed">
                        {{ 'WEBHOOKS.TITLE_SHORT' | translate }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/manage/clusters']">
                    <i class="pi pi-cloud" style="margin-right:10px; font-size: 18px"></i>
                    <span *ngIf="!isCollapsed">
                        {{ 'CLUSTERS.CONFIGURATION' | translate }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/languages']">
                    <i class="pi pi-language" style="margin-right:10px; font-size: 18px" title=" {{'NAVBAR.LANGUAGES' | translate }}"></i>
                    <span *ngIf="!isCollapsed">
                        {{'NAVBAR.LANGUAGES' | translate }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                <a  style="display: flex; align-items: center;" [routerLink]="['/admin/monitor']">
                    <i class="pi pi-chart-line" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.MONITOR' | translate }}"></i>
                    <span *ngIf="!isCollapsed">
                        {{ 'NAVBAR.MONITOR' | translate }}
                    </span>
                </a>
            </li>
            <li *roles="['ROLE_SYSTEM_ADMIN']" (click)="showNotificationModal()" [ngClass]="{'collapsed': isCollapsed}" style="cursor:pointer">
                <i class="pi pi-send" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.ALL_USERS' | translate }}"></i>
                <span *ngIf="!isCollapsed">{{ 'NAVBAR.ALL_USERS' | translate }}</span>
            </li>

        </ul>
    </div>
    <div class="menu flex">
        <p-menu  #menu [model]="items" [popup]="true" class="test" [ngClass]="{'collapsed-user': isCollapsed}"/>
        <p-button  (onClick)="menu.toggle($event)" class="user-button"><i class="pi pi-user" style="font-size: 18px; margin-right:10px"[ngClass]="{'collapsed': isCollapsed}" title="User"></i>
            <span *ngIf="!isCollapsed">
                User
            </span>
        </p-button>
        <div *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']" style="margin-top:10px" [routerLink]="['admin/dashboard']">
            <p-button *ngIf="!toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 18px"[ngClass]="{'collapsed': isCollapsed}" title=" Go to admin panel"></i>
                <span *ngIf="!isCollapsed">
                      Admin panel
                </span>
            </p-button>
        </div>
        <div [routerLink]="['/']"  >
            <p-button *ngIf="toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 18px"[ngClass]="{'collapsed': isCollapsed}" title="Go to user panel"></i>
                <span *ngIf="!isCollapsed">
                        User panel
                </span>
            </p-button>
        </div>
    </div>
</div>
<app-modal-notification-send></app-modal-notification-send>