style: change display of user documentation sidebar opener

src/app/app.component.html

@@ -94,16 +94,20 @@
       </button>
     </div>
 
-    <main class="content mat-typography"
-          cdkTrapFocus
-          [dlcmSpinner]="!(isApplicationInitializedObs | async)"
-    >
-      <div class="router-outlet-wrapper"
-           [solidifyFocusFirstElement]="true"
+    <div class="content-and-sidebar-userguide">
+      <main class="content mat-typography"
+            cdkTrapFocus
+            [dlcmSpinner]="!(isApplicationInitializedObs | async)"
       >
-        <router-outlet></router-outlet>
-      </div>
-    </main>
+        <div class="router-outlet-wrapper"
+             [solidifyFocusFirstElement]="true"
+        >
+          <router-outlet></router-outlet>
+        </div>
+      </main>
+
+      <dlcm-shared-userguide-sidebar-container></dlcm-shared-userguide-sidebar-container>
+    </div>
 
     <dlcm-footer-container [updateVersion]="appStatusService.updateAvailable | async"
                            (updateChange)="appStatusService.reloadApp()"
@@ -111,5 +115,3 @@
   </div>
 </div>
 
-<dlcm-shared-userguide-sidebar-container></dlcm-shared-userguide-sidebar-container>
-<!--TODO HIDE OPENER ON MOBILE AND ADD BUTTON ON MOBILE HEADER-->

src/app/app.component.scss

@@ -84,6 +84,12 @@
         }
       }
     }
+
+    .content-and-sidebar-userguide {
+      display: flex;
+      overflow: hidden;
+      flex: 1;
+    }
   }
 
   .header-sticky-bar {

src/app/shared/components/containers/shared-userguide-sidebar/shared-userguide-sidebar.container.html

@@ -3,7 +3,7 @@
      [matTooltip]="'userguideSidebar.tooltipOpener' | translate"
      (click)="openUserGuideSidebar()"
 >
-  <span class="help">{{'userguideSidebar.labelOpener' | translate}}</span>
+  <mat-icon class="icon-help">help</mat-icon>
 </div>
 
 <div *ngIf="isOpenedUserGuideSidebarObs | async"

src/app/shared/components/containers/shared-userguide-sidebar/shared-userguide-sidebar.container.scss

@@ -8,22 +8,19 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    text-align: center;
     background-color: $primary-color;
     color: $white;
     cursor: pointer;
     transition: background-color 250ms ease-in-out;
 
     &:hover {
-      background-color: black;
+      background-color: $primary-color-darker;
     }
 
-    .help {
-      transform: rotate(-90deg);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      font-weight: bold;
-      width: 16px;
+    .icon-help {
+      @include icon(18px);
+      padding: 2px;
     }
 
     @include respond-to-smaller-than-breakpoint('md') {
@@ -32,7 +29,8 @@
   }
 
   .user-guide-sidebar {
-    position: absolute;
+    position: fixed;
+    top: 0;
     right: 0;
     width: 400px;
     background: white;

src/app/shared/components/presentationals/shared-toc/shared-toc.presentational.html

@@ -6,7 +6,16 @@
         [matTooltip]="getTooltipButton() | translate"
         class="open-button"
 >
-  <mat-icon class="icon">{{isMobile ? "help" : "code"}}</mat-icon>
+  <ng-template [ngIf]="!isMobile"
+               [ngIfElse]="mobileButton"
+  >
+    <fa-icon icon="code"></fa-icon>
+  </ng-template>
+  <ng-template #mobileButton>
+    <mat-icon class="icon"
+    >help
+    </mat-icon>
+  </ng-template>
 </button>
 
 <mat-menu #menu="matMenu"

src/environments/environment.dlcmtest-local.ts

+import {environmentLocal} from "@environments/environment.local";
 import {DlcmEnvironment} from "./environment.defaults.model";
 import {environment as environmentDlcmTest} from "./environment.dlcmtest";
 
@@ -24,4 +25,6 @@ export const environment: DlcmEnvironment = {
     url: "https://e-research-test.unige.ch/dlcm-test/storagion2/",
     linkedTo: "http://dlcm-storagion2:16109/dlcm/archival-storage",
   }],
+
+  ...environmentLocal,
 };

src/sass/abstracts/_mixins.scss

@@ -125,3 +125,10 @@ $breakpoints-media-interval: (
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin icon($size) {
+  font-size: $size;
+  line-height: $size;
+  width: $size;
+  height: $size;
+}
\ No newline at end of file