use position sticky to avoid css glitches // cleanup

scm-ui/ui-components/src/navigation/Section.tsx

@@ -1,35 +1,30 @@
-import React, { FC, ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
 import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
 import { matchPath, useLocation } from "react-router-dom";
+import { isMenuCollapsed, MenuContext } from "./MenuContext";
 
 type Props = {
   label: string;
   children: ReactElement[];
   collapsed: boolean;
   onCollapse?: (newStatus: boolean) => void;
-  scrollTransitionAt?: number;
 };
 
 type CollapsedProps = {
   collapsed: boolean;
 };
 
-type PositionProps = CollapsedProps & {
-  scrollPositionY: number;
-  scrollTransitionAt: number;
-};
-
-const SectionContainer = styled.div<PositionProps>`
-  position: ${props =>
-    props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 ? "fixed" : "inherit"};
-  top: ${props => props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 && "2rem"};
+const SectionContainer = styled.aside<CollapsedProps>`
+  position: sticky;
+  position: -webkit-sticky; /* Safari */
+  top: 2rem;
   width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
 `;
 
 const Icon = styled.i<CollapsedProps>`
-  padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")}
-  padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.3rem")};
+  padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
+  padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.4rem")};
   height: 1.5rem;
   font-size: 24px;
   margin-top: -0.75rem;
@@ -40,8 +35,48 @@ const MenuLabel = styled.p<CollapsedProps>`
   display: flex;
   align-items: center;
   justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
+  cursor: pointer;
 `;
 
+const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
+  const location = useLocation();
+  const menuContext = useContext(MenuContext);
+
+  const subNavActive = isSubNavigationActive(children, location.pathname);
+  const isCollapsed = collapsed && !subNavActive;
+
+  useEffect(() => {
+    if (isMenuCollapsed()) {
+      menuContext.setMenuCollapsed(!subNavActive);
+    }
+  }, [subNavActive]);
+
+  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
+    React.cloneElement(child, { collapsed: isCollapsed })
+  );
+  const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
+
+  return (
+    <SectionContainer className="menu" collapsed={isCollapsed}>
+      <div>
+        <MenuLabel
+          className="menu-label"
+          collapsed={isCollapsed}
+          onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
+        >
+          {onCollapse && !subNavActive && (
+            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
+              {arrowIcon}
+            </Icon>
+          )}
+          {isCollapsed ? "" : label}
+        </MenuLabel>
+        <ul className="menu-list">{childrenWithProps}</ul>
+      </div>
+    </SectionContainer>
+  );
+};
+
 const createParentPath = (to: string) => {
   const parents = to.split("/");
   parents.splice(-1, 1);
@@ -72,47 +107,4 @@ const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
   return match != null;
 };
 
-const Section: FC<Props> = ({ label, children, collapsed = false, onCollapse, scrollTransitionAt }) => {
-  const [scrollPositionY, setScrollPositionY] = useState(0);
-  const location = useLocation();
-
-  useEffect(() => {
-    window.addEventListener("scroll", () => setScrollPositionY(window.pageYOffset));
-
-    return () => {
-      window.removeEventListener("scroll", () => setScrollPositionY(window.pageYOffset));
-    };
-  }, []);
-
-  const subNavActive = isSubNavigationActive(children, location.pathname);
-  const isCollapsed = collapsed && !subNavActive;
-
-  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
-    React.cloneElement(child, { collapsed: isCollapsed })
-  );
-  const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
-
-  return (
-    <SectionContainer
-      collapsed={isCollapsed}
-      scrollPositionY={onCollapse ? scrollPositionY : 0}
-      scrollTransitionAt={scrollTransitionAt ? scrollTransitionAt : 250}
-    >
-      <MenuLabel
-        className="menu-label"
-        collapsed={isCollapsed}
-        onClick={onCollapse ? () => onCollapse(!isCollapsed) : undefined}
-      >
-        {onCollapse && !subNavActive && (
-          <Icon color="info" className="is-medium" collapsed={isCollapsed}>
-            {arrowIcon}
-          </Icon>
-        )}
-        {isCollapsed ? "" : label}
-      </MenuLabel>
-      <ul className="menu-list">{childrenWithProps}</ul>
-    </SectionContainer>
-  );
-};
-
 export default Section;

scm-ui/ui-webapp/src/admin/containers/Admin.tsx

@@ -123,12 +123,10 @@ class Admin extends React.Component<Props, State> {
               </Switch>
             </div>
             <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-              <Navigation>
               <Section
                 label={t("admin.menu.navigationLabel")}
                 onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
                 collapsed={menuCollapsed}
-                  scrollTransitionAt={220}
               >
                 <NavLink
                   to={`${url}/info`}
@@ -169,7 +167,6 @@ class Admin extends React.Component<Props, State> {
                   <ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
               </Section>
-              </Navigation>
             </div>
           </div>
         </Page>

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

@@ -92,7 +92,6 @@ class Profile extends React.Component<Props, State> {
               <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
             </div>
             <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-              <Navigation>
               <Section
                 label={t("profile.navigationLabel")}
                 onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
@@ -113,7 +112,6 @@ class Profile extends React.Component<Props, State> {
                   <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
               </Section>
-              </Navigation>
             </div>
           </div>
         </Page>

scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx

@@ -103,7 +103,6 @@ class SingleGroup extends React.Component<Props, State> {
               <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
             </div>
             <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-              <Navigation>
               <Section
                 label={t("singleGroup.menu.navigationLabel")}
                 onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
@@ -126,7 +125,6 @@ class SingleGroup extends React.Component<Props, State> {
                   <ExtensionPoint name="group.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
               </Section>
-              </Navigation>
             </div>
           </div>
         </Page>

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -7,7 +7,6 @@ import { Repository } from "@scm-manager/ui-types";
 import {
   ErrorPage,
   Loading,
-  Navigation,
   NavLink,
   Page,
   Section,
@@ -200,12 +199,10 @@ class RepositoryRoot extends React.Component<Props, State> {
               </Switch>
             </div>
             <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-              <Navigation>
               <Section
                 label={t("repositoryRoot.menu.navigationLabel")}
                 onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
                 collapsed={menuCollapsed}
-                  scrollTransitionAt={250}
               >
                 <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                 <NavLink
@@ -245,7 +242,6 @@ class RepositoryRoot extends React.Component<Props, State> {
                   <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
               </Section>
-              </Navigation>
             </div>
           </div>
         </Page>

scm-ui/ui-webapp/src/users/containers/SingleUser.tsx

@@ -8,7 +8,6 @@ import {
   isMenuCollapsed,
   Loading,
   MenuContext,
-  Navigation,
   NavLink,
   Page,
   Section,
@@ -104,7 +103,6 @@ class SingleUser extends React.Component<Props, State> {
               <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
             </div>
             <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-              <Navigation>
               <Section
                 label={t("singleUser.menu.navigationLabel")}
                 onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
@@ -127,7 +125,6 @@ class SingleUser extends React.Component<Props, State> {
                   <ExtensionPoint name="user.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
               </Section>
-              </Navigation>
             </div>
           </div>
         </Page>