This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
navbar.component.html 22.4 KiB
Newer Older
<!-- Navigation -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
Daniel Rainer's avatar
Daniel Rainer committed
    <div class="container-fluid">
Daniel Rainer's avatar
Daniel Rainer committed
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <div class="navbar-nav" [ngSwitch]="isAuthenticated()">
Daniel Rainer's avatar
Daniel Rainer committed
                <!-- Menu Home -->
Daniel Rainer's avatar
Daniel Rainer committed
                <div class="nav-item">
                    <span class="nav-link">
Daniel Rainer's avatar
Daniel Rainer committed
                        <a routerLink="/">
                            <!-- Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-house-fill" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                      d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                                <path fill-rule="evenodd"
                                      d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
                            </svg>
                            <!-- Icon End -->
                            <span jhiTranslate="global.menu.home">Home</span>
                        </a>
                    </span>
                </div>
                <div class="nav-item dropdown" *ngIf="languages && languages.length > 1">
Daniel Rainer's avatar
Daniel Rainer committed
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                        <span>
                            <fa-icon icon="flag"></fa-icon>
                            <span jhiTranslate="global.menu.language">Language</span>
                        </span>
Daniel Rainer's avatar
Daniel Rainer committed
                    </a>
                    <ul class="dropdown-menu">
                        <li *ngFor="let language of languages">
                            <a class="dropdown-item" [jhiActiveMenu]="language" href="javascript:void(0);"
                               (click)="changeLanguage(language);collapseNavbar();">{{ language | findLanguageFromKey }}</a>
                        </li>
                    </ul>
Daniel Rainer's avatar
Daniel Rainer committed
                </div>
                <!-- Menu Programs -->
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                        <!-X- Icon -X->
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
                            <path
                                d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
                        </svg>
                        <! -X- Icon End -X- >
                        Programs
                    </a> (Vorlage)
                    <div class="dropdown-menu dropdown-large">
                        <div class="row flex-container">
                            <div class="col-md-6 flex-item-left">
                                <h6 class="headline">Category 1</h6>
                                <ul class="list-unstyled">
                                    <li class="nav-item">
                                        <a class="dropdown-item" href="#">Menu Item 1</a>
                                        <span class="spawn-submenu">This is a short description of the link 1</span>
                                    </li>
                                    <li class="nav-item">
                                        <a class="dropdown-item" href="#">Menu Item 2</a>
                                        <span class="spawn-submenu">This is a short description of the link 1</span>
                                    </li>
                                    <li class="nav-item">
                                        <a class="dropdown-item" href="#">Menu Item 3</a>
                                        <span class="spawn-submenu">This is a short description of the link 1</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6 flex-item-left">
                                <h6 class="headline">Category 2</h6>
                                <ul class="list-unstyled">
                                    <li class="nav-item">
                                        <a class="dropdown-item" href="#">Menu Item 1</a>
                                        <span class="spawn-submenu">This is a short description of the link 1</span>
                                    </li>
                                    <li class="nav-item">
                                        <a class="dropdown-item" href="#">Menu Item 2</a>
                                        <span class="spawn-submenu">This is a short description of the link 1</span>
                                    </li>
                                    <li class="nav-item">
                                        <a class="dropdown-item" href="#">Menu Item 3</a>
                                        <span class="spawn-submenu">This is a short description of the link 1</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
Daniel Rainer's avatar
Daniel Rainer committed
                    </div>
                <!-- Search -->
                <div class="nav-item" >
                    <span class="nav-link">
                        <a routerLink="/search">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-search"
                                 viewBox="0 0 16 16">
                                <path
                                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                            </svg>
                            <span jhiTranslate="global.menu.search"></span>
                        </a>
                    </span>
                </div>
                <!-- End search -->
                <!-- Bookmarks -->
                <div class="nav-item" >
                    <span class="nav-link">
                        <a routerLink="/bookmarks">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmarks" viewBox="0 0 16 16">
							  <path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4zm2-1a1 1 0 0 0-1 1v10.566l3.723-2.482a.5.5 0 0 1 .554 0L11 14.566V4a1 1 0 0 0-1-1H4z"/>
							  <path d="M4.268 1H12a1 1 0 0 1 1 1v11.768l.223.148A.5.5 0 0 0 14 13.5V2a2 2 0 0 0-2-2H6a2 2 0 0 0-1.732 1z"/>
							</svg>
                            <span jhiTranslate="global.menu.bookmarks"></span>
                        </a>
                    </span>
                </div>
                <!-- End Bookmarks -->
                <!-- Menu Entities -->
                <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
                <div  *jhiHasAnyAuthority="'ROLE_ADMIN'" class="nav-item dropdown" ngbDropdown  routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" ngbDropdownToggle href="#"  id="entity-menu">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-collection-fill" viewBox="0 0 16 16">
                            <path
                                d="M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z"/>
                        </svg>
                        Entities
                    </a>
                <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
                    <li>
                        <a class="dropdown-item" routerLink="saved-searches" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
                            <span jhiTranslate="global.menu.entities.savedSearches">Saved Searches</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="user-watch-list" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
                            <span jhiTranslate="global.menu.entities.userWatchList">user watch list</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="watch-list-entry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
                            <span jhiTranslate="global.menu.entities.watchListEntry">watch list entry</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="statistics" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
                            <span jhiTranslate="global.menu.entities.statistics">statistics</span>
                        </a>
                    </li>
                    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here --> 
                </ul>
                </div>

                <div *jhiHasAnyAuthority="'ROLE_ADMIN'" ngbDropdown class="nav-item dropdown pointer" display="dynamic"
                    routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" ngbDropdownToggle
                       href="javascript:void(0);"
                       id="admin-menu">
                        <span>
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                   class="bi bi-globe" viewBox="0 0 16 16">
                                  <path
                                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
                              </svg>
                            <span jhiTranslate="global.menu.admin.main">Administration</span>
                        </span>
