Some menu fixes

projects/common/src/fm/components/app/app.component.html

@@ -10,7 +10,7 @@
   <div class="body">
     <router-outlet></router-outlet>
   </div>
-  <fm-side-panel [visible]="menuVisible|async" class="menu">
+  <fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
     <div class="container-fluid">
       <div class="body">
         <div class="d-flex flex-row">

projects/common/src/fm/components/app/app.component.scss

@@ -1,72 +1,77 @@
-//@import "theme.scss";
-
-/* Import Bootstrap & Fonts */
-
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-// custom styles
-
-.btn:focus {
-  box-shadow:none;
-}
-
-.input-group > .form-control:focus {
-  z-index: auto;
-}
-
-.form-control:focus {
-  box-shadow: none;
-  border-color: $input-border-color;
-}
-
-
-/* *** Overall APP Styling can go here ***
-   --------------------------------------------
-   Note: This Component has ViewEncapsulation.None so the styles will bleed out
-
-*/
-
-body { background: #f1f1f1; line-height: 18px; user-select:none;}
-
-.navbar-brand {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
-}
-
-.app {
-  width:100vw;
-  height:100vh;
-}
-
-.app > .navbar {
-  position: absolute;
-  transition: top 0.5s ease-out;
-  top:0;
-  left: 0;
-  right: 0;
-  height: 3.1rem;
-}
-
-.app > .body {
-  position: absolute;
-  transition: top 0.5s ease-out;
-  top: 3.1rem;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow:hidden;
-}
-
-.app.fullscreen > .navbar {
-  top: -3.1rem;
-}
-
-.app.fullscreen > .body {
-  top:0;
-}
-
-.btn-primary, .btn-primary:hover {
-  color: #ffffff;
-}
-
+//@import "theme.scss";
+
+/* Import Bootstrap & Fonts */
+
+@import "~bootstrap/scss/bootstrap.scss";
+
+
+// custom styles
+
+.btn:focus {
+  box-shadow:none;
+}
+
+.input-group > .form-control:focus {
+  z-index: auto;
+}
+
+.form-control:focus {
+  box-shadow: none;
+  border-color: $input-border-color;
+}
+
+
+/* *** Overall APP Styling can go here ***
+   --------------------------------------------
+   Note: This Component has ViewEncapsulation.None so the styles will bleed out
+
+*/
+
+body { background: #f1f1f1; line-height: 18px; user-select:none;}
+
+.navbar-brand {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.app {
+  width:100vw;
+  height:100vh;
+}
+
+.app > .navbar {
+  position: absolute;
+  transition: top 0.5s ease-out;
+  top:0;
+  left: 0;
+  right: 0;
+  height: 3.1rem;
+}
+
+.app > .body {
+  position: absolute;
+  transition: top 0.5s ease-out;
+  top: 3.1rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow:hidden;
+}
+
+.app.fullscreen > .navbar {
+  top: -3.1rem;
+}
+
+.app.fullscreen > .body {
+  top:0;
+}
+
+.btn-primary, .btn-primary:hover {
+  color: #ffffff;
+}
+
+.menu .side-panel {
+  z-index: 100;
+  background-color: rgb(245,245,245);
+}
+

projects/common/src/fm/components/app/app.component.ts

@@ -132,6 +132,10 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(new commonActions.Escape(false,true));
   }  
 
+  handleStopBubble(event: MouseEvent) {
+    event.stopPropagation();
+  }  
+
   handleToggleMenu(event) {
     this.store.dispatch(new commonActions.ToggleMenu());
   }