Improve navigation sub-menu and tabs effects (#2971)

* Improve nav border and colors on active and non-active

* Remove margin-top effect on active nav

* Use opacity / bold instead of color change on nav

* Remove dropdown items label in sub-menu and add a class active

* Position sub-menu to fixed

* Autoclose dropdown sub-menu only on outside click

* Remove open dropdown on hover in sub-menu

* Show reusable h1 for dropdown item in sub-menu

* Put reusable sub-menu h1 styles to mixins

* Add icons to sub-menu dropdown-item h1

* Make all the sub-menu accessible with focus

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

2 files changed, 21 insertions, 0 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 2cefaf73d..eec7b4a56 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -929,3 +929,23 @@
     @content;
   }
 }
+
+@mixin sub-menu-h1 {
+  ::ng-deep h1 {
+    font-size: 1.3rem;
+    border-bottom: 2px solid $grey-background-color;
+    padding-bottom: 15px;
+    margin-bottom: $sub-menu-margin-bottom;
+
+    my-global-icon {
+      margin-right: 10px;
+      vertical-align: bottom;
+      width: 24px;
+      height: 24px;
+    }
+
+    .badge {
+      margin-left: 7px;
+    }
+  }
+}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fc13f6509..7b95bb8cc 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -49,6 +49,7 @@ $menu-width: 240px;
 $menu-lateral-padding: 26px;
 
 $sub-menu-color: #F7F7F7;
+$sub-menu-height: 81px;
 
 $footer-height: 30px;
 $footer-margin: 30px;