AUS-4110 Make sidebar collapsible

src/app/browsepanel/browsepanel.component.html

@@ -2,7 +2,9 @@
 <button class="cesium-button cesium-toolbar-button browse-menu-button" (click)="toggleBrowsePanel()">
     <em class="fa fa-bars" title="Browse featured layers"></em> Browse
 </button>
-
+<button class="sidebar-toggle cesium-button cesium-toolbar-button browse-menu-button" (click)="toggleSidebar()">
+    <em class="fa fa-sliders" title="Browse featured layers"></em> SideBar
+</button>
 <div *ngIf="bShowBrowsePanel" class="browse-menu">
 	<!-- Layer Groups column -->
 	<div class="container text-left browse-menu-col">

src/app/browsepanel/browsepanel.component.scss

@@ -88,4 +88,15 @@
         overflow-y: auto;
     }
 
+    .sidebar-toggle {
+        display: block;
+        position: absolute;
+        left: 5px;
+        top: 40px;
+        height: 32px;
+        width: 160px;
+        z-index: 5;
+        font-size: 20px;
+    }
+
 }

src/app/browsepanel/browsepanel.component.ts

@@ -5,6 +5,7 @@ import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
 import { LayerModel } from '@auscope/portal-core-ui'
 import { LayerManagerService } from 'app/services/ui/layer-manager.service';
 import { FilterService } from 'app/services/filter/filter.service';
+import { SidebarService } from 'app/portal/sidebar.service';
 
 
 @Component({
@@ -25,10 +26,13 @@ export class BrowsePanelComponent implements OnInit {
       private layerManagerService: LayerManagerService,
       private renderStatusService: RenderStatusService,
       private uiLayerModelService: UILayerModelService,
-      private filterService: FilterService
+      private filterService: FilterService,
+      private sidebarService: SidebarService
       ) {
   }
-
+  toggleSidebar() {
+    this.sidebarService.toggleSidebar();
+  }
   /**
    * Initialise Component
    */
@@ -94,6 +98,7 @@ export class BrowsePanelComponent implements OnInit {
     if (!this.panelStayOpen) {
       this.toggleBrowsePanel(false);
     }
+    this.sidebarService.setOpenState(true);
   }
 
   /**

src/app/menupanel/activelayers/activelayerspanel.component.scss

@@ -119,6 +119,17 @@
       margin-left: 12px;
       margin-top:6px;
     }
+    .sidebar {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 0;
+      background-color: #fff;
+      z-index: 1050;
+      overflow-y: auto;
+      transition: width 0.3s ease;
+    }
   }
 
   .activeLayerContent {

src/app/menupanel/activelayers/activelayerspanel.component.ts

@@ -47,6 +47,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
   // User bookmarks (if logged in and stored)
   bookmarks: Bookmark[];
   showingOnlyBookmarkedLayers = false;
+  isSidebarOpen = false;
 
   constructor(private csMapService: CsMapService,
     private uiLayerModelService: UILayerModelService, private layerManagerService: LayerManagerService,
@@ -58,7 +59,17 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
         this.areLayersPolygonFiltered = filterLayers;
       });
     }
+  toggleSidebar() {
+    this.isSidebarOpen = !this.isSidebarOpen;
+    console.log(this.isSidebarOpen);
+  }
+  openSidebar() {
+    this.isSidebarOpen = true;
+  }
 
+  closeSidebar() {
+    this.isSidebarOpen = false;
+  }
   public ngAfterViewInit() {
     const stateId = UtilitiesService.getUrlParameterByName('state');
     const me = this;

src/app/portal/portal.component.html

@@ -21,7 +21,7 @@
 <!-- END navbar -->
 
 <!-- BEGIN sidebar -->
-<nav id="sidebar" class="sidebar slimscroll sidebar-collapse show" style="overflow: auto;" >
+<nav id="sidebar" class="sidebar slimscroll sidebar-collapse show" [ngClass]="{'sidebar-show': isSidebarOpen, 'sidebar-close': !isSidebarOpen}"  style="overflow: auto;" >
     <!-- BEGIN Active Layers -->
     <h5 class="mb-1">
         <label style="font-size: larger;" id="activeLayersLink" for="activeLayersBtn" class="mb-0" title="Layers added to map">
@@ -49,7 +49,7 @@ <h5 class="mb-1">
 <!-- END sidebar -->
 
 <!-- BEGIN #map-area -->
-<div id="map-area" class="map-area">
+<div id="map-area" class="map-area" [ngClass]="{'sidebar-open': isSidebarOpen}">
     <!-- BEGIN map-area-csmap -->
     <div class="map-area-csmap">
         <app-cs-map class="h-100 w-100"></app-cs-map>

src/app/portal/portal.component.ts

@@ -1,5 +1,8 @@
-import { Component } from '@angular/core';
 import { AuthService } from 'app/services/auth/auth.service';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { SidebarService } from './sidebar.service';
 /**
  * Defines the overall app layout
  */
@@ -8,23 +11,41 @@ import { AuthService } from 'app/services/auth/auth.service';
     templateUrl: './portal.component.html',
     styleUrls: ['../../styles.scss']
 })
-export class PortalComponent {
+export class PortalComponent implements OnInit, OnDestroy  {
+  private sidebarSubscription: Subscription;
 
   featuredLayersCheckbox: boolean = true;
+  isSidebarOpen = false;
+
+  constructor(private authService: AuthService, private modalService: BsModalService, private sidebarService: SidebarService
 
-  constructor(private authService: AuthService) {}
+  ) {}
 
   /**
    * Featured layers would not display after logging in due to a strange UI bug, so by binding
    * the panel checkbox to a variable we can set it immediately after display to ensure the
    * panel is always expanded after a page refresh
    */
+  ngOnInit() {
+    this.sidebarSubscription = this.sidebarService.isSidebarOpen$.subscribe(isOpen => {
+      this.isSidebarOpen = isOpen;
+    });
+
+  }
+
+  ngOnDestroy() {
+    if (this.sidebarSubscription) {
+      this.sidebarSubscription.unsubscribe();
+    }
+  }
   ngAfterViewInit() {
     setTimeout(() => {
       this.featuredLayersCheckbox = true;
     }, 10);
   }
-
+  toggleSidebar() {
+    this.isSidebarOpen = !this.isSidebarOpen;
+  }
   /**
    * Check is a user is logged in.
    *
@@ -34,4 +55,4 @@ export class PortalComponent {
     return this.authService.isLoggedIn;
   }
 
-}
+}

src/app/portal/sidebar.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SidebarService {
+  private isSidebarOpenSubject = new BehaviorSubject<boolean>(false);
+  isSidebarOpen$ = this.isSidebarOpenSubject.asObservable();
+
+  public setOpenState(isOpen: boolean): void {
+    this.isSidebarOpenSubject.next(isOpen);
+  }
+
+  toggleSidebar() {
+    const currentState = this.isSidebarOpenSubject.getValue();
+    this.isSidebarOpenSubject.next(!currentState);
+  }
+}

src/styles.scss

@@ -869,3 +869,27 @@ fieldset.show-fieldset-borders-whitebg legend{
     }
 }
 /* End LegendModal dialog */
+.sidebar.sidebar-close {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    background-color: #fff;
+    z-index: 1050;
+    overflow-y: auto;
+    transition: width 0.3s ease;
+}
+
+.sidebar.sidebar-show {
+width: 320px; /* Adjust the width as needed */
+}
+
+.map-area {
+margin-left: 0;
+transition: margin-left 0.3s ease;
+}
+
+.map-area.sidebar-open {
+margin-left: 320px; /* Adjust the margin to match the sidebar width */
+}