fold/deploy sidebar

src/app/app.component.html

 <div class="container">
-    <div class="container-appDragScroll" appDragScroll appMouseWheelZoom [scenario]="scenario">
+    <div class="container-appDragScroll" [ngClass]="siderFolded ? 'siderFolded' : ''" appDragScroll appMouseWheelZoom [scenario]="scenario">
         <div class="container-appMouseWheelZoom">
 
             <div class="container-scenario-main">
@@ -116,7 +116,12 @@
         </div>
     </div>
 
-    <div class="container-sider">
+    <div class="container-sider" [ngClass]="siderFolded ? 'siderFolded' : ''">
+        <div class="container-sider-deploy" (click)="siderFolded = !siderFolded; minimapService.reset()"
+        [matTooltip]="siderFolded ? translate.instant('siderDeploy_tooltip') : translate.instant('siderFold_tooltip')"
+        matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
+            <mat-icon fontIcon="arrow_forward" [ngClass]="siderFolded ? 'siderFolded' : ''"></mat-icon>
+        </div>
         <div class="container-sider-title">{{getSiderTitle()}}</div>
         <div class="container-sider-elements">
             <app-rewards class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" [role]="pieceDetailsService.parentAsRole()" *ngIf="pieceDetailsService.pieceIsTask()" [scenario]="scenario"></app-rewards>
@@ -130,7 +135,7 @@
         
     </div>
 
-    <div class="container-settings-button">
+    <div class="container-settings-button" [ngClass]="siderFolded ? 'siderFolded' : ''">
         <button mat-mini-fab color="white" [matMenuTriggerFor]="settingsMenu"            
         [matTooltip]="translate.instant('settingsMenu_tooltip')"
         matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
@@ -199,8 +204,8 @@
         </mat-menu>
     </div>
 
-    <div class="container-minimap"></div>
-    <div class="container-zoom">
+    <div class="container-minimap" [ngClass]="siderFolded ? 'siderFolded' : ''"></div>
+    <div class="container-zoom" [ngClass]="siderFolded ? 'siderFolded' : ''">
         <button mat-mini-fab color="white" (click)="zoomIn()"
         [matTooltip]="translate.instant('zoomIn_tooltip')"
         matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="zoom_in"></mat-icon></button>

src/app/app.component.scss

@@ -17,6 +17,11 @@
         -ms-overflow-style: none;
         scrollbar-width: none;
         user-select: none;
+        transition: width 0.5s ease;
+    }
+
+    &-appDragScroll.siderFolded {
+        width: 100%;
     }
 
     &-appDragScroll::-webkit-scrollbar {
@@ -136,6 +141,10 @@
         }
     }
 
+    &-sider.siderFolded {
+        right: -321px;
+    }
+
     &-sider {
         height: 100%;
         width: 340px;
@@ -145,9 +154,33 @@
         top: 0;
         z-index: 5;
         box-shadow: -6px 0px 16px rgba(0, 0, 0, 0.3);
+        transition: right 0.5s ease;
+
+        &-deploy {
+            position: absolute;
+            z-index: 10;
+            width: 45px;
+            height: 45px;
+            left: -20px;
+            display: flex;
+            justify-content: center;
+            border-radius: 50%;
+            background-color: #e3e3e3;
+            box-shadow: -13px 4px 15px rgba(0, 0, 0, 0.3);
+            cursor: pointer;
+
+            mat-icon {
+                margin-top: 10px;
+                transition: transform 0.5s ease;
+            }
+
+            mat-icon.siderFolded {
+                transform: rotateZ(180deg);
+            }
+        }
 
         &-title {
-            height: 5%;
+            height: 45px;
             border-bottom: solid #8f8f8f 0.5px;
             font-size: 20px;
             width: 340px;
@@ -177,16 +210,23 @@
     }
 
     &-settings {
+
         &-button {
             position: fixed;
-            right: 360px;
+            right: 375px;
+            top: 0;
             z-index: 5;
+            transition: right 0.5s ease;
 
             button {
-                width: 50px;
-                height: 50px;
+                width: 45px;
+                height: 45px;
             }
         }
+
+        &-button.siderFolded {
+            right: 55px;
+        }
     }
 
     &-zoom {
@@ -198,10 +238,11 @@
         flex-direction: column;
         justify-content: space-between;
         z-index: 5;
+        transition: right 0.5s ease;
 
         button {
-            width: 50px;
-            height: 50px;
+            width: 45px;
+            height: 45px;
 
             mat-icon {
                 transform: scale(1.2);
@@ -209,6 +250,10 @@
         }
     }
 
+    &-zoom.siderFolded {
+        right: 260px;
+    }
+
     &-minimap {
         position: fixed;
         height: 200px;
@@ -221,6 +266,11 @@
         bottom: 25px;
         right: 360px;
         overflow: scroll;
+        transition: right 0.5s ease;
+    }
+
+    &-minimap.siderFolded {
+        right: 40px;
     }
 
     &-tutorial {

src/app/app.component.ts

@@ -53,6 +53,7 @@ export class AppComponent {
   scenario: Scenario = new Scenario();
   @ViewChild('fileInput') fileInput: any;
   selectedLang: string = 'en';
+  siderFolded: boolean = false;
 
   constructor(private cdr: ChangeDetectorRef, private http: HttpClient, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService,
     private elementRef: ElementRef, private zoomService: ZoomService, private dialog: MatDialog, private titleService: Title,

src/assets/lang/en.json

@@ -30,6 +30,8 @@
     "lang_tooltip": "Change the language.",
     "legal_label": "Credits & Legal notices",
     "legal_tooltip": "Consult credits and legal notices",
+    "siderFold_tooltip": "Fold sidebar",
+    "siderDeploy_tooltip": "Deploy sidebar",
 
     "snackbar_identifier": "Attention, this identifier is already used in this Role.",
     "snackbar_loading_fail": "File upload failed.",

src/assets/lang/fr.json

@@ -30,6 +30,8 @@
     "lang_tooltip": "Changer la langue.",
     "legal_label": "Crédits & Mentions légales",
     "legal_tooltip": "Consulter les crédits et mentions légales",
+    "siderFold_tooltip": "Replier la barre latérale",
+    "siderDeploy_tooltip": "Déplier la barre latérale",
 
     "snackbar_identifier": "Attention, cet identifiant est déjà utilisé dans ce Rôle",
     "snackbar_loading_fail": "Chargement du fichier échoué",