From a953195dc81caae9e03c0e4a654ab3f73ba31678 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 25 Oct 2023 15:16:13 +0300
Subject: [PATCH] [angular-16 | DONE | CHANGED]: Make dashboard-sidebar sticky
 instead of fixed.

---
 .../sidebar/sideBar.component.html            |   4 +-
 .../sidebar/sideBar.component.ts              |   4 +
 monitor-admin/topic/topic.component.html      | 175 +++++++++---------
 monitor-admin/topic/topic.component.ts        |   4 +
 4 files changed, 99 insertions(+), 88 deletions(-)

diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html
index 35e20996..9e772ea8 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.html
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.html
@@ -1,8 +1,8 @@
-<aside id="sidebar_main" class="uk-visible@m">
+<div id="sidebar_main" uk-sticky="end: .sidebar_main_swipe;" [attr.offset]="offset" class="uk-visible@m">
   <div sidebar-content>
     <ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
   </div>
-</aside>
+</div>
 <div class="uk-hidden@m">
   <div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
     <div class="uk-offcanvas-bar uk-padding-remove">
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts
index 39bc1fc1..0610d6f3 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.ts
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.ts
@@ -30,6 +30,7 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
   @Input() queryParamsHandling;
   @ViewChild("nav") nav: ElementRef;
   @ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
+  public offset: number;
   public properties = properties;
   private subscriptions: any[] = [];
   private init: boolean = false;
@@ -45,6 +46,9 @@ export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
   }
 
   ngOnInit() {
+    if (typeof document !== "undefined") {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
+    }
     this.setActiveMenuItem();
   }
 
diff --git a/monitor-admin/topic/topic.component.html b/monitor-admin/topic/topic.component.html
index 2e5c7ab1..8197b19a 100644
--- a/monitor-admin/topic/topic.component.html
+++ b/monitor-admin/topic/topic.component.html
@@ -1,29 +1,30 @@
-<aside *ngIf="stakeholder" id="sidebar_main">
-  <div sidebar-content>
-    <div class="back">
-      <a [routerLink]="'/admin/' + stakeholder.alias" class="uk-flex uk-flex-middle uk-flex-center">
-        <div class="uk-width-auto">
-          <icon name="west" [flex]="true" ratio="1.3"></icon>
-        </div>
-        <span class="uk-width-expand uk-text-truncate uk-margin-left hide-on-close">Indicators</span>
-      </a>
-    </div>
-    <div class="menu_section uk-margin-large-top">
-      <ul class="uk-list uk-nav uk-nav-default" transition-group [id]="'topics'"
-          uk-nav="duration: 400">
-        <li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i"
-            transition-group-item>
-          <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
-             [title]="topic.name" class="uk-visible-toggle uk-flex uk-flex-middle">
-            <div *ngIf="topic.icon" class="uk-width-auto">
-              <icon class="menu-icon" [svg]="topic.icon" ratio="0.9" [flex]="true"></icon>
-            </div>
-            <span [class.hide-on-close]="topic.icon"
-                  class="uk-width-expand uk-text-truncate uk-margin-small-left">
+<div class="uk-flex">
+  <aside *ngIf="stakeholder" uk-sticky="end: .sidebar_main_swipe;" [attr.offset]="offset" id="sidebar_main">
+    <div sidebar-content>
+      <div class="back">
+        <a [routerLink]="'/admin/' + stakeholder.alias" class="uk-flex uk-flex-middle uk-flex-center">
+          <div class="uk-width-auto">
+            <icon name="west" [flex]="true" ratio="1.3"></icon>
+          </div>
+          <span class="uk-width-expand uk-text-truncate uk-margin-left hide-on-close">Indicators</span>
+        </a>
+      </div>
+      <div class="menu_section uk-margin-large-top">
+        <ul class="uk-list uk-nav uk-nav-default" transition-group [id]="'topics'"
+            uk-nav="duration: 400">
+          <li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i"
+              transition-group-item>
+            <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
+               [title]="topic.name" class="uk-visible-toggle uk-flex uk-flex-middle">
+              <div *ngIf="topic.icon" class="uk-width-auto">
+                <icon class="menu-icon" [svg]="topic.icon" ratio="0.9" [flex]="true"></icon>
+              </div>
+              <span [class.hide-on-close]="topic.icon"
+                    class="uk-width-expand uk-text-truncate uk-margin-small-left">
                 {{topic.name}}
               </span>
