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

Skip to content
Snippets Groups Projects
navbar.component.html 15.5 KiB
Newer Older
Michael Breu's avatar
Michael Breu committed
<nav class="navbar navbar-dark navbar-expand-md bg-dark bg-primary">
    <a class="navbar-toggler d-lg-none" href="javascript:void(0);" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleNavbar()">
        <fa-icon icon="bars"></fa-icon>
    </a>
    <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="isAuthenticated()">
Michael Breu's avatar
Michael Breu committed
        <ul class="navbar-nav">
            <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
                    <span>
                        <fa-icon icon="home"></fa-icon>
                        <span jhiTranslate="global.menu.home">Home</span>
                </a>
            </li>
            <li ngbDropdown class="nav-item dropdown pointer" display="dynamic" *ngIf="languages && languages.length > 1">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
                    <span>
                        <fa-icon icon="flag"></fa-icon>
                        <span jhiTranslate="global.menu.language">Language</span>
                    </span>
                </a>
                <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="languagesnavBarDropdown">
                    <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>
            </li>
            <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
            <!-- Search -->
            <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a class="nav-link" routerLink="/" (click)="collapseNavbar()" 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>
            <!-- end Search -->
            <!-- Entities -->
            <li *ngSwitchCase="true" ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu">
                    <span>
                        <fa-icon icon="th-list"></fa-icon>
                        <span jhiTranslate="global.menu.entities.main">
                            Entities
                        </span>
                    </span>
                </a>
                <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
                    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
                </ul>
            </li>
            <!-- End Entities -->
            
            <!--  Admin -->
            <li *jhiHasAnyAuthority="'ROLE_ADMIN'" ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                  <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu">
                    <span>
                        <fa-icon icon="user-plus"></fa-icon>
                        <span jhiTranslate="global.menu.admin.main">Administration</span>
                    </span>
                </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>
                    </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>
                        <a class="dropdown-item" (click)="collapseNavbar(); resetPagesCache()">
                             <fa-icon icon="times" [fixedWidth]="true"></fa-icon>
                              <span jhiTranslate="global.menu.admin.pagesCacheReset">reset pages Cache</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>
            </li>
            <!-- End Admin -->
Michael Breu's avatar
Michael Breu committed
            <!-- Login -->
            <li ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu">
                    <span *ngIf="!getImageUrl()">
                        <fa-icon icon="user"></fa-icon>
                        <span jhiTranslate="global.menu.account.main">
                            Account
                    </span>
                    <span *ngIf="getImageUrl()">
                        <img [src]="getImageUrl()" class="profile-image rounded-circle" alt="Avatar">
                    </span>
                </a>
                <ul class="dropdown-menu search-container" ngbDropdownMenu aria-labelledby="account-menu">
                   <ng-container *ngSwitchCase="false">
                     <li *ngFor="let config of configs">
                            <img src="{{'oauth2.'+config.registrationId + '.icon'| translate}}"
                                        alt="oAuth2Login" style="width: 50px;" />
                                    <button [disabled]="!contentEditable" type="submit" class="btn btn-outline-secondary" *ngSwitchCase="false"
                                        (click)="loginWithGitLab(config.registrationId)"
                                        jhiTranslate="oauth2.{{config.registrationId}}.text">Sign in with GitLab
                                        Account
                                    </button>
                    </li>
                    <li class="dropdown-divider"></li>
                    </ng-container>
                    <li *ngSwitchCase="true">
                        <a class="dropdown-item" (click)="logout()" id="logout">
                            <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
                            <span jhiTranslate="global.menu.account.logout">Sign out</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="false">
                        <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" name="username" id="username"
                                                formControlName="username"
                                                placeholder="{{ 'global.form.username.placeholder' | translate }}"
                                                #username>
                                        </div>
                                        <div class="input-group mb-3">
                                            <input type="password" class="form-control" formControlName="password"
                                                name="password" id="password"
                                                placeholder="{{ 'login.form.password.placeholder' | translate }}">
                                        </div>
                                        <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 [disabled]="!contentEditable" type="submit" class="btn btn-outline-secondary" (click)="login()"
                                            style="border-color: #d0d0d0" jhiTranslate="login.form.button">Sign in
                                        </button>
                                        <br>
                                        <div class="" style="padding-top: 10pt;">
                                            <label for="acceptTerms" class="form-check-label">
                                                <input type="checkbox" (change)="toggleEditable($event)">
                                                <a jhitranslate="login.form.acceptTerms" href="/datapolicy">{{'login.form.acceptTerms'| translate}}</a>
                                            </label>
                                            <div class="alert alert-danger" *ngIf="!contentEditable"
                                            jhiTranslate="login.messages.error.terms">
                                            Please accept the datapolicy terms to be able to log in.
                                        </div>
                                        </div>
                                    </form>
                    </li>
                    <li *ngSwitchCase="true" >
                             <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>
                    </li>
                </ul>
            </li>
Michael Breu's avatar
Michael Breu committed
            <!--  end login -->
            <!-- help -->
            <li ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
                 style="position: absolute; right: 0;">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle"
                                class="svg-inline--fa fa-question-circle fa-w-16" role="img"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path fill="currentColor"
                                    d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z">
                                </path>
                            </svg>
                            <span jhiTranslate="global.menu.help">Help</span>
                </a>
                    <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="help-menu" style="left: auto; right: 0">
                        <li>
                            <a class="dropdown-item" routerLink="pages/{{languageService.currentLang}}/helpStart"
                                (click)="collapseNavbar()">
                                <fa-icon icon="question-circle"></fa-icon><span
                                    jhiTranslate="global.menu.helpEntry.helpPages">Erste Hilfe Seite</span>
                            </a>
                        </li>
                    </ul>
             </li>
             </ul>
Daniel Rainer's avatar
Daniel Rainer committed
    </div>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
</nav>
Michael Breu's avatar
Michael Breu committed
<div class="myBar"></div>