From 33f7dd994ae2def5bcec3a55f0d981de228f6efd Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 11 Oct 2022 16:01:22 +0200
Subject: [PATCH] Fix navbar at the top of the page (#2128)

---
 gradle/changelog/fixted_navbar.yaml           |  2 +
 .../src/__snapshots__/storyshots.test.ts.snap |  8 +--
 scm-ui/ui-components/src/layout/Header.tsx    |  6 +-
 .../src/navigation/SecondaryNavigation.tsx    |  2 +-
 scm-ui/ui-styles/src/components/_main.scss    |  7 ++-
 scm-ui/ui-webapp/src/containers/App.tsx       |  3 +-
 .../src/containers/NavigationBar.tsx          | 58 ++++++++++---------
 7 files changed, 46 insertions(+), 40 deletions(-)
 create mode 100644 gradle/changelog/fixted_navbar.yaml

diff --git a/gradle/changelog/fixted_navbar.yaml b/gradle/changelog/fixted_navbar.yaml
new file mode 100644
index 0000000000..0eaa2ad02a
--- /dev/null
+++ b/gradle/changelog/fixted_navbar.yaml
@@ -0,0 +1,2 @@
+- type: changed
+  description: Fix navbar at the top of the page ([#2128](https://github.com/scm-manager/scm-manager/pull/2128))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 05b9ffff91..298169fdf1 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -71458,7 +71458,7 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
@@ -71520,7 +71520,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
@@ -71582,7 +71582,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
@@ -71670,7 +71670,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
diff --git a/scm-ui/ui-components/src/layout/Header.tsx b/scm-ui/ui-components/src/layout/Header.tsx
index c7020e5998..2b603dc42e 100644
--- a/scm-ui/ui-components/src/layout/Header.tsx
+++ b/scm-ui/ui-components/src/layout/Header.tsx
@@ -28,10 +28,6 @@ type Props = {
   authenticated?: boolean;
 };
 
-const SmallHeader: FC = ({ children }) => {
-  return <div className="has-scm-background">{children}</div>;
-};
-
 const LargeHeader: FC = () => {
   return (
     <div className="hero has-scm-background is-small">
@@ -50,7 +46,7 @@ const LargeHeader: FC = () => {
 
 const Header: FC<Props> = ({ authenticated, children }) => {
   if (authenticated) {
-    return <SmallHeader>{children}</SmallHeader>;
+    return <>{children}</>;
   } else {
     return <LargeHeader />;
   }
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index 58051e612a..afd51eddc1 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -40,7 +40,7 @@ type CollapsedProps = {
 const SectionContainer = styled.aside`
   position: sticky;
   position: -webkit-sticky; /* Safari */
-  top: 2rem;
+  top: 5rem;
   width: 100%;
 
   @media (max-height: 900px) {
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index ed647f8c8e..78d5a37d95 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -490,6 +490,11 @@ ul.is-separated {
   }
 }
 
+// navbar
+.has-navbar-fixed-top {
+  padding-top: $navbar-height;
+}
+
 // card columns for repo and plugins overview
 .card-columns {
   .column {
@@ -904,7 +909,7 @@ form .field:not(.is-grouped) {
 }
 
 .is-vertical-align-middle {
-  vertical-align: middle !important
+  vertical-align: middle !important;
 }
 
 // radio
diff --git a/scm-ui/ui-webapp/src/containers/App.tsx b/scm-ui/ui-webapp/src/containers/App.tsx
index 99da0cd538..3c274564bf 100644
--- a/scm-ui/ui-webapp/src/containers/App.tsx
+++ b/scm-ui/ui-webapp/src/containers/App.tsx
@@ -25,6 +25,7 @@ import React, { FC } from "react";
 import Main from "./Main";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import { useIndex, useSubject } from "@scm-manager/ui-api";
 import { ErrorPage, Footer, Header, Loading } from "@scm-manager/ui-components";
 import { binder } from "@scm-manager/ui-extensions";
@@ -90,7 +91,7 @@ const App: FC = () => {
   }
 
   return (
-    <AppWrapper className="App">
+    <AppWrapper className={classNames("App", { "has-navbar-fixed-top": authenticatedOrAnonymous})}>
       <Header authenticated={authenticatedOrAnonymous}>
         <NavigationBar links={index._links} />
       </Header>
diff --git a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
index 4209568130..d64ec6498d 100644
--- a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
+++ b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
@@ -116,36 +116,38 @@ const NavigationBar: FC<Props> = ({ links }) => {
   }, [burgerActive]);
 
   return (
-    <StyledNavBar className="navbar mb-0 container" aria-label="main navigation">
-      <div className="navbar-brand">
-        <LogoItem className="navbar-item logo">
-          <Logo withText={false} className="image is-32x32" />
-        </LogoItem>
-        <button
-          className={classNames("navbar-burger", { "is-active": burgerActive })}
-          aria-expanded="true"
-          onClick={() => setBurgerActive(active => !active)}
-          aria-label={t("primary-navigation.navbarBurger")}
-        >
-          <span aria-hidden="true" />
-          <span aria-hidden="true" />
-          <span aria-hidden="true" />
-        </button>
-      </div>
-      <div className="is-active navbar-header-actions">
-        <Alerts className="navbar-item" />
-        <OmniSearch links={links} />
-        <Notifications className="navbar-item" />
-      </div>
-      <StyledMenuBar className={classNames("navbar-menu", { "is-active": burgerActive })}>
-        <div className="navbar-start">
-          <PrimaryNavigation links={links} />
+    <StyledNavBar className="navbar is-fixed-top has-scm-background" aria-label="main navigation">
+      <div className="container">
+        <div className="navbar-brand">
+          <LogoItem className="navbar-item logo">
+            <Logo withText={false} className="image is-32x32" />
+          </LogoItem>
+          <button
+            className={classNames("navbar-burger", { "is-active": burgerActive })}
+            aria-expanded="true"
+            onClick={() => setBurgerActive((active) => !active)}
+            aria-label={t("primary-navigation.navbarBurger")}
+          >
+            <span aria-hidden="true" />
+            <span aria-hidden="true" />
+            <span aria-hidden="true" />
+          </button>
         </div>
-        <div className="navbar-end">
-          <LogoutButton burgerMode={burgerActive} links={links} />
-          <LoginButton burgerMode={burgerActive} links={links} />
+        <div className="is-active navbar-header-actions">
+          <Alerts className="navbar-item" />
+          <OmniSearch links={links} />
+          <Notifications className="navbar-item" />
         </div>
-      </StyledMenuBar>
+        <StyledMenuBar className={classNames("navbar-menu", { "is-active": burgerActive })}>
+          <div className="navbar-start">
+            <PrimaryNavigation links={links} />
+          </div>
+          <div className="navbar-end">
+            <LogoutButton burgerMode={burgerActive} links={links} />
+            <LoginButton burgerMode={burgerActive} links={links} />
+          </div>
+        </StyledMenuBar>
+      </div>
     </StyledNavBar>
   );
 };