Footer/navigationbar implemented (#171)

* chore: added icons for footer

* feat: Add footer component

* fix: footer wird nurnoch bei den gewünschten seiten angezeigt

* feat: routing bei footer-html implementiert

* style: highlighten der aktuellen Maske innerhalb des Footers

---------

Co-authored-by: Justin Hubert <135236159+Jstn2004@users.noreply.github.com>

frontend/src/app/app.component.html

@@ -1,4 +1,5 @@
 <router-outlet></router-outlet>
+<app-footer *ngIf="hasFooter()"></app-footer>
 <!--TODO: set visible for the laoding progress-->
 <app-loader *ngIf="isLoading" ></app-loader>
 <app-toast></app-toast>

frontend/src/app/app.component.ts

@@ -7,16 +7,23 @@ import { LoaderService } from './services/loader.service';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
+
 export class AppComponent implements OnInit{
   title = 'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf';
   isLoading: boolean = false;
   constructor(private loaderService: LoaderService) {
 
   }
+
+    hasFooter() {
+    const footerPages: string[] = ['/main', '/ranking'];
+    return footerPages.includes(window.location.pathname);
+    }
 
   ngOnInit(): void {
      this.loaderService.isLoading.subscribe((value) => {
       this.isLoading = value;
     });
+
   }
-}
+

frontend/src/app/app.module.ts

@@ -20,11 +20,13 @@ import { InputfieldComponent } from './components/atoms/inputfield/inputfield.co
 import { SignupformComponent } from './components/organisms/signupform/signupform.component';
 import { LoaderComponent } from './components/atoms/loader/loader.component';
 import { LandingpageComponent } from './components/pages/landingpage/landingpage.component';
+import { FooterComponent } from './components/organisms/footer/footer.component';
 import { UserCardComponent } from './components/atoms/user-card/user-card.component';
 import { RankingTableComponent } from './components/organisms/ranking-table/ranking-table.component';
 import { RankingPageComponent } from './components/pages/ranking-page/ranking-page.component';
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -43,10 +45,12 @@ import { RankingPageComponent } from './components/pages/ranking-page/ranking-pa
     SignupformComponent,
     LoaderComponent,
     LandingpageComponent,
+    FooterComponent,
     UserCardComponent,
     RankingTableComponent,
     RankingPageComponent,
 
+
   ],
   imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
   providers: [provideAnimations()],

frontend/src/app/components/organisms/footer/footer.component.html

@@ -0,0 +1,22 @@
+<div id="container">
+    <div id="nav-main"
+        (click)="navigate('/main')"
+        [ngClass]="isOnPage('/main')? 'nav-element highlight': 'nav-element'">
+        <img class="icons" src="../../../../assets/icons/home.svg" alt="home-svg">
+    </div>
+    <div id="nav-ranked"
+        (click)="navigate('/ranking')"
+        [ngClass]="isOnPage('/ranking')? 'nav-element highlight': 'nav-element'">
+        <img class="icons"  src="../../../../assets/icons/podium.svg" alt="podium-svg">
+    </div>
+    <div id="nav-friendlist"
+        (click)="navigate('/friendlist')"
+        [ngClass]="isOnPage('/friendlist')? 'nav-element highlight': 'nav-element'">
+        <img class="icons"  src="../../../../assets/icons/friends.svg" alt="friends-svg">
+    </div>
+    <div id="nav-profile"
+        (click)="navigate('/profile')"
+        [ngClass]="isOnPage('/profile')? 'nav-element highlight': 'nav-element'">
+        <img class="icons"  src="../../../../assets/icons/profile.svg" alt="profile-svg">
+    </div>
+</div>

frontend/src/app/components/organisms/footer/footer.component.scss

@@ -0,0 +1,39 @@
+#container{
+    //fix position at the bottom of the page
+    position: fixed;
+    bottom: 0;
+
+    //format + borders
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    height: 10vh;
+    background-color: var(--background-black);
+    color: var(--white);
+    border-top: 1px solid;
+
+    //format navigation elements
+    .nav-element{
+        text-align: center;
+        width: 25%;
+        height: 100%;
+
+        .icons{
+            width: 60%;
+            max-width: 4.5rem;
+            filter: brightness(0) invert(1);
+            padding-top: 5%;
+        }
+    }
+    .highlight{
+        background-color: var(--white)!important;
+        .icons{
+            filter:invert(0);
+        }
+    }
+
+    //seperate navigation elements with borders
+    #nav-main, #nav-ranked, #nav-friendlist{
+        border-right: 1px solid var(--white);
+    }
+}

frontend/src/app/components/organisms/footer/footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/organisms/footer/footer.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  router: Router;
+
+  constructor(router:Router){
+    this.router=router
+  }
+
+  navigate(path:string){
+    this.router.navigateByUrl(path);
+  }
+  isOnPage(path:string):boolean{
+    return this.router.url==path;
+  }
+}