Daniel Rainer's avatar
Daniel Rainer committed
                    </a>
                    <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="admin-menu">
                        <li>
                            <a class="dropdown-item" routerLink="admin/user-management" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="user" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.userManagement">User management</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" routerLink="admin/metrics" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="tachometer-alt" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.metrics">Metrics</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" routerLink="admin/health" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="heart" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.health">Health</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" routerLink="admin/configuration" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="list" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.configuration">Configuration</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" routerLink="admin/audits" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="bell" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.audits">Audits</span>
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" routerLink="admin/logs" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="tasks" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.logs">Logs</span>
                            </a>
                        </li>
                        <li *ngIf="swaggerEnabled">
                            <a class="dropdown-item" routerLink="admin/docs" routerLinkActive="active"
                               (click)="collapseNavbar()">
                                <fa-icon icon="book" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.apidocs">API</span>
                            </a>
                        </li>
                        <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
                        <li *ngIf="!inProduction">
                            <a class="dropdown-item" href='./h2-console' target="_tab" (click)="collapseNavbar()">
                                <fa-icon icon="hdd" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.admin.database">Database</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- Login -->
                <div class="nav-item dropdown pointer" ngbDropdown>
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                        <!-- Icon -->
                        <span *ngIf="!getImageUrl()">
                            <fa-icon icon="user"></fa-icon>
                            <span jhiTranslate="global.menu.account.main">Account</span>
                        </span>
                        <span *ngIf="getImageUrl()">
                            <img [src]="getImageUrl()" class="profile-image rounded-circle" alt="Avatar"/>
                        </span>
                        <!-- Icon End -->
Daniel Rainer's avatar
Daniel Rainer committed
                    </a>
                    <div class="dropdown-menu">
                        <div class="search-container" *ngSwitchCase="false">
                            <div *ngSwitchCase="false" >
                                <!-- Quick Search -->
                                <div class="dropdown-item" *ngFor="let config of configs">
Michael Breu's avatar
Michael Breu committed
                                    <img src="{{'oauth2.'+config.registrationId + '.icon'| translate}}" alt="oAuth2Login" style="width: 50px;"/>
                                    <button type="submit" class="btn btn-outline-secondary"
                                            *ngSwitchCase="false" (click)="loginWithGitLab(config.registrationId)" 
                                            jhiTranslate="oauth2.{{config.registrationId}}.text">Sign in with GitLab
                                        Account 
                                    </button>
                                </div>
                                <!-- Menu Divider -->
                                <div class="dropdown-divider"></div>
                                <div class="dropdown-item">
Michael Breu's avatar
Michael Breu committed
                                     <form class="form" role="form" (ngSubmit)="login()" [formGroup]="loginForm">
                                    <h5 style="color: #b3b3b3; margin-bottom: 25px;">Sign in locally</h5>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control"
Michael Breu's avatar
Michael Breu committed
                                               name="username" id="username" formControlName="username" placeholder="{{ 'global.form.username.placeholder' | translate }}" #username>
                                    </div>
                                    <div class="input-group mb-3">
Michael Breu's avatar
Michael Breu committed
                                        <input type="password" class="form-control" formControlName="password"
                                               name="password" id="password" placeholder="{{ 'login.form.password.placeholder' | translate }}">
Michael Breu's avatar
Michael Breu committed
						            <div class="alert alert-danger" *ngIf="authenticationError" jhiTranslate="login.messages.error.authentication">
						                <strong>Failed to sign in!</strong> Please check your credentials and try again.
						            </div>
                                    <button type="submit" class="btn btn-outline-secondary" (click)="login()"
                                            style="border-color: #d0d0d0" jhiTranslate="login.form.button">Sign in
Michael Breu's avatar
Michael Breu committed
                                    </form>
                                    <p style="margin-top: 25px;">
                                        <a href="#">Did you forget your password?</a>
                                    </p>
                                </div>
                                <a class="dropdown-item" (click)="login()" id="login">
                                    <fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
                                    <span jhiTranslate="global.menu.account.login">Sign in</span>
                                </a>
                            </div>
                        </div>
                        <div>
                            <a class="dropdown-item" routerLink="account/settings" routerLinkActive="active"
                               *ngSwitchCase="true" (click)="collapseNavbar()">
                                <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.account.settings">Settings</span>
                            </a>
                            <span class="spawn-submenu" jhiTranslate="global.menu.account.settingsDescription"
                                  *ngSwitchCase="true">Manage your user settings</span>
Michael Breu's avatar
Michael Breu committed
                            <span class="spawn-submenu"
                                  *ngSwitchCase="true">My Watchlists</span>

                            <a class="dropdown-item" routerLink="account/password" routerLinkActive="active"
                               *ngSwitchCase="true" (click)="collapseNavbar()">
                                <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.account.password">Password</span>
                            </a>
                            <span class="spawn-submenu" jhiTranslate="global.menu.account.passwordDescription"
                                  *ngSwitchCase="true">Change password</span>
                            <a class="dropdown-item" (click)="logout()" id="logout" *ngSwitchCase="true">
                                <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
                                <span jhiTranslate="global.menu.account.logout">Sign out</span>
                            </a>
                            <span class="spawn-submenu" jhiTranslate="global.menu.account.logoutDescription"
                                  *ngSwitchCase="true">Quit session</span>
                        </div>
                    </div>
                </div> <!-- End Login -->
            </div>
        </div>
Daniel Rainer's avatar
Daniel Rainer committed
    </div>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
</nav>