-            <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i"
-                  (click)="$event.stopPropagation();$event.preventDefault()">
+              <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i"
+                    (click)="$event.stopPropagation();$event.preventDefault()">
                 <a class="uk-link-reset uk-flex uk-flex-middle">
                   <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
                         ratio="0.6"></icon>
@@ -90,17 +91,17 @@
                   </ul>
                 </div>
               </span>
-            <span class="uk-nav-parent-icon hide-on-close"></span>
-          </a>
-          <ul *ngIf="isBrowser || topicIndex === i" class="uk-nav-sub" [id]="'categories-' + i.toString()"
-              transition-group>
-            <li *ngFor="let category of topic.categories; let j=index" transition-group-item class="uk-visible-toggle"
-                [class.uk-active]="categoryIndex == j">
-              <a (click)="chooseCategory(j)" [title]="category.name">
-                <div class="uk-flex uk-flex-middle uk-width-1-1">
-                  <span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
-                  <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j"
-                        (click)="$event.stopPropagation();$event.preventDefault()">
+              <span class="uk-nav-parent-icon hide-on-close"></span>
+            </a>
+            <ul *ngIf="isBrowser || topicIndex === i" class="uk-nav-sub" [id]="'categories-' + i.toString()"
+                transition-group>
+              <li *ngFor="let category of topic.categories; let j=index" transition-group-item class="uk-visible-toggle"
+                  [class.uk-active]="categoryIndex == j">
+                <a (click)="chooseCategory(j)" [title]="category.name">
+                  <div class="uk-flex uk-flex-middle uk-width-1-1">
+                    <span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
+                    <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j"
+                          (click)="$event.stopPropagation();$event.preventDefault()">
                     <a class="uk-link-reset uk-flex uk-flex-middle">
                       <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
                             ratio="0.6"></icon>
@@ -164,34 +165,34 @@
                       </ul>
                     </div>
                   </span>
+                  </div>
+                </a>
+              </li>
+              <li *ngIf="isCurator">
+                <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
+                  <icon name="add" [flex]="true"></icon>
+                  <span class="hide-on-close">Create new category</span>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li *ngIf="isCurator" class="hide-on-close">
+            <a (click)="editTopicOpen(-1); $event.preventDefault()">
+              <div class="uk-flex uk-flex-middle">
+                <div class="uk-width-auto">
+                  <icon class="menu-icon" name="add" [flex]="true"></icon>
                 </div>
-              </a>
-            </li>
-            <li *ngIf="isCurator">
-              <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
-                <icon name="add" [flex]="true"></icon>
-                <span class="hide-on-close">Create new category</span>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li *ngIf="isCurator" class="hide-on-close">
-          <a (click)="editTopicOpen(-1); $event.preventDefault()">
-            <div class="uk-flex uk-flex-middle">
-              <div class="uk-width-auto">
-                <icon class="menu-icon" name="add" [flex]="true"></icon>
+                <span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">Create new topic</span>
               </div>
-              <span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">Create new topic</span>
-            </div>
-          </a>
-        </li>
-      </ul>
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
-</aside>
-<div #pageContent *ngIf="stakeholder && filters" page-content>
-  <div actions>
-    <div *ngIf="stakeholder.topics.length > 0" class="uk-flex uk-flex-center uk-margin-medium-top uk-flex-right@m uk-width-1-1">
+  </aside>
+  <div #pageContent *ngIf="stakeholder && filters" page-content>
+    <div actions>
+      <div *ngIf="stakeholder.topics.length > 0" class="uk-flex uk-flex-center uk-margin-medium-top uk-flex-right@m uk-width-1-1">
         <button class="uk-button uk-button-primary uk-flex uk-flex-middle">
           <icon name="visibility" [flex]="true"></icon>
           <span class="uk-margin-small-left uk-margin-small-right">Preview</span>
