Fixes Header Bar Behavior

src/app/header/header-slider/header-slider.component.css

@@ -2,7 +2,7 @@
     background-color: #2e2e2e;
     width: 50%;
     height: 90vh;
-    position: absolute;
+    position: fixed;
     top: 10vh;
     right: 0;
     overflow: hidden !important;

src/app/header/header.component.css

@@ -1,8 +1,3 @@
-.wrapper {
-    width: 100vw;
-    overflow: hidden;
-}
-
 .header {
     top: 0;
     left: 0;
@@ -11,6 +6,7 @@
     width: 100vw;
 
     background-color: #2e2e2e;
+    z-index: 50;
 
     height: 10vh;
     min-height: 80px;
@@ -114,6 +110,10 @@ app-header-slider {
         max-width: 1333px;
     }
 
+    .slider-container {
+        display: none;
+    }
+
     .nav-links {
         all: unset;
         width: 50%;

src/app/header/header.component.html

@@ -1,92 +1,90 @@
-<div class="wrapper">
-    <div class="header">
-        <div class="main" #header>
-            <div class="logo">
-                <a routerLink="">
-                    <img src="assets/img/logohideyoshi-white.png" alt="" />
-                </a>
-            </div>
-            <div class="nav-links">
-                <ul class="link-container">
-                    <li *ngFor="let page of pages">
-                        <a [routerLink]="page.route">{{ page.name }}</a>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="profile" #profileDropdown>
-                <div
-                    class="profile-btn"
-                    (click)="toogleProfileDropdown()"
-                    #profileBtn
-                >
-                    <fa-icon
-                        *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
-                        class="fas fa-user"
-                        [icon]="userIcon"
-                    ></fa-icon>
-                    <img
-                        *ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
-                        class="profile-picture"
-                        [ngSrc]="loggedUser.profilePictureUrl"
-                        width="50"
-                        height="50"
-                        alt="Profile Picture"
-                        priority
-                    />
-                </div>
-
-                <app-header-dropdown
-                    class="dropdown"
-                    (clickOutside)="closeDropdown()"
-                    [ignoreClickOutside]="[profileBtn]"
-                    [state]="profileDropdownState"
-                    (loginPopupState)="loginPopupStateChange($event)"
-                    (signupPopupState)="signupPopupStateChange($event)"
-                    (myProfilePopupState)="myProfilePopupStateChange($event)"
-                    (helpPopupState)="helpPopupStateChange($event)"
-                >
-                </app-header-dropdown>
-            </div>
-            <div class="burger-container" (click)="toogleNavSlider()">
-                <div
-                    class="burger-menu"
-                    [ngClass]="{ open: navSliderStatus }"
-                ></div>
-            </div>
+<div class="header">
+    <div class="main" #header>
+        <div class="logo">
+            <a routerLink="">
+                <img src="assets/img/logohideyoshi-white.png" alt="" />
+            </a>
+        </div>
+        <div class="nav-links">
+            <ul class="link-container">
+                <li *ngFor="let page of pages">
+                    <a [routerLink]="page.route">{{ page.name }}</a>
+                </li>
+            </ul>
         </div>
-    </div>
 
-    <div class="slider-container" #nav>
-        <app-header-slider
-            [(state)]="navSliderStatus"
-            [clickOutsideStopWatching]="userSliderStatus"
-            [ignoreClickOutside]="[header, user]"
-        >
-            <app-nav-slider
-                [state]="navSliderStatus"
-                (profileButtonClicked)="profileButtonClicked()"
-                [pages]="pages"
+        <div class="profile" #profileDropdown>
+            <div
+                class="profile-btn"
+                (click)="toogleProfileDropdown()"
+                #profileBtn
             >
-            </app-nav-slider>
-        </app-header-slider>
-    </div>
+                <fa-icon
+                    *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
+                    class="fas fa-user"
+                    [icon]="userIcon"
+                ></fa-icon>
+                <img
+                    *ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
+                    class="profile-picture"
+                    [ngSrc]="loggedUser.profilePictureUrl"
+                    width="50"
+                    height="50"
+                    alt="Profile Picture"
+                    priority
+                />
+            </div>
 
-    <div class="slider-container" #user>
-        <app-header-slider
-            [(state)]="userSliderStatus"
-            [ignoreClickOutside]="[header, nav]"
-        >
-            <app-user-slider
-                [state]="userSliderStatus"
+            <app-header-dropdown
+                class="dropdown"
+                (clickOutside)="closeDropdown()"
+                [ignoreClickOutside]="[profileBtn]"
+                [state]="profileDropdownState"
                 (loginPopupState)="loginPopupStateChange($event)"
                 (signupPopupState)="signupPopupStateChange($event)"
                 (myProfilePopupState)="myProfilePopupStateChange($event)"
                 (helpPopupState)="helpPopupStateChange($event)"
             >
-            </app-user-slider>
-        </app-header-slider>
+            </app-header-dropdown>
+        </div>
+        <div class="burger-container" (click)="toogleNavSlider()">
+            <div
+                class="burger-menu"
+                [ngClass]="{ open: navSliderStatus }"
+            ></div>
+        </div>
     </div>
 </div>
 
+<div class="slider-container" #nav>
+    <app-header-slider
+        [(state)]="navSliderStatus"
+        [clickOutsideStopWatching]="userSliderStatus"
+        [ignoreClickOutside]="[header, user]"
+    >
+        <app-nav-slider
+            [state]="navSliderStatus"
+            (profileButtonClicked)="profileButtonClicked()"
+            [pages]="pages"
+        >
+        </app-nav-slider>
+    </app-header-slider>
+</div>
+
+<div class="slider-container" #user>
+    <app-header-slider
+        [(state)]="userSliderStatus"
+        [ignoreClickOutside]="[header, nav]"
+    >
+        <app-user-slider
+            [state]="userSliderStatus"
+            (loginPopupState)="loginPopupStateChange($event)"
+            (signupPopupState)="signupPopupStateChange($event)"
+            (myProfilePopupState)="myProfilePopupStateChange($event)"
+            (helpPopupState)="helpPopupStateChange($event)"
+        >
+        </app-user-slider>
+    </app-header-slider>
+</div>
+
 <div class="header-spacer"></div>

src/app/header/header.component.ts

@@ -5,7 +5,7 @@ import {
     OnDestroy,
     OnInit,
     ViewChild,
-    ViewContainerRef,
+    ViewContainerRef, ViewEncapsulation,
 } from '@angular/core';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { LoginComponent } from './header-popup/login/login.component';