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, 14 insertions, 5 deletions

diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 0ad57d897..b9fef9fce 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -30,16 +30,25 @@ $nav-link-height: 40px;
     padding: 0 30px !important;
     font-size: 15px;
 
+    border: $border-width $border-type transparent;
+
+    span {
+      border-bottom: 2px solid transparent;
+    }
+
     &.active {
-      border: $border-width $border-type $border-color;
-      border-bottom: none;
+      border-color: $border-color;
+      border-bottom-color: transparent;
       background-color: pvar(--submenuColor) !important;
 
       span {
-        border-bottom: 2px solid pvar(--mainColor);
-        font-weight: $font-bold;
+        border-bottom-color: pvar(--mainColor);
       }
     }
+
+    &:hover:not(.active) {
+      border-color: transparent;
+    }
   }
 }
 
@@ -71,7 +80,7 @@ $nav-link-height: 40px;
 
     /* Hide active tab style to not have a moving tab effect */
     a.nav-link.active {
-      border: none;
+      border-color: transparent;
       background-color: pvar(--mainBackgroundColor) !important;
     }
   }