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 Icon from "../Icon";
+import React, { FC, ReactNode, useEffect, useState } from "react";
 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}