Some menu fixes

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,14 +1,14 @@
-<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
-  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
-    <i class="fa fa-chevron-left" aria-hidden="true"></i>
-  </div>
-  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
-    <div></div>
-     <span class="rounded"></span>
-  </div>
-  <div class="content">
-    <ng-content>
-
-    </ng-content>
-  </div>
-</div>
+<div class="side-panel hidden collapsed left" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
+  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+  </div>
+  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
+    <div></div>
+     <span class="rounded"></span>
+  </div>
+  <div class="content">
+    <ng-content>
+
+    </ng-content>
+  </div>
+</div>

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -1,100 +1,113 @@
-.side-panel {
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-  left: 0px;
-  top:50%;
-  transition: left 0.3s, top 0.3s;
-  background-color: white;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-}
-
-.side-panel.resizing {
-  transition: left 0s, top 0s;
-}
-
-.side-panel.collapsed {
-  left:-22rem;
-}
-
-.arrow {
-  position: absolute;
-  top: 1rem;
-  left: 100%;  
-  background-color: inherit;
-  cursor:pointer;
-}
-
-.arrow i {
-  transition: transform 0.3s;
-}
-
-.collapsed .arrow i {
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.side-panel.hidden {
-  top:100%;
-}
-
-.content {
-  height:100% ;
-  width:100%;
-  overflow:hidden;
-  overflow-y:auto;
-  position: relative;
-  z-index: 1;
-  background-color: rgb(255,255,255);
-}
-
-.resizegrip {
-  height:2rem;
-  line-height: 1rem;
-  display: none;
-  text-align: center;
-  position: relative;
-  z-index: 2; 
-}
-div.resizegrip > div {
-  position: absolute;
-  top:0px;
-  height: 1rem;
-  width: 100%;
-  background-color: rgb(255,255,255);
-}
-
-div.resizegrip > span {
-  position: relative;
-  display: inline-block;
-  height:0.3rem;
-  width:4rem;
-  background-color:rgba(0, 0, 0, 0.3);
-  top:-0.3rem;
-}
-
-.resizeable .resizegrip {
-  display:block;
-  
-}
-
-.resizeable .content {
-  height:calc(100% - 1rem);
-  top:-1rem;
-}
-
-@media screen and (min-width:44rem) {
-  .side-panel {
-    top:0px;
-    width: 22rem;
-    height:100%;
-    left:0px;
-  }
-
-  .side-panel.hidden {
-    width: 22rem;
-    left:-24rem;
-    height:100%;
-  }
-
-}
+.side-panel {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  left: 0px;
+  top:50%;
+  transition: left 0.3s, top 0.3s;
+  background-color: white;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.side-panel.resizing {
+  transition: left 0s, top 0s;
+}
+
+.side-panel.collapsed {
+  left:-22rem;
+}
+
+.arrow {
+  position: absolute;
+  top: 1rem;
+  left: 100%;  
+  background-color: inherit;
+  cursor:pointer;
+}
+
+.arrow i {
+  transition: transform 0.3s;
+}
+
+.collapsed .arrow i {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.side-panel.hidden {
+  top:100%;
+}
+
+.content {
+  height:100% ;
+  width:100%;
+  overflow:hidden;
+  overflow-y:auto;
+  position: relative;
+  z-index: 1;
+  background-color: rgb(255,255,255);
+}
+
+.resizegrip {
+  height:2rem;
+  line-height: 1rem;
+  display: none;
+  text-align: center;
+  position: relative;
+  z-index: 2; 
+}
+div.resizegrip > div {
+  position: absolute;
+  top:0px;
+  height: 1rem;
+  width: 100%;
+  background-color: rgb(255,255,255);
+}
+
+div.resizegrip > span {
+  position: relative;
+  display: inline-block;
+  height:0.3rem;
+  width:4rem;
+  background-color:rgba(0, 0, 0, 0.3);
+  top:-0.3rem;
+}
+
+.resizeable .resizegrip {
+  display:block;
+  
+}
+
+.resizeable .content {
+  height:calc(100% - 1rem);
+  top:-1rem;
+}
+
+@media screen and (min-width:44rem) {
+  .side-panel {
+    top:0px;
+    width: 22rem;
+    height:100%;
+    left:0px;
+  }
+
+  .side-panel.hidden {
+    width: 22rem;
+    left:-24rem;
+    height:100%;
+  }  
+}
+
+
+.side-panel.left {
+  top:0px;
+  width: 22rem;
+  height:100%;
+  left:0px;
+}
+
+.side-panel.left.hidden {
+  width: 22rem;
+  left:-24rem;
+  height:100%;
+}  

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -12,6 +12,7 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
+  @Input() public left: boolean = false;
   @ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
@@ -32,7 +33,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   setTop() {
-    this.mobile = this.checkMobile();
+    this.mobile = this.checkMobile() && ! this.left;
     this.resizeTop = this.mobile?50:0;
     this.top =  (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
   }