Prepare atlas4 release (#280)

* fix:  hide-desktop being forced on profile-tablet

* allow secondary color for topbar with sidebar menu

Author: gjulivan

packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-left.png

@@ -209,12 +209,16 @@
             display: none #{$important-helpers-value};
         }
     }
+
+    // force hide everything that should be hidden only on mid-size screen
+    // to be also hidden on tablet with big screen width.
     .profile-tablet .hide-tablet {
         display: none #{$important-helpers-value};
     }
 
     @media (min-width: $screen-lg) {
-        .hide-desktop {
+        // due to force hidden, this is needed to only be hidden on desktop with profile-desktop.
+        .profile-desktop .hide-desktop {
             display: none #{$important-helpers-value};
         }
     }

packages/atlas/e2e/__screenshots__/atlasAllPages.spec.ts/tablet-split-right.png

@@ -71,6 +71,11 @@
             background: var(--navtopbar-bg);
             border-bottom: var(--navtopbar-border-bottom);
 
+            // allow secondary color for different type of navbar
+            &.topbar-secondary{
+                background: var(--navtopbar-bg-secondary, --navtopbar-bg);
+            }
+
             // Topbar Content
             .topbar-content {
                 display: flex;

packages/atlas/src/themesource/atlas_core/web/core/helpers/_helper-classes.scss

@@ -176,6 +176,7 @@
   --navtopbar-glyph-size: 1.2em;
 
   --navtopbar-bg: var(--topbar-bg);
+  --navtopbar-bg-secondary: transparent;
   --navtopbar-bg-hover: var(--navigation-bg-hover);
   --navtopbar-bg-active: var(--navigation-bg-active);
   --navtopbar-color: var(--navigation-color);