From 355d482afbbc91222733df1eeb03b492a14d8fa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lud=C4=9Bk=20Nov=C3=BD?=
 <13610612+ludeknovy@users.noreply.github.com>
Date: Sun, 29 Sep 2024 08:38:51 +0200
Subject: [PATCH] Sticky control panel

---
 .../item-detail/item-detail.component.html    |  2 +-
 .../control-panel/control-panel.component.css |  7 +++++-
 .../control-panel.component.html              |  2 +-
 .../control-panel/control-panel.component.ts  | 23 +++++++++++++++----
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
index d76e5db0..410a1f07 100644
--- a/src/app/item-detail/item-detail.component.html
+++ b/src/app/item-detail/item-detail.component.html
@@ -1,4 +1,4 @@
-<app-control-panel *ngIf="!isAnonymous">
+<app-control-panel *ngIf="!isAnonymous" shouldStick=true>
   <ul class="navbar-nav mr-auto">
     <li class="nav-item">
       <app-breadcrumb *ngIf="itemData.environment" [testName]="itemData.name"></app-breadcrumb>
diff --git a/src/app/shared/control-panel/control-panel.component.css b/src/app/shared/control-panel/control-panel.component.css
index 242544f0..58b25e49 100644
--- a/src/app/shared/control-panel/control-panel.component.css
+++ b/src/app/shared/control-panel/control-panel.component.css
@@ -1,7 +1,7 @@
 #top-panel {
   margin-left: 10px;
   margin-right: 10px;
-  margin-top: 20px;
+  padding-top: 20px !important;
   border-radius: 0.2rem;
 }
 
@@ -13,3 +13,8 @@
   padding-bottom: 5px;
   padding-top: 5px;
 }
+
+.navbar-inverse {
+  background-color: #f0f1f4;
+  padding-bottom: 20px !important;
+}
diff --git a/src/app/shared/control-panel/control-panel.component.html b/src/app/shared/control-panel/control-panel.component.html
index 4715ea02..1f175042 100644
--- a/src/app/shared/control-panel/control-panel.component.html
+++ b/src/app/shared/control-panel/control-panel.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light py-1 content-container" id="top-panel">
+<nav class="navbar navbar-expand-lg navbar-light py-1 content-container" [ngClass]="{'sticky-top': shouldStick }" id="top-panel" (scroll)="onWindowScroll();">
   <button class="navbar-toggler text-primary" type="button" (click)="toggleNavbar()">
     <i class="fas fa-ellipsis-h"></i>
   </button>
diff --git a/src/app/shared/control-panel/control-panel.component.ts b/src/app/shared/control-panel/control-panel.component.ts
index a4c1fef8..46878c52 100644
--- a/src/app/shared/control-panel/control-panel.component.ts
+++ b/src/app/shared/control-panel/control-panel.component.ts
@@ -1,16 +1,31 @@
-import { Component } from "@angular/core";
+import { Component, HostListener, Input } from "@angular/core";
 
 @Component({
-  selector: "app-control-panel",
-  templateUrl: "./control-panel.component.html",
-  styleUrls: ["./control-panel.component.css", "../../shared-styles.css"]
+  selector: 'app-control-panel',
+  templateUrl: './control-panel.component.html',
+  styleUrls: ['./control-panel.component.css', '../../shared-styles.css']
 })
 export class ControlPanelComponent {
 
+  @Input() shouldStick = false;
+
   navbarOpen = false;
 
   toggleNavbar() {
     this.navbarOpen = !this.navbarOpen;
   }
 
+  @HostListener('window:scroll', ['$event'])
+  onWindowScroll() {
+    if (!this.shouldStick) {
+      return
+    }
+    const element = document.querySelector("#top-panel") as HTMLElement;
+    if (window.pageYOffset > element.clientHeight) {
+      element.classList.add("navbar-inverse");
+    } else {
+      element.classList.remove("navbar-inverse");
+    }
+  }
+
 }