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

Skip to content
Snippets Groups Projects
navbar.component.html 20.3 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">
            <ul class="navbar-nav" [ngSwitch]="isAuthenticated()">
Daniel Rainer's avatar
Daniel Rainer committed
                <!-- Menu Home -->
                <li class="nav-item dropdown" ngbDropdown (click)="collapseNavbar()">
Daniel Rainer's avatar
Daniel Rainer committed
              <span class="nav-link">
                  <!-- Icon -->
Daniel Rainer's avatar
Daniel Rainer committed
                  <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"/>
Daniel Rainer's avatar
Daniel Rainer committed
                  <!-- Icon End -->
              <span jhiTranslate="global.menu.home">Home</span></span>
Daniel Rainer's avatar
Daniel Rainer committed
                </li>
Daniel Rainer's avatar
Daniel Rainer committed
                <li class="nav-item dropdown" *ngIf="languages && languages.length > 1">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                    <span>
                        <fa-icon icon="flag"></fa-icon>
                        <span jhiTranslate="global.menu.language">Language</span>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                    </span>
Daniel Rainer's avatar
Daniel Rainer committed
                    </a>
                    <div 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>
                    <!-- not used <span class="spawn-submenu">{{ language }}</span> -->
                </li>
        </div>
        </li>
Daniel Rainer's avatar
Daniel Rainer committed
        <!-- Menu Entities -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
Daniel Rainer's avatar
Daniel Rainer committed
                <!-- Icon -->
                <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>
                <!-- Icon End -->
                Entities</a> (Vorlage)
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Menu Item 1</a>
                <span class="spawn-submenu">This is a short description of the link 1</span>
                <a class="dropdown-item" href="#">Menu Item 2</a>
                <span class="spawn-submenu">This is a short description of the link 2</span>
                <a class="dropdown-item" href="#">Menu Item 3</a>
                <span class="spawn-submenu">This is a short description of the link 3</span>
            </div>
        </li>
Daniel Rainer's avatar
Daniel Rainer committed
        <!-- Menu Programs -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                <!-- Icon -->
                <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>
                <!-- Icon End -->
                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>
Daniel Rainer's avatar
Daniel Rainer committed
                    <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>
            </div>
        </li>
Daniel Rainer's avatar
Daniel Rainer committed
        <!-- Menu Search -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                <!-- Icon -->
                <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>
                <!-- Icon End -->
                <span jhiTranslate="global.menu.search">Search</span></a>TODO
            <div class="dropdown-menu">
                <div class="search-container dropdown-item">
                    <!-- Quick Search -->
                    <h3 style="color: #b3b3b3;">Search</h3>
                    <p style="color: #39a6ff;">Search courses and programs</p>
                    <p style="color: #b3b3b3;">Some text to describe the search functions and<br>additional
                        informations. And some more text<br>for a second line</p>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="search-placeholder" placeholder="Search">
                    </div>
Daniel Rainer's avatar
Daniel Rainer committed
                    <!-- Filter options -->
                    <div class="form-group">
                        <label for="filter-options">Filter</label>
                        <select class="form-control" id="university" name="university-list">
                            <option value="" disabled selected>Select University</option>
                            <option>Innsbruck</option>
                            <option>Salzburg</option>
                            <option>Linz</option>
                            <option>Wien</option>
                        </select>
                    </div>
Daniel Rainer's avatar
Daniel Rainer committed
                    <div class="form-group">
                        <select class="form-control" id="repository" name="repository-list">
                            <option value="" disabled selected>Select repository</option>
                            <option>Repository 1</option>
                            <option>Repository 2</option>
                            <option>Repository 3</option>
                            <option>Repository 4</option>
                        </select>
                    </div>
Daniel Rainer's avatar
Daniel Rainer committed
                    <div class="form-group">
                        <select class="form-control" id="file-format" name="file-format">
                            <option value="" disabled selected style="color: #b3b3b3;">Select file format</option>
                            <option>Innsbruck</option>
                            <option>Salzburg</option>
                            <option>Linz</option>
                            <option>Wien</option>
                        </select>
                    </div>
Daniel Rainer's avatar
Daniel Rainer committed
                    <!-- Status options -->
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="sellist1">
                            <option>Option 1</option>
                            <option>Option 2</option>
                        </select>
                    </div>
Daniel Rainer's avatar
Daniel Rainer committed
                    <!-- difficulty options -->
                    <div class="form-group">
                        <label for="difficulty">Difficulty</label>
                        <select class="form-control" id="difficulty" name="sellist1">
                            <option>Easy</option>
                            <option>Normal</option>
                            <option>Hard</option>
                            <option>Insane</option>
                        </select>
Daniel Rainer's avatar
Daniel Rainer committed
                </div>
            </div>
        </li> <!-- End Search -->

        <li *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">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                    <span>
Daniel Rainer's avatar
Daniel Rainer committed
	                      <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"/>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                        <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>
        </li>
Daniel Rainer's avatar
Daniel Rainer committed
        <!-- Login -->
        <li class="nav-item dropdown pointer" ngbDropdown>
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                <!-- Icon -->
                <span *ngIf="!getImageUrl()">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                        <fa-icon icon="user"></fa-icon>
	                    <span jhiTranslate="global.menu.account.main">Account</span>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                    </span>
Daniel Rainer's avatar
Daniel Rainer committed
                <span *ngIf="getImageUrl()">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                        <img [src]="getImageUrl()" class="profile-image rounded-circle" alt="Avatar">
                    </span>
Daniel Rainer's avatar
Daniel Rainer committed
                <!-- Icon End -->
            </a>
            <div class="dropdown-menu">
                <div class="search-container" *ngSwitchCase="false">
                    <div *ngSwitchCase="false">
                        <!-- Quick Search -->
                        <div class="dropdown-item">
                            <img src="/content/img/gitLab.png" style="width: 50px;"/>
                            <button type="submit" class="btn btn-outline-secondary"
                                    *ngSwitchCase="false" (click)="loginWithGitLab()"
                                    jhiTranslate="global.menu.account.loginViaGitLab">Sign in with GitLab Account
                            </button>
                        </div>
                        <!-- Menu Divider -->
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-item">
                            <h5 style="color: #b3b3b3; margin-bottom: 25px;">Sign in locally</h5>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control"
                                       id="username-placeholder" placeholder="Username">
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control"
                                       id="password-placeholder" placeholder="Password">
                            </div>
                            <button type="button" class="btn btn-outline-secondary"
                                    style="border-color: #d0d0d0">Sign in
                            </button>
                            <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>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                        </a>
Daniel Rainer's avatar
Daniel Rainer committed
                    </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>
Daniel Rainer's avatar
Daniel Rainer committed
                    <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>
Daniel Rainer's avatar
Daniel Rainer committed
                    <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>
        </li> <!-- End Login -->
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
        </ul>
    </div>
Daniel Rainer's avatar
Daniel Rainer committed
    </div>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
</nav>