Flyout menu

apisnetworks · Jul 27, 2020 · 2dde957 · 2dde957
1 parent 016618a
commit 2dde957
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 13 deletions.
diff --git a/scss/apnscp/_bootstrap-overrides.scss b/scss/apnscp/_bootstrap-overrides.scss
@@ -248,4 +248,8 @@ input, button, .dropdown-item {
 
 .text-monospace {
   font-family: $font-family-monospace !important;
+}
+
+.btn-group-addon.dropdown-toggle:empty:after, .input-group-addon.dropdown-toggle:empty:after {
+  margin-left: 0;
 }
diff --git a/scss/apnscp/_header.scss b/scss/apnscp/_header.scss
@@ -122,6 +122,7 @@ a#ui-fa-kb {
   .ui-app-row {
 	  display: flex !important;
 	  flex: 1;
+      flex-grow: 1;
 	  body.ie & {
 		min-height:100vh;
 		/**

diff --git a/scss/apnscp/_menu.scss b/scss/apnscp/_menu.scss
@@ -2,6 +2,7 @@ nav {
   z-index: 3;
   width: 100%;
 }
+
 #ui-side-menu-toggle {
   border: 0 none;
   margin-left: -0.75rem;
@@ -13,26 +14,70 @@ nav {
   }
 }
 
+#ui-full-flex-wrap > .ui-app-row {
+  flex-grow: 1;
+}
+
+body.ui-swap-buttons #ui-full-flex-wrap > .ui-app-row {
+  /** prevent scroll on hide */
+  overflow-x: hidden;
+
+  #ui-nav-container {
+    right: 0;
+    left: auto;
+    transform: translateX(100%);
+
+    &[aria-expanded="true"] {
+      transform: translateX(0);
+    }
+
+    @include media-breakpoint-up(md) {
+      height: auto;
+      transform: translateX(0);
+      &[aria-expanded="false"] {
+        transform: translateX(100%);
+      }
+    }
+  }
+}
+
+#ui-nav-container {
+  will-change: transform;
+}
+
 .navbar-toggler {
   cursor: hand;
 }
+
 #ui-nav-container {
   z-index: 1;
   padding: 0;
-  transition: all ease-in-out 0.15s;
+  transition: $transition-base;
   left: 0;
-
+  transform: translateX(0%);
+  display: block !important;
   &.show {
     width: 100%;
-    @include media-breakpoint-down(sm) {
-      height: 100%;
+  }
+
+  @include media-breakpoint-down(sm) {
+    @if variable-exists(large-dropshadow) {
+      box-shadow: $large-dropshadow;
+    }
+
+    &[aria-expanded="true"] {
+      height: 100% !important;
+      transform: translateX(0);
     }
   }
+
   @include media-breakpoint-down(sm) {
-    overflow: hidden;
-    position: fixed;
-    height: 0;
-    z-index: 100;
+      overflow: hidden;
+      position: absolute;
+      height: 100%;
+      z-index: 100;
+      max-width: $sidemenu-max-width;
+      transform: translateX(-100%);
   }
   background: $header-bg;
   > div.col-12 {
@@ -41,11 +86,15 @@ nav {
     padding-left: 0;
   }
   @include media-breakpoint-up(md) {
-    max-width: $sidemenu-max-width;
-	// avoid UI collision with URL indicator in Chrome while hovering "Logout"
-    #ui-nav.collapse {
-      display: block;
+    overflow: hidden;
+    &[aria-expanded="false"] {
+      flex: 0;
+      width: 0;
+      transform: translateX(-100%);
     }
+    transform: translateX(0);
+    flex: 0 0 100%;
+	// avoid UI collision with URL indicator in Chrome while hovering "Logout"
   }
   @include media-breakpoint-down(sm) {
     #ui-nav {
@@ -356,7 +405,6 @@ nav {
   @extend .fa-desktop;
 }
 
-
 .ui-menu-category-logout:before {
   @extend .fa-sign-out;
 }