Merge pull request #1034 from scm-manager/feature/ui_utilization

ui utilization

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - New footer design
 - Update jgit to version 5.6.1.202002131546-r-scm1
 - Update svnkit to version 1.10.1-scm1
+- Secondary navigation collapsable
 
 ### Fixed
 - Modification for mercurial repositories with enabled XSRF protection

scm-ui/ui-components/src/navigation/MenuContext.ts

@@ -0,0 +1,15 @@
+import React from "react";
+
+const MENU_COLLAPSED = "secondary-menu-collapsed";
+
+export const MenuContext = React.createContext({
+  menuCollapsed: isMenuCollapsed(),
+  setMenuCollapsed: (collapsed: boolean) => {}
+});
+
+export function isMenuCollapsed() {
+  return localStorage.getItem(MENU_COLLAPSED) === "true";
+}
+export function storeMenuCollapsed(status: boolean) {
+  localStorage.setItem(MENU_COLLAPSED, String(status));
+}

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

@@ -10,6 +10,8 @@ type Props = {
   label: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
+  collapsed?: boolean;
+  title?: string;
 };
 
 class NavLink extends React.Component<Props> {
@@ -23,7 +25,7 @@ class NavLink extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, icon, label } = this.props;
+    const { to, icon, label, collapsed, title } = this.props;
 
     let showIcon = null;
     if (icon) {
@@ -35,10 +37,13 @@ class NavLink extends React.Component<Props> {
     }
 
     return (
-      <li>
+      <li title={collapsed ? title : undefined}>
-        <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/SecondaryNavigation.tsx

@@ -0,0 +1,110 @@
+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;
+};
+
+type CollapsedProps = {
+  collapsed: boolean;
+};
+
+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.4rem")};
+  height: 1.5rem;
+  font-size: 24px;
+  margin-top: -0.75rem;
+`;
+
+const MenuLabel = styled.p<CollapsedProps>`
+  height: 3.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
+  cursor: pointer;
+`;
+
+const SecondaryNavigation: 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);
+  return parents.join("/");
+};
+
+const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
+  const childArray = React.Children.toArray(children);
+  const match = childArray
+    .filter(child => {
+      // what about extension points?
+      // @ts-ignore
+      return child.type.name === SubNavigation.name;
+    })
+    .map(child => {
+      // @ts-ignore
+      return child.props;
+    })
+    .find(props => {
+      const path = createParentPath(props.to);
+      const matches = matchPath(url, {
+        path,
+        exact: props.activeOnlyWhenExact as boolean
+      });
+      return matches != null;
+    });
+
+  return match != null;
+};
+
+export default SecondaryNavigation;

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

@@ -0,0 +1,45 @@
+import React, { ReactElement, ReactNode } from "react";
+import { MenuContext } from "./MenuContext";
+import SubNavigation from "./SubNavigation";
+import NavLink from "./NavLink";
+
+type Props = {
+  to: string;
+  icon: string;
+  label: string;
+  title: string;
+  activeWhenMatch?: (route: any) => boolean;
+  activeOnlyWhenExact?: boolean;
+  children?: ReactElement[];
+};
+
+export default class SecondaryNavigationItem extends React.Component<Props> {
+  render() {
+    const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
+    if (children) {
+      return (
+        <MenuContext.Consumer>
+          {({ menuCollapsed }) => (
+            <SubNavigation
+              to={to}
+              icon={icon}
+              label={label}
+              title={title}
+              activeWhenMatch={activeWhenMatch}
+              activeOnlyWhenExact={activeOnlyWhenExact}
+              collapsed={menuCollapsed}
+            >
+              {children}
+            </SubNavigation>
+          )}
+        </MenuContext.Consumer>
+      );
+    } else {
+      return (
+        <MenuContext.Consumer>
+          {({ menuCollapsed }) => <NavLink to={to} icon={icon} label={label} title={title} collapsed={menuCollapsed} />}
+        </MenuContext.Consumer>
+      );
+    }
+  }
+}

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

@@ -1,20 +0,0 @@
-import React, { ReactNode } from "react";
-
-type Props = {
-  label: string;
-  children?: ReactNode;
-};
-
-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>
-    );
-  }
-}
-
-export default Section;

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

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
+import React, { FC, ReactElement, useContext, useEffect } from "react";
-import { Link, Route } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
 import classNames from "classnames";
 
 type Props = {
@@ -8,52 +8,39 @@ type Props = {
   label: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
-  children?: ReactNode;
+  children?: ReactElement[];
+  collapsed?: boolean;
+  title?: string;
 };
 
-class SubNavigation extends React.Component<Props> {
+const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
-  static defaultProps = {
+  const parents = to.split("/");
-    activeOnlyWhenExact: false
+  parents.splice(-1, 1);
-  };
+  const parent = parents.join("/");
 
-  isActive(route: any) {
+  const match = useRouteMatch({
-    const { activeWhenMatch } = this.props;
+    path: parent,
-    return route.match || (activeWhenMatch && activeWhenMatch(route));
+    exact: activeOnlyWhenExact
-  }
+  });
-
-  renderLink = (route: any) => {
-    const { to, icon, label } = this.props;
 
   let defaultIcon = "fas fa-cog";
   if (icon) {
     defaultIcon = icon;
   }
 
-    let children = null;
+  let childrenList = null;
-    if (this.isActive(route)) {
+  if (match && !collapsed) {
-      children = <ul className="sub-menu">{this.props.children}</ul>;
+    childrenList = <ul className="sub-menu">{children}</ul>;
   }
 
   return (
-      <li>
+    <li title={collapsed ? title : undefined}>
-        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+      <Link className={classNames(match != null ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
-          <i className={classNames(defaultIcon, "fa-fw")} /> {label}
+        <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
       </Link>
-        {children}
+      {childrenList}
     </li>
   );
-  };
+};
-
-  render() {
-    const { to, activeOnlyWhenExact } = this.props;
-
-    // removes last part of url
-    const parents = to.split("/");
-    parents.splice(-1, 1);
-    const parent = parents.join("/");
-
-    return <Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} />;
-  }
-}
 
 export default SubNavigation;

scm-ui/ui-components/src/navigation/index.ts

@@ -6,4 +6,6 @@ export { default as Navigation } from "./Navigation";
 export { default as SubNavigation } from "./SubNavigation";
 export { default as PrimaryNavigation } from "./PrimaryNavigation";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
-export { default as Section } from "./Section";
+export { default as SecondaryNavigation } from "./SecondaryNavigation";
+export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
+export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -10,6 +10,8 @@ import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
+import { MenuContext } from "@scm-manager/ui-components";
+import { storeMenuCollapsed } from "../navigation";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -100,10 +102,14 @@ class DiffFile extends React.Component<Props, State> {
     }
   };
 
-  toggleSideBySide = () => {
+  toggleSideBySide = (callback: () => void) => {
-    this.setState(state => ({
+    this.setState(
+      state => ({
         sideBySide: !state.sideBySide
-    }));
+      }),
+      () => callback()
+    );
+    storeMenuCollapsed(true);
   };
 
   setCollapse = (collapsed: boolean) => {
@@ -259,11 +265,15 @@ class DiffFile extends React.Component<Props, State> {
       file.hunks && file.hunks.length > 0 ? (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
+            <MenuContext.Consumer>
+              {({ setMenuCollapsed }) => (
                 <DiffButton
                   icon={sideBySide ? "align-left" : "columns"}
                   tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-              onClick={this.toggleSideBySide}
+                  onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
                 />
+              )}
+            </MenuContext.Consumer>
             {fileControls}
           </ButtonGroup>
         </ButtonWrapper>

scm-ui/ui-webapp/public/locales/de/admin.json

@@ -1,7 +1,7 @@
 {
   "admin": {
     "menu": {
-      "navigationLabel": "Administrations Navigation",
+      "navigationLabel": "Administration",
       "informationNavLink": "Informationen",
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell"

scm-ui/ui-webapp/public/locales/de/commons.json

@@ -61,7 +61,7 @@
     "previous": "Zurück"
   },
   "profile": {
-    "navigationLabel": "Profil Navigation",
+    "navigationLabel": "Profil",
     "informationNavLink": "Information",
     "changePasswordNavLink": "Passwort ändern",
     "settingsNavLink": "Einstellungen",

scm-ui/ui-webapp/public/locales/de/config.json

@@ -1,6 +1,6 @@
 {
   "config": {
-    "navigationLabel": "Administrations Navigation",
+    "navigationLabel": "Administration",
     "title": "Globale Einstellungen",
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Einstellungen Fehler",

scm-ui/ui-webapp/public/locales/de/groups.json

@@ -18,7 +18,7 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Gruppen Fehler",
     "menu": {
-      "navigationLabel": "Gruppen Navigation",
+      "navigationLabel": "Gruppen",
       "informationNavLink": "Informationen",
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell",

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -28,7 +28,7 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Repository Fehler",
     "menu": {
-      "navigationLabel": "Repository Navigation",
+      "navigationLabel": "Repository",
       "informationNavLink": "Informationen",
       "branchesNavLink": "Branches",
       "sourcesNavLink": "Code",

scm-ui/ui-webapp/public/locales/de/users.json

@@ -32,7 +32,7 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Benutzer Fehler",
     "menu": {
-      "navigationLabel": "Benutzer Navigation",
+      "navigationLabel": "Benutzer",
       "informationNavLink": "Informationen",
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell",

scm-ui/ui-webapp/public/locales/en/admin.json

@@ -1,7 +1,7 @@
 {
   "admin": {
     "menu": {
-      "navigationLabel": "Administration Navigation",
+      "navigationLabel": "Administration",
       "informationNavLink": "Information",
       "settingsNavLink": "Settings",
       "generalNavLink": "General"

scm-ui/ui-webapp/public/locales/en/commons.json

@@ -62,7 +62,7 @@
     "previous": "Previous"
   },
   "profile": {
-    "navigationLabel": "Profile Navigation",
+    "navigationLabel": "Profile",
     "informationNavLink": "Information",
     "changePasswordNavLink": "Change password",
     "settingsNavLink": "Settings",

scm-ui/ui-webapp/public/locales/en/config.json

@@ -1,6 +1,6 @@
 {
   "config": {
-    "navigationLabel": "Administration Navigation",
+    "navigationLabel": "Administration",
     "title": "Global Configuration",
     "errorTitle": "Error",
     "errorSubtitle": "Unknown Config Error",

scm-ui/ui-webapp/public/locales/en/groups.json

@@ -18,7 +18,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Unknown group error",
     "menu": {
-      "navigationLabel": "Group Navigation",
+      "navigationLabel": "Group",
       "informationNavLink": "Information",
       "settingsNavLink": "Settings",
       "generalNavLink": "General",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -28,7 +28,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Unknown repository error",
     "menu": {
-      "navigationLabel": "Repository Navigation",
+      "navigationLabel": "Repository",
       "informationNavLink": "Information",
       "branchesNavLink": "Branches",
       "sourcesNavLink": "Code",

scm-ui/ui-webapp/public/locales/en/users.json

@@ -32,7 +32,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Unknown user error",
     "menu": {
-      "navigationLabel": "User Navigation",
+      "navigationLabel": "User",
       "informationNavLink": "Information",
       "settingsNavLink": "Settings",
       "generalNavLink": "General",

scm-ui/ui-webapp/public/locales/es/admin.json

@@ -1,7 +1,7 @@
 {
   "admin": {
     "menu": {
-      "navigationLabel": "Menú de administración",
+      "navigationLabel": "Administración",
       "informationNavLink": "Información",
       "settingsNavLink": "Ajustes",
       "generalNavLink": "General"

scm-ui/ui-webapp/public/locales/es/commons.json

@@ -62,7 +62,7 @@
     "previous": "Anterior"
   },
   "profile": {
-    "navigationLabel": "Menú de sección",
+    "navigationLabel": "Sección",
     "informationNavLink": "Información",
     "changePasswordNavLink": "Cambiar contraseña",
     "settingsNavLink": "Ajustes",

scm-ui/ui-webapp/public/locales/es/config.json

@@ -1,6 +1,6 @@
 {
   "config": {
-    "navigationLabel": "Menú de administración",
+    "navigationLabel": "Administración",
     "title": "Configuración global",
     "errorTitle": "Error",
     "errorSubtitle": "Error de configuración desconocido",

scm-ui/ui-webapp/public/locales/es/groups.json

@@ -18,7 +18,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Error de grupo desconocido",
     "menu": {
-      "navigationLabel": "Menú de grupo",
+      "navigationLabel": "Grupo",
       "informationNavLink": "Información",
       "settingsNavLink": "Ajustes",
       "generalNavLink": "General",

scm-ui/ui-webapp/public/locales/es/repos.json

@@ -28,7 +28,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Error de repositorio desconocido",
     "menu": {
-      "navigationLabel": "Menú de repositorio",
+      "navigationLabel": "Repositorio",
       "informationNavLink": "Información",
       "branchesNavLink": "Ramas",
       "sourcesNavLink": "Código",

scm-ui/ui-webapp/public/locales/es/users.json

@@ -32,7 +32,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Error de usuario desconocido",
     "menu": {
-      "navigationLabel": "Menú de usuario",
+      "navigationLabel": "Usuario",
       "informationNavLink": "Información",
       "settingsNavLink": "Ajustes",
       "generalNavLink": "General",

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

@@ -2,11 +2,18 @@ import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Links } from "@scm-manager/ui-types";
-import { Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation,
+  isMenuCollapsed,
+  MenuContext,
+  storeMenuCollapsed
+} from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
 import PluginsOverview from "../plugins/containers/PluginsOverview";
@@ -15,17 +22,30 @@ import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
     links: Links;
     availablePluginsLink: string;
     installedPluginsLink: string;
+  };
 
-  // context objects
+type State = {
-  match: any;
+  menuCollapsed: boolean;
-  history: History;
 };
 
-class Admin extends React.Component<Props> {
+class Admin extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
+  onCollapseAdminMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       if (url.includes("role")) {
@@ -48,6 +68,7 @@ class Admin extends React.Component<Props> {
 
   render() {
     const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     const url = this.matchedUrl();
     const extensionProps = {
@@ -56,9 +77,12 @@ class Admin extends React.Component<Props> {
     };
 
     return (
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
         <Page>
           <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
               <Switch>
                 <Redirect exact from={url} to={`${url}/info`} />
                 <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -97,15 +121,24 @@ class Admin extends React.Component<Props> {
                 <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
               </Switch>
             </div>
-          <div className="column is-one-quarter">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-            <Navigation>
+              <SecondaryNavigation
-              <Section label={t("admin.menu.navigationLabel")}>
+                label={t("admin.menu.navigationLabel")}
-                <NavLink to={`${url}/info`} icon="fas fa-info-circle" label={t("admin.menu.informationNavLink")} />
+                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}/info`}
+                  icon="fas fa-info-circle"
+                  label={t("admin.menu.informationNavLink")}
+                  title={t("admin.menu.informationNavLink")}
+                />
                 {(availablePluginsLink || installedPluginsLink) && (
                   <SubNavigation
                     to={`${url}/plugins/`}
                     icon="fas fa-puzzle-piece"
                     label={t("plugins.menu.pluginsNavLink")}
+                    title={t("plugins.menu.pluginsNavLink")}
                   >
                     {installedPluginsLink && (
                       <NavLink to={`${url}/plugins/installed/`} label={t("plugins.menu.installedNavLink")} />
@@ -119,19 +152,24 @@ class Admin extends React.Component<Props> {
                   to={`${url}/roles/`}
                   icon="fas fa-user-shield"
                   label={t("repositoryRole.navLink")}
+                  title={t("repositoryRole.navLink")}
                   activeWhenMatch={this.matchesRoles}
                   activeOnlyWhenExact={false}
                 />
                 <ExtensionPoint name="admin.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("admin.menu.settingsNavLink")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("admin.menu.settingsNavLink")}
+                  title={t("admin.menu.settingsNavLink")}
+                >
                   <NavLink to={`${url}/settings/general`} label={t("admin.menu.generalNavLink")} />
                   <ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
+              </SecondaryNavigation>
-            </Navigation>
             </div>
           </div>
         </Page>
+      </MenuContext.Provider>
     );
   }
 }

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

@@ -1,24 +1,49 @@
 import React from "react";
-import { Route, withRouter } from "react-router-dom";
+import { Route, RouteComponentProps, withRouter } from "react-router-dom";
 import { getMe } from "../modules/auth";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
-import { ErrorPage, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  MenuContext,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
     me: Me;
 
     // Context props
     match: any;
+  };
+
+type State = {
+  menuCollapsed: boolean;
 };
-type State = {};
 
 class Profile extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
+  onCollapseProfileMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -34,6 +59,7 @@ class Profile extends React.Component<Props, State> {
     const url = this.matchedUrl();
 
     const { me, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (!me) {
       return (
@@ -54,26 +80,41 @@ class Profile extends React.Component<Props, State> {
     };
 
     return (
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
         <Page title={me.displayName}>
           <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
               <Route path={url} exact render={() => <ProfileInfo me={me} />} />
               <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
               <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
             </div>
-          <div className="column">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-            <Navigation>
+              <SecondaryNavigation
-              <Section label={t("profile.navigationLabel")}>
+                label={t("profile.navigationLabel")}
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("profile.informationNavLink")} />
+                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
-                <SubNavigation to={`${url}/settings/password`} label={t("profile.settingsNavLink")}>
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}`}
+                  icon="fas fa-info-circle"
+                  label={t("profile.informationNavLink")}
+                  title={t("profile.informationNavLink")}
+                />
+                <SubNavigation
+                  to={`${url}/settings/password`}
+                  label={t("profile.settingsNavLink")}
+                  title={t("profile.settingsNavLink")}
+                >
                   <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
                   <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
+              </SecondaryNavigation>
-            </Navigation>
             </div>
           </div>
         </Page>
+      </MenuContext.Provider>
     );
   }
 }

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

@@ -1,19 +1,29 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  Loading,
+  MenuContext,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
 import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
 import EditGroup from "./EditGroup";
 import SetPermissions from "../../permissions/components/SetPermissions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
     name: string;
     group: Group;
     loading: boolean;
@@ -22,17 +32,29 @@ type Props = WithTranslation & {
 
     // dispatcher functions
     fetchGroupByName: (p1: string, p2: string) => void;
+  };
 
-  // context objects
+type State = {
-  match: any;
+  menuCollapsed: boolean;
-  history: History;
 };
 
-class SingleGroup extends React.Component<Props> {
+class SingleGroup extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
   componentDidMount() {
     this.props.fetchGroupByName(this.props.groupLink, this.props.name);
   }
 
+  onCollapseGroupMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -46,6 +68,7 @@ class SingleGroup extends React.Component<Props> {
 
   render() {
     const { t, loading, error, group } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />;
@@ -63,9 +86,12 @@ class SingleGroup extends React.Component<Props> {
     };
 
     return (
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
         <Page title={group.name}>
           <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
               <Route path={url} exact component={() => <Details group={group} />} />
               <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
               <Route
@@ -75,21 +101,33 @@ class SingleGroup extends React.Component<Props> {
               />
               <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
             </div>
-          <div className="column">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-            <Navigation>
+              <SecondaryNavigation
-              <Section label={t("singleGroup.menu.navigationLabel")}>
+                label={t("singleGroup.menu.navigationLabel")}
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleGroup.menu.informationNavLink")} />
+                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}`}
+                  icon="fas fa-info-circle"
+                  label={t("singleGroup.menu.informationNavLink")}
+                  title={t("singleGroup.menu.informationNavLink")}
+                />
                 <ExtensionPoint name="group.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("singleGroup.menu.settingsNavLink")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("singleGroup.menu.settingsNavLink")}
+                  title={t("singleGroup.menu.settingsNavLink")}
+                >
                   <EditGroupNavLink group={group} editUrl={`${url}/settings/general`} />
                   <SetPermissionsNavLink group={group} permissionsUrl={`${url}/settings/permissions`} />
                   <ExtensionPoint name="group.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
+              </SecondaryNavigation>
-            </Navigation>
             </div>
           </div>
         </Page>
+      </MenuContext.Provider>
     );
   }
 }

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/Changesets.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
-import { withRouter } from "react-router-dom";
+import { withRouter, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
 import {
@@ -20,7 +20,8 @@ import {
   selectListAsCollection
 } from "../modules/changesets";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
     repository: Repository;
     branch: Branch;
     page: number;
@@ -33,10 +34,7 @@ type Props = WithTranslation & {
 
     // Dispatch props
     fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
-
+  };
-  // context props
-  match: any;
-};
 
 class Changesets extends React.Component<Props> {
   componentDidMount() {
@@ -44,6 +42,10 @@ class Changesets extends React.Component<Props> {
     fetchChangesets(repository, branch, page);
   }
 
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    return this.props.changesets !== nextProps.changesets;
+  }
+
   render() {
     const { changesets, loading, error, t } = this.props;
 

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

@@ -1,11 +1,20 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  Loading,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation,
+  MenuContext,
+  storeMenuCollapsed,
+  isMenuCollapsed
+} from "@scm-manager/ui-components";
 import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
@@ -21,7 +30,8 @@ import CodeOverview from "../codeSection/containers/CodeOverview";
 import ChangesetView from "./ChangesetView";
 import SourceExtensions from "../sources/containers/SourceExtensions";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
     namespace: string;
     name: string;
     repository: Repository;
@@ -32,13 +42,21 @@ type Props = WithTranslation & {
 
     // dispatch functions
     fetchRepoByName: (link: string, namespace: string, name: string) => void;
+  };
 
-  // context props
+type State = {
-  history: History;
+  menuCollapsed: boolean;
-  match: any;
 };
 
-class RepositoryRoot extends React.Component<Props> {
+class RepositoryRoot extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
     fetchRepoByName(repoLink, namespace, name);
@@ -87,8 +105,13 @@ class RepositoryRoot extends React.Component<Props> {
     return `${url}/changesets`;
   };
 
+  onCollapseRepositoryMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   render() {
     const { loading, error, indexLinks, repository, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return (
@@ -117,9 +140,15 @@ class RepositoryRoot extends React.Component<Props> {
     }
 
     return (
+      <MenuContext.Provider
+        value={{
+          menuCollapsed,
+          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+        }}
+      >
         <Page title={repository.namespace + "/" + repository.name}>
           <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
               <Switch>
                 <Redirect exact from={this.props.match.url} to={redirectedUrl} />
 
@@ -169,14 +198,18 @@ class RepositoryRoot extends React.Component<Props> {
                 <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
               </Switch>
             </div>
-          <div className="column">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-            <Navigation>
+              <SecondaryNavigation
-              <Section label={t("repositoryRoot.menu.navigationLabel")}>
+                label={t("repositoryRoot.menu.navigationLabel")}
+                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
                 <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                 <NavLink
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
                   label={t("repositoryRoot.menu.informationNavLink")}
+                  title={t("repositoryRoot.menu.informationNavLink")}
                 />
                 <RepositoryNavLink
                   repository={repository}
@@ -186,6 +219,7 @@ class RepositoryRoot extends React.Component<Props> {
                   label={t("repositoryRoot.menu.branchesNavLink")}
                   activeWhenMatch={this.matchesBranches}
                   activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.branchesNavLink")}
                 />
                 <RepositoryNavLink
                   repository={repository}
@@ -195,18 +229,23 @@ class RepositoryRoot extends React.Component<Props> {
                   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")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("repositoryRoot.menu.settingsNavLink")}
+                  title={t("repositoryRoot.menu.settingsNavLink")}
+                >
                   <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
                   <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
                   <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
+              </SecondaryNavigation>
-            </Navigation>
             </div>
           </div>
         </Page>
+      </MenuContext.Provider>
     );
   }
 }

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

@@ -581,6 +581,31 @@ describe("changesets", () => {
       ]);
     });
 
+    it("should return always the same changeset array for the given parameters", () => {
+      const state = {
+        changesets: {
+          "foo/bar": {
+            byId: {
+              id2: {
+                id: "id2"
+              },
+              id1: {
+                id: "id1"
+              }
+            },
+            byBranch: {
+              "": {
+                entries: ["id1", "id2"]
+              }
+            }
+          }
+        }
+      };
+      const one = getChangesets(state, repository);
+      const two = getChangesets(state, repository);
+      expect(one).toBe(two);
+    });
+
     it("should return true, when fetching changesets is pending", () => {
       const state = {
         pending: {
@@ -639,5 +664,14 @@ describe("changesets", () => {
       expect(collection.page).toBe(1);
       expect(collection.pageTotal).toBe(10);
     });
+
+    it("should return always the same empty object", () => {
+      const state = {
+        changesets: {}
+      };
+      const one = selectListAsCollection(state, repository);
+      const two = selectListAsCollection(state, repository);
+      expect(one).toBe(two);
+    });
   });
 });

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

@@ -3,6 +3,7 @@ import { apiClient, urls } from "@scm-manager/ui-components";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
 import { Action, Branch, PagedCollection, Repository } from "@scm-manager/ui-types";
+import memoizeOne from "memoize-one";
 
 export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
 export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -254,10 +255,15 @@ export function getChangesets(state: object, repository: Repository, branch?: Br
     return null;
   }
 
+  return collectChangesets(stateRoot, changesets);
+}
+const mapChangesets = (stateRoot, changesets) => {
   return changesets.entries.map((id: string) => {
     return stateRoot.byId[id];
   });
-}
+};
+
+const collectChangesets = memoizeOne(mapChangesets);
 
 export function getChangeset(state: object, repository: Repository, id: string) {
   const key = createItemId(repository);
@@ -291,6 +297,8 @@ export function getFetchChangesetsFailure(state: object, repository: Repository,
   return getFailure(state, FETCH_CHANGESETS, createItemId(repository, branch));
 }
 
+const EMPTY = {};
+
 const selectList = (state: object, repository: Repository, branch?: Branch) => {
   const repoId = createItemId(repository);
 
@@ -302,7 +310,7 @@ const selectList = (state: object, repository: Repository, branch?: Branch) => {
       return repoState.byBranch[branchName];
     }
   }
-  return {};
+  return EMPTY;
 };
 
 const selectListEntry = (state: object, repository: Repository, branch?: Branch): object => {
@@ -310,7 +318,7 @@ const selectListEntry = (state: object, repository: Repository, branch?: Branch)
   if (list.entry) {
     return list.entry;
   }
-  return {};
+  return EMPTY;
 };
 
 export const selectListAsCollection = (state: object, repository: Repository, branch?: Branch): PagedCollection => {

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

@@ -3,6 +3,7 @@ import * as types from "../../modules/types";
 import { Action, Repository, RepositoryCollection } from "@scm-manager/ui-types";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
+import React from "react";
 
 export const FETCH_REPOS = "scm/repos/FETCH_REPOS";
 export const FETCH_REPOS_PENDING = `${FETCH_REPOS}_${types.PENDING_SUFFIX}`;
@@ -155,7 +156,12 @@ export function fetchRepoFailure(namespace: string, name: string, error: Error):
 
 // create repo
 
-export function createRepo(link: string, repository: Repository, initRepository: boolean, callback?: (repo: Repository) => void) {
+export function createRepo(
+  link: string,
+  repository: Repository,
+  initRepository: boolean,
+  callback?: (repo: Repository) => void
+) {
   return function(dispatch: any) {
     dispatch(createRepoPending());
     const repoLink = initRepository ? link + "?initialize=true" : link;

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

@@ -1,10 +1,18 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route, RouteComponentProps } from "react-router-dom";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  Loading,
+  MenuContext,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
 import { fetchUserByName, getFetchUserFailure, getUserByName, isFetchUserPending } from "../modules/users";
@@ -13,8 +21,10 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { getUsersLink } from "../../modules/indexResource";
 import SetUserPassword from "../components/SetUserPassword";
 import SetPermissions from "../../permissions/components/SetPermissions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
     name: string;
     user: User;
     loading: boolean;
@@ -23,13 +33,21 @@ type Props = WithTranslation & {
 
     // dispatcher function
     fetchUserByName: (p1: string, p2: string) => void;
+  };
 
-  // context objects
+type State = {
-  match: any;
+  menuCollapsed: boolean;
-  history: History;
 };
 
-class SingleUser extends React.Component<Props> {
+class SingleUser extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
   componentDidMount() {
     this.props.fetchUserByName(this.props.usersLink, this.props.name);
   }
@@ -41,12 +59,17 @@ class SingleUser extends React.Component<Props> {
     return url;
   };
 
+  onCollapseUserMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   matchedUrl = () => {
     return this.stripEndingSlash(this.props.match.url);
   };
 
   render() {
     const { t, loading, error, user } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />;
@@ -64,9 +87,12 @@ class SingleUser extends React.Component<Props> {
     };
 
     return (
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
         <Page title={user.displayName}>
           <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
               <Route path={url} exact component={() => <Details user={user} />} />
               <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
               <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
@@ -76,21 +102,33 @@ class SingleUser extends React.Component<Props> {
               />
               <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
             </div>
-          <div className="column">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-            <Navigation>
+              <SecondaryNavigation
-              <Section label={t("singleUser.menu.navigationLabel")}>
+                label={t("singleUser.menu.navigationLabel")}
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleUser.menu.informationNavLink")} />
+                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
-                <SubNavigation to={`${url}/settings/general`} label={t("singleUser.menu.settingsNavLink")}>
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}`}
+                  icon="fas fa-info-circle"
+                  label={t("singleUser.menu.informationNavLink")}
+                  title={t("singleUser.menu.informationNavLink")}
+                />
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("singleUser.menu.settingsNavLink")}
+                  title={t("singleUser.menu.settingsNavLink")}
+                >
                   <EditUserNavLink user={user} editUrl={`${url}/settings/general`} />
                   <SetPasswordNavLink user={user} passwordUrl={`${url}/settings/password`} />
                   <SetPermissionsNavLink user={user} permissionsUrl={`${url}/settings/permissions`} />
                   <ExtensionPoint name="user.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
+              </SecondaryNavigation>
-            </Navigation>
             </div>
           </div>
         </Page>
+      </MenuContext.Provider>
     );
   }
 }