Fix navbar at the top of the page (#2128)

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))

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

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 />;
   }

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) {

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

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>

scm-ui/ui-webapp/src/containers/NavigationBar.tsx

@@ -116,7 +116,8 @@ const NavigationBar: FC<Props> = ({ links }) => {
   }, [burgerActive]);
 
   return (
-    <StyledNavBar className="navbar mb-0 container" aria-label="main navigation">
+    <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" />
@@ -124,7 +125,7 @@ const NavigationBar: FC<Props> = ({ links }) => {
           <button
             className={classNames("navbar-burger", { "is-active": burgerActive })}
             aria-expanded="true"
-          onClick={() => setBurgerActive(active => !active)}
+            onClick={() => setBurgerActive((active) => !active)}
             aria-label={t("primary-navigation.navbarBurger")}
           >
             <span aria-hidden="true" />
@@ -146,6 +147,7 @@ const NavigationBar: FC<Props> = ({ links }) => {
             <LoginButton burgerMode={burgerActive} links={links} />
           </div>
         </StyledMenuBar>
+      </div>
     </StyledNavBar>
   );
 };