fixed header (#85)

* fixed header

* fix

* fix

src/app/_common-components/menu/menu.component.html

@@ -0,0 +1,12 @@
+<nav class="menu">
+  <img class="logo" [src]="logo" i18n-alt alt="logo" />
+  <a
+    mat-button
+    *ngFor="let route of routeConfig"
+    [routerLink]="[route.link]"
+    [routerLinkActive]="['route-active']"
+    [routerLinkActiveOptions]="{ exact: true }"
+  >
+    {{ route.label }}
+  </a>
+</nav>

src/app/_common-components/menu/menu.component.scss

@@ -0,0 +1,71 @@
+@use '../../../variables' as *;
+
+.menu {
+  position: fixed;
+  z-index: 9;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 68px;
+  background: linear-gradient(
+      90deg
+    , #1b1f26 0%, #2b323d 100%);
+  color: $white;
+
+  .logo {
+    margin: 20px 10px 0 25px;
+    float: left;
+  }
+}
+
+.mat-button {
+  min-width: 0;
+  padding: 0;
+  margin: 0 16px 0 16px;
+  line-height: 68px;
+
+  &.route-active::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background-color: map-get($sormas-primary, 700);
+    content: '';
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, md)) {
+  .mat-button {
+    margin: 0 12px;
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, lg)) {
+  .mat-button {
+    margin: 0 16px;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)) {
+  .menu {
+    flex-direction: column;
+  }
+
+  .mat-button {
+    display: block;
+    width: 100%;
+    padding: 1em;
+    margin: 0;
+    color: $white;
+    line-height: 1;
+
+    &.route-active {
+      color: map-get($sormas-primary, 700);
+    }
+
+    &.route-active::after {
+      display: none;
+    }
+  }
+}

src/app/_common-components/menu/menu.component.spec.ts

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

src/app/_common-components/menu/menu.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import logoPath from '../../../assets/img/sormas-logo.svg';
+
+export interface RouteItem {
+  link: string;
+  label: string;
+}
+
+export const routesConfig: RouteItem[] = [
+  { link: '', label: $localize`Dashboard` },
+  { link: 'about', label: $localize`About` },
+  { link: 'tasks', label: $localize`Tasks` },
+  { link: 'cases/list', label: $localize`Cases` },
+  { link: 'user-profile', label: $localize`My profile` },
+];
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss'],
+})
+export class MenuComponent {
+  routeConfig: RouteItem[] = routesConfig;
+  logo = logoPath;
+}

src/app/app.component.html

@@ -1,5 +1,4 @@
-<div [dir]="direction">
-  <app-layout>
-    <router-outlet></router-outlet>
-  </app-layout>
+<div [dir]="direction" class="main-wrapper">
+  <app-menu></app-menu>
+  <router-outlet></router-outlet>
 </div>

src/app/app.component.scss

@@ -0,0 +1,4 @@
+.main-wrapper {
+  height: 100%;
+  padding-top: 68px;
+}

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { getEnv } from '../environments/getEnv';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: [],
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   direction: Direction = 'ltr';

src/app/app.module.ts

@@ -15,9 +15,10 @@ import { SharedModule } from './shared/shared.module';
 import { ENV, getEnv } from '../environments/getEnv';
 import { AuthService } from './shared/auth/auth-service/auth.service';
 import { DynamicFormModule } from './shared/dynamic-form/dynamic-form.module';
+import { MenuComponent } from './_common-components/menu/menu.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, MenuComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/cases/case/case.component.html

@@ -31,7 +31,7 @@ <h1>
     </span>
     </div>
 
-    <div class="tab-nav-header">
+    <div class="tab-nav-header" [ngClass]="{'fixed': fixedHeader}">
       <nav mat-tab-nav-bar>
         <a
           mat-tab-link
@@ -50,7 +50,7 @@ <h1>
     </div>
   </div>
 
-  <div class="case-content">
+  <div class="case-content" [ngClass]="{'fixed': fixedHeader}">
     <router-outlet (activate)="onActivate($event)"></router-outlet>
   </div>
 </section>

src/app/cases/case/case.component.scss

@@ -1,17 +1,25 @@
 @use '../../../variables.scss' as *;
 
 .case-page {
+  padding: 0 25px;
+
   .case-content {
-    margin-top: 160px;
+    &.fixed {
+      padding-top: 100px;
+    }
   }
   .top-section {
-    position: fixed;
-    z-index: 9;
-    top: 68px;
-    right: 30px;
-    left: 0;
-    padding: 30px 0 0 30px;
-    background: $white;
+    padding-top: 100px;
+
+    .title-container {
+      position: fixed;
+      z-index: 9;
+      top: 68px;
+      right: 0;
+      left: 0;
+      padding: 30px 25px 0 25px;
+      background: $white;
+    }
   }
   h1 {
     display: flex;
@@ -27,6 +35,7 @@
   }
   .info-box {
     padding: 8px 20px;
+    margin-bottom: 10px;
     background-color: map-get($sormas-accent, 50);
 
     .info-item {
@@ -48,6 +57,16 @@
   .tab-nav-header {
     display: flex;
     justify-content: space-between;
+
+    &.fixed {
+      position: fixed;
+      z-index: 9;
+      top: 150px;
+      right: 0;
+      left: 0;
+      padding: 0 25px;
+      background: $white;
+    }
   }
 
   .mat-tab-header {

src/app/cases/case/case.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { CaseControllerService } from 'api-client';
 import { ActivatedRoute } from '@angular/router';
 import { NotificationService } from '../../_services/notification.service';
@@ -19,6 +19,12 @@ export class CaseComponent implements OnInit {
   caseClassificationIcons = CaseClassificationIcons;
   links: CaseLink[] = [];
   caseId: any;
+  fixedHeader = false;
+
+  @HostListener('window:scroll', ['$event'])
+  onWindowScroll(): void {
+    this.fixedHeader = window.pageYOffset > 71;
+  }
 
   constructor(
     private caseService: CaseService,

src/app/shared/dynamic-form/dynamic-form.component.html

@@ -1,5 +1,5 @@
 <div class="dynamic-form-wrapper">
-  <div class="inpage-nav">
+  <div class="inpage-nav" [ngClass]="{'fixed': fixedHeader}">
     <app-inpage-nav *ngIf="withAnchor" [anchors]="getSections()"></app-inpage-nav>
   </div>
   <div class="form-content">

src/app/shared/dynamic-form/dynamic-form.component.scss

@@ -2,15 +2,15 @@
 
 .dynamic-form-wrapper {
   .inpage-nav {
-    position: fixed;
-    z-index: 9;
-    right: 0;
-    left: 0;
-    padding: 0 30px;
-  }
-
-  .form-content {
-    padding-top: 40px;
+    &.fixed {
+      position: fixed;
+      z-index: 9;
+      padding: 0 25px;
+      top: 200px;
+      right: 0;
+      left: 0;
+      background: white;
+    }
   }
 }
 

src/app/shared/dynamic-form/dynamic-form.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FormElementControlService } from '../../_services/form-element-control.service';
@@ -24,6 +24,14 @@ export class DynamicFormComponent implements OnInit, OnDestroy {
   form: FormGroup;
   watchFields: any[] = [];
   subscription: Subscription[] = [];
+  fixedHeader = false;
+
+  @HostListener('window:scroll', ['$event'])
+  onWindowScroll(): void {
+    if (this.withAnchor) {
+      this.fixedHeader = window.pageYOffset > 71;
+    }
+  }
 
   constructor(
     private formElementControlService: FormElementControlService,