web: move navbar to tertiary

This was suggested and written by Joachim Schuler in [1].  It moves
the top navbar as a "tertiary" option to the page header.  This bar is
always visible and doesn't roll-up into the "top" area.  This means we
can drop the more complex grid layout that is trying to keep this bar
always visible for some much more simple styling.

As this moves the navbar location the link matching is updated to find
new elements.

[1] https://github.com/patternfly/patternfly-react/issues/7960#issuecomment-1244017295

Change-Id: I4a61a1e246ca4fe0d96f630a06be7f0264782723

1 files changed, 9 insertions, 21 deletions

diff --git a/web/src/index.css b/web/src/index.css
index d5b9a854f..da74a4a24 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -30,6 +30,15 @@ a.refresh {
     height: 40px;
 }
 
+.zuul-page .pf-c-page__header {
+    min-height: 0;
+}
+
+.zuul-page .pf-c-page__main-nav {
+    background-color: var(--pf-global--BackgroundColor--dark-300);
+    padding-top: 0;
+}
+
 .zuul-select-tz {
     /* That's the color PF4 uses for the dropdown items in the navbar */
     color: var(--pf-global--Color--dark-100);
@@ -429,27 +438,6 @@ details.foldable[open] summary::before {
     content: "less";
 }
 
-/* Overwrite PF4 navbar rules to enforce the 'lg' layout of the navbar also for
-   'xl' sized screens. This will keep the navbar stacked (like it was in Zuul
-   before) and prevent PF4 to put all elements in a single line with horizontal
-   scrolling (which would look something like:
-   ZUUL | < Status Projects Jobs Labels No... > | API Documentation Tenant */
-@media screen and (min-width: 1200px) {
-    .pf-c-page__header-nav {
-        grid-column: 1/-1;
-        grid-row: 2/3;
-    }
-
-    .pf-c-page {
-        --pf-c-page__header-nav--PaddingRight: var(
-            --pf-c-page__header-nav--lg--PaddingRight
-        );
-        --pf-c-page__header-nav--PaddingLeft: var(
-            --pf-c-page__header-nav--lg--PaddingLeft
-        );
-    }
-}
-
 /* The box size calculation compared to the text size seems off, but
    this looks better */
 .zuul-job-graph text {