@@ -216,17 +217,17 @@
           </ul>
         </div>
       </div>
-    <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
-        transition-group class="uk-tab uk-margin-xsmall-top" [id]="'subCategories'">
-      <ng-template ngFor [ngForOf]=" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
-                   let-subCategory let-i="index">
-        <li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
-          <a (click)="chooseSubcategory(i)">
-            <span class="uk-text-uppercase">{{subCategory.name}}</span>
-          </a>
-          <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
-                [class.uk-invisible-hover]="subCategoryIndex !== i"
-                (click)="$event.stopPropagation();$event.preventDefault()">
+      <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
+          transition-group class="uk-tab uk-margin-xsmall-top" [id]="'subCategories'">
+        <ng-template ngFor [ngForOf]=" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
+                     let-subCategory let-i="index">
+          <li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
+            <a (click)="chooseSubcategory(i)">
+              <span class="uk-text-uppercase">{{subCategory.name}}</span>
+            </a>
+            <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
+                  [class.uk-invisible-hover]="subCategoryIndex !== i"
+                  (click)="$event.stopPropagation();$event.preventDefault()">
             <a class="uk-link-reset uk-flex uk-flex-middle">
               <icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
                     ratio="0.6"></icon>
@@ -306,24 +307,26 @@
               </ul>
             </div>
           </span>
+          </li>
+        </ng-template>
+        <li *ngIf="isCurator">
+          <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
+            <icon name="add" [flex]="true"></icon>
+            <span class="uk-text-uppercase">Create new subcategory</span>
+          </a>
         </li>
-      </ng-template>
-      <li *ngIf="isCurator">
-        <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
-          <icon name="add" [flex]="true"></icon>
-          <span class="uk-text-uppercase">Create new subcategory</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div inner>
-    <input #file id="import-file" type="file" class="uk-hidden"
-           (change)="indicators.fileChangeEvent($event, this.index)"/>
-    <indicators #indicators [topicIndex]="topicIndex" [categoryIndex]="categoryIndex"
-                [subcategoryIndex]="subCategoryIndex" [user]="user"
-                [stakeholder]="stakeholder" [changed]="change.asObservable()"></indicators>
+      </ul>
+    </div>
+    <div inner>
+      <input #file id="import-file" type="file" class="uk-hidden"
+             (change)="indicators.fileChangeEvent($event, this.index)"/>
+      <indicators #indicators [topicIndex]="topicIndex" [categoryIndex]="categoryIndex"
+                  [subcategoryIndex]="subCategoryIndex" [user]="user"
+                  [stakeholder]="stakeholder" [changed]="change.asObservable()"></indicators>
+    </div>
   </div>
 </div>
+
 <modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
              [overflowBody]="false">
   <div [class.uk-invisible]="loading" class="uk-position-relative">
diff --git a/monitor-admin/topic/topic.component.ts b/monitor-admin/topic/topic.component.ts
index c9d6f7ff..57f65930 100644
--- a/monitor-admin/topic/topic.component.ts
+++ b/monitor-admin/topic/topic.component.ts
@@ -38,6 +38,7 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
   private topicSubscriptions: any[] = [];
   private subscriptions: any[] = [];
   public properties: EnvProperties = properties;
+  public offset: number;
   public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   public loading: boolean = false;
   public stakeholder: Stakeholder;
@@ -95,6 +96,9 @@ export class TopicComponent implements OnInit, OnDestroy, AfterViewInit, IDeacti
   }
   
   public ngOnInit() {
+    if (typeof document !== "undefined") {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
+    }
     let subscription: Subscription;
     this.subscriptions.push(this.topicIndexSubject.asObservable().subscribe(index => {
       this.topicChanged(() => {