make repository navigation fixed // add title for collapsed navigation items

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

@@ -11,6 +11,7 @@ type Props = {
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
   collapsed: boolean;
+  title?: string;
 };
 
 class NavLink extends React.Component<Props> {
@@ -24,7 +25,7 @@ class NavLink extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, icon, label, collapsed } = this.props;
+    const { to, icon, label, collapsed, title } = this.props;
 
     let showIcon = null;
     if (icon) {
@@ -36,7 +37,7 @@ class NavLink extends React.Component<Props> {
     }
 
     return (
-      <li>
+      <li title={collapsed ? title : undefined}>
         <Link
           className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
           to={to}

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

@@ -1,5 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
-import Icon from "../Icon";
 import { Button } from "../buttons";
 import styled from "styled-components";
 
@@ -10,14 +9,17 @@ type Props = {
   onCollapse?: (newStatus: boolean) => void;
 };
 
+const SectionContainer = styled.div`
+  position: ${props => (props.scrollPositionY > 210 ? "fixed" : "absolute")};
+  top: ${props => props.scrollPositionY > 210 && "4.5rem"};
+  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
+`;
+
 const SmallButton = styled(Button)`
   height: 1.5rem;
   width: 1rem;
   position: absolute;
   right: 1.5rem;
-  > {
-    outline: none;
-  }
 `;
 
 const MenuLabel = styled.p`
@@ -25,19 +27,31 @@ const MenuLabel = styled.p`
 `;
 
 const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
+  const [scrollPositionY, setScrollPositionY] = useState(0);
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => setScrollPositionY(window.pageYOffset));
+
+    return () => {
+      window.removeEventListener("scroll", () => setScrollPositionY(window.pageYOffset));
+    };
+  }, []);
+
   const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { collapsed: collapsed }));
+  const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
+
   return (
-    <div>
+    <SectionContainer collapsed={collapsed} scrollPositionY={scrollPositionY}>
       <MenuLabel className="menu-label">
         {collapsed ? "" : label}
         {onCollapse && (
           <SmallButton color="info" className="is-small" action={onCollapse}>
-            <Icon name={collapsed ? "arrow-left" : "arrow-right"} color="white" />
+            {arrowIcon}
           </SmallButton>
         )}
       </MenuLabel>
       <ul className="menu-list">{childrenWithProps}</ul>
-    </div>
+    </SectionContainer>
   );
 };
 

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

@@ -11,6 +11,7 @@ type Props = {
   children?: ReactNode;
   collapsed?: boolean;
   onCollapsed?: (newStatus: boolean) => void;
+  title?: string
 };
 
 class SubNavigation extends React.Component<Props> {
@@ -24,7 +25,7 @@ class SubNavigation extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, icon, label, collapsed } = this.props;
+    const { to, icon, label, collapsed, title } = this.props;
 
     let defaultIcon = "fas fa-cog";
     if (icon) {
@@ -37,7 +38,7 @@ class SubNavigation extends React.Component<Props> {
     }
 
     return (
-      <li>
+      <li title={collapsed ? title : undefined}>
         <Link
           className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
           to={to}

scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx

@@ -10,6 +10,7 @@ type Props = {
   activeWhenMatch?: (route: any) => boolean;
   activeOnlyWhenExact: boolean;
   icon?: string;
+  title?: string;
 };
 
 /**

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

@@ -209,6 +209,7 @@ class RepositoryRoot extends React.Component<Props, State> {
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
                   label={t("repositoryRoot.menu.informationNavLink")}
+                  title={t("repositoryRoot.menu.informationNavLink")}
                 />
                 <RepositoryNavLink
                   repository={repository}
@@ -218,6 +219,7 @@ class RepositoryRoot extends React.Component<Props, State> {
                   label={t("repositoryRoot.menu.branchesNavLink")}
                   activeWhenMatch={this.matchesBranches}
                   activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.branchesNavLink")}
                 />
                 <RepositoryNavLink
                   repository={repository}
@@ -227,12 +229,14 @@ class RepositoryRoot extends React.Component<Props, State> {
                   label={t("repositoryRoot.menu.sourcesNavLink")}
                   activeWhenMatch={this.matchesCode}
                   activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.sourcesNavLink")}
                 />
                 <ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
                 <SubNavigation
                   to={`${url}/settings/general`}
                   label={t("repositoryRoot.menu.settingsNavLink")}
                   onCollapsed={() => this.onCollapse(false)}
+                  title={t("repositoryRoot.menu.settingsNavLink")}
                 >
                   <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
                   <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />

scm-ui/ui-webapp/src/repos/modules/repos.ts

@@ -442,11 +442,11 @@ export function getPermissionsLink(state: object, namespace: string, name: strin
   return repo && repo._links ? repo._links.permissions.href : undefined;
 }
 
-const REPOSITORY_NAVIGATION_COLLAPSED = "repository-menu-collapsed";
+const REPOSITORY_MENU_COLLAPSED = "repository-menu-collapsed";
 
 export function isRepositoryMenuCollapsed() {
-  return localStorage.getItem(REPOSITORY_NAVIGATION_COLLAPSED) === "true";
+  return localStorage.getItem(REPOSITORY_MENU_COLLAPSED) === "true";
 }
-export function switchRepositoryMenuCollapsed(newStatus: boolean) {
+export function switchRepositoryMenuCollapsed(status: boolean) {
-  localStorage.setItem(REPOSITORY_NAVIGATION_COLLAPSED, String(newStatus));
+  localStorage.setItem(REPOSITORY_MENU_COLLAPSED, String(status));
 }