make secondary navigation collapsable // save collapse status in local storage

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

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

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

@@ -1,20 +1,44 @@
-import React, { ReactNode } from "react";
+import React, { FC, ReactNode } from "react";
+import Icon from "../Icon";
+import { Button } from "../buttons";
+import styled from "styled-components";
 
 type Props = {
   label: string;
   children?: ReactNode;
+  collapsed?: boolean;
+  onCollapse?: (newStatus: boolean) => void;
 };
 
-class Section extends React.Component<Props> {
-  render() {
-    const { label, children } = this.props;
-    return (
-      <div>
-        <p className="menu-label">{label}</p>
-        <ul className="menu-list">{children}</ul>
-      </div>
-    );
+const SmallButton = styled(Button)`
+  height: 1.5rem;
+  width: 1rem;
+  position: absolute;
+  right: 1.5rem;
+  > {
+    outline: none;
   }
-}
+`;
+
+const MenuLabel = styled.p`
+  min-height: 2.5rem;
+`;
+
+const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
+  const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { collapsed: collapsed }));
+  return (
+    <div>
+      <MenuLabel className="menu-label">
+        {collapsed ? "" : label}
+        {onCollapse && (
+          <SmallButton color="info" className="is-small" action={onCollapse}>
+            <Icon name={collapsed ? "arrow-left" : "arrow-right"} color="white" />
+          </SmallButton>
+        )}
+      </MenuLabel>
+      <ul className="menu-list">{childrenWithProps}</ul>
+    </div>
+  );
+};
 
 export default Section;

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

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