Merge pull request #5 from Sybit-Education/feature/header

feat: Imprint, Dsgvo and header
Sybit-Education · Aug 2, 2023 · dbea3c4 · dbea3c4
2 parents 9d2cb52 + d248e55
commit dbea3c4
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 25 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1 +1,2 @@
+<app-header></app-header>
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -15,6 +15,7 @@ import {sygotchiReducer} from "./store/sygotchi.reducer";
 import { TeamSComponent } from './team-s/team-s.component';
 import { DsgvoPageComponent } from './dsgvo-page/dsgvo-page.component';
 import { ImpressumComponent } from './impressum/impressum.component';
+import { HeaderComponent } from './header/header.component';
 
 @NgModule({
   declarations: [
@@ -23,7 +24,8 @@ import { ImpressumComponent } from './impressum/impressum.component';
     CreationPageComponent,
     TeamSComponent,
     DsgvoPageComponent,
-    ImpressumComponent
+    ImpressumComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/dsgvo-page/dsgvo-page.component.html b/src/app/dsgvo-page/dsgvo-page.component.html
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -0,0 +1,28 @@
+<nav class="navbar navbar-expand-ng navbar-light bg-light">  
+    <div class="container-fluid">
+        <a>
+            <img alt="Sygotchi-logo" class="logo" src="assets/images/sygotchi-logo.png">
+        </a>
+        <ul class="navbar-nav ms-auto flex-row justify-content-between">
+            <div ngbDropdown class="d-inline-blog" display="dynamic"> 
+                <a type="butoon" class="d-flex align-items-center nav-link" id="dropdownConfig" ngbDropdownToggle>
+                    Sonstige
+                </a>
+                <div ngbDropdownMenu aria-labelledby="dropdownConfig">
+                    <a ngbDropdownItem routerLink="/impressum">
+                        <i class="fa-solid fa-stamp"></i>
+                        <span>Impressum</span>
+                    </a>
+                    <a ngbDropdownItem routerLink="/dsgvo">
+                        <i class="fa-solid fa-server"></i>
+                        <span>Datenschutz</span>
+                    </a>
+                    <a ngbDropdownItem routerLink="team-site">
+                        <i class="fa-solid fa-users"></i>
+                        <span>Über uns</span>
+                    </a>
+                </div>
+            </div>
+        </ul>
+    </div>
+</nav>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -0,0 +1,21 @@
+.nav-item {
+    margin-right: 15px;
+
+}
+
+span {
+    margin-left:  10px;
+    font-size: 1.3rem;
+}
+
+a {
+    font-size: 1.3rem;
+}
+
+.logo {
+    max-width: 150px;
+
+    @media only screen and (max-width: 600px) {
+        max-width: 50px;
+    }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent {
+
+}
diff --git a/src/app/impressum/impressum.component.html b/src/app/impressum/impressum.component.html
@@ -31,11 +31,11 @@ <h4>DUNS Nummer</h4>
     <h3></h3>
     <h4>EU-Streitschlichtung</h4>
     <p>
-        Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: 
+        Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
         <a href="https://ec.europa.eu/consumers/odr/main/index.cfm?event=main.home.chooseLanguage">https://ec.europa.eu/consumers/odr/.</a>
         Unsere E-Mail-Adresse finden Sie oben im Impressum.
     </p>
     <h3></h3>
     <h4>Haftungshinweis:</h4>
     <p>Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>
-</div>
+</div>