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

Skip to content
Snippets Groups Projects
navbar.component.html 20.2 KiB
Newer Older
<!-- Navigation -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 <div class="container-fluid">
  
  <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()">

           <!-- Menu Home -->
           <li class="nav-item dropdown" ngbDropdown (click)="collapseNavbar()"> 
              <span class="nav-link">                 
                  <!-- 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></span>
           </li>
           
           <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>
                </a>
                <div class="dropdown-menu">
                    <li *ngFor="let language of languages">
                    	<a class="dropdown-item" [jhiActiveMenu]="language" href="javascript:void(0);" href="#">{{ language | findLanguageFromKey }}</a>
                       <!-- not used <span class="spawn-submenu">{{ language }}</span> --> 
                    </li>
                </div>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
            </li>
           
          
          <!-- Menu Entities -->
            <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-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>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
            </li>

            <!-- 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>
                            </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>                 
                    </div>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
            </li>

            <!-- 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">
Michael Breu's avatar
Michael Breu committed
                        <div class="search-container dropdown-item">
                        <!-- Quick Search -->    
                            <h3 style="color: #b3b3b3;">Search</h3>
                          <p style="color: #39a6ff;">Search courses and programs</p>
Michael Breu's avatar
Michael Breu committed
                          <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>

                          <!-- 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>

                            <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>
                          
                            <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>

                          <!-- 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>

                          <!-- 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>
                              </div>

                        </div>
                    </div>
                </li> <!-- End Search -->

Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
            <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>
	                      <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>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                        <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>
                        </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>

                  <!-- 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>
                    <span *ngIf="getImageUrl()">
                        <img [src]="getImageUrl()" class="profile-image rounded-circle" alt="Avatar">
                    </span>
	                <!-- 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="search-placeholder" placeholder="Username">
									</div>
									<div class="input-group mb-3">
										<input type="text" class="form-control"
											id="search-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>
		                        </a>
							</div>
						</div>
						<div >
                        <a class="dropdown-item" routerLink="account/settings" routerLinkActive="active" *ngSwitchCase="true" (click)="collapseNavbar()">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                            <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
                            <span jhiTranslate="global.menu.account.settings" >Settings</span>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                        </a>
                        <span class="spawn-submenu" jhiTranslate="global.menu.account.settingsDescription" *ngSwitchCase="true">Manage your user settings</span>

                        <a class="dropdown-item" routerLink="account/password" routerLinkActive="active" *ngSwitchCase="true" (click)="collapseNavbar()">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                            <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">
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
                            <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>
Lukas Kaltenbrunner's avatar
Lukas Kaltenbrunner committed
</nav>