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>

1 files changed, 5 insertions, 0 deletions

diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index fd47aec86..a5bb499b4 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .row {
   flex-direction: column;
   width: 100%;
@@ -5,4 +8,6 @@
   & > my-top-menu-dropdown:nth-child(1) {
     flex-grow: 1;
   }
+
+  @include sub-menu-h1;
 }