make secondary navigation also for user, group and administration collapsable

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 {
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  isMenuCollapsed,
+  MenuContext
+} from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
 import PluginsOverview from "../plugins/containers/PluginsOverview";
@@ -14,18 +21,44 @@ import GlobalConfig from "./GlobalConfig";
 import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
+type Props = RouteComponentProps &
-  links: Links;
+  WithTranslation & {
-  availablePluginsLink: string;
+    links: Links;
-  installedPluginsLink: string;
+    availablePluginsLink: string;
+    installedPluginsLink: string;
+  };
 
-  // context objects
+type State = {
-  match: any;
+  menuCollapsed: boolean;
-  history: History;
+  setMenuCollapsed: (collapsed: boolean) => void;
 };
 
-class Admin extends React.Component<Props> {
+class Admin extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/") || this.props.location.pathname.includes("/plugins/");
+  };
+
+  onCollapseAdminMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       if (url.includes("role")) {
@@ -48,6 +81,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,82 +90,99 @@ class Admin extends React.Component<Props> {
     };
 
     return (
-      <Page>
+      <MenuContext.Provider value={this.state}>
-        <div className="columns">
+        <Page>
-          <div className="column is-three-quarters">
+          <div className="columns">
-            <Switch>
+            <div className="column">
-              <Redirect exact from={url} to={`${url}/info`} />
+              <Switch>
-              <Route path={`${url}/info`} exact component={AdminDetails} />
+                <Redirect exact from={url} to={`${url}/info`} />
-              <Route path={`${url}/settings/general`} exact component={GlobalConfig} />
+                <Route path={`${url}/info`} exact component={AdminDetails} />
-              <Redirect exact from={`${url}/plugins`} to={`${url}/plugins/installed/`} />
+                <Route path={`${url}/settings/general`} exact component={GlobalConfig} />
-              <Route
+                <Redirect exact from={`${url}/plugins`} to={`${url}/plugins/installed/`} />
-                path={`${url}/plugins/installed`}
+                <Route
-                exact
+                  path={`${url}/plugins/installed`}
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
+                  exact
-              />
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
-              <Route
-                path={`${url}/plugins/installed/:page`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
-              />
-              <Route
-                path={`${url}/plugins/available`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
-              />
-              <Route
-                path={`${url}/plugins/available/:page`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
-              />
-              <Route
-                path={`${url}/role/:role`}
-                render={() => <SingleRepositoryRole baseUrl={`${url}/roles`} history={this.props.history} />}
-              />
-              <Route path={`${url}/roles`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
-              <Route
-                path={`${url}/roles/create`}
-                render={() => <CreateRepositoryRole history={this.props.history} />}
-              />
-              <Route path={`${url}/roles/:page`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
-              <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
-            </Switch>
-          </div>
-          <div className="column is-one-quarter">
-            <Navigation>
-              <Section label={t("admin.menu.navigationLabel")}>
-                <NavLink to={`${url}/info`} icon="fas fa-info-circle" label={t("admin.menu.informationNavLink")} />
-                {(availablePluginsLink || installedPluginsLink) && (
-                  <SubNavigation
-                    to={`${url}/plugins/`}
-                    icon="fas fa-puzzle-piece"
-                    label={t("plugins.menu.pluginsNavLink")}
-                  >
-                    {installedPluginsLink && (
-                      <NavLink to={`${url}/plugins/installed/`} label={t("plugins.menu.installedNavLink")} />
-                    )}
-                    {availablePluginsLink && (
-                      <NavLink to={`${url}/plugins/available/`} label={t("plugins.menu.availableNavLink")} />
-                    )}
-                  </SubNavigation>
-                )}
-                <NavLink
-                  to={`${url}/roles/`}
-                  icon="fas fa-user-shield"
-                  label={t("repositoryRole.navLink")}
-                  activeWhenMatch={this.matchesRoles}
-                  activeOnlyWhenExact={false}
                 />
-                <ExtensionPoint name="admin.navigation" props={extensionProps} renderAll={true} />
+                <Route
-                <SubNavigation to={`${url}/settings/general`} label={t("admin.menu.settingsNavLink")}>
+                  path={`${url}/plugins/installed/:page`}
-                  <NavLink to={`${url}/settings/general`} label={t("admin.menu.generalNavLink")} />
+                  exact
-                  <ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
-                </SubNavigation>
+                />
-              </Section>
+                <Route
-            </Navigation>
+                  path={`${url}/plugins/available`}
+                  exact
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
+                />
+                <Route
+                  path={`${url}/plugins/available/:page`}
+                  exact
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
+                />
+                <Route
+                  path={`${url}/role/:role`}
+                  render={() => <SingleRepositoryRole baseUrl={`${url}/roles`} history={this.props.history} />}
+                />
+                <Route path={`${url}/roles`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
+                <Route
+                  path={`${url}/roles/create`}
+                  render={() => <CreateRepositoryRole history={this.props.history} />}
+                />
+                <Route path={`${url}/roles/:page`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
+                <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
+              </Switch>
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <Navigation>
+                <Section
+                  label={t("admin.menu.navigationLabel")}
+                  onCollapse={this.isCollapseForbidden() ? undefined : () => 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")} />
+                      )}
+                      {availablePluginsLink && (
+                        <NavLink to={`${url}/plugins/available/`} label={t("plugins.menu.availableNavLink")} />
+                      )}
+                    </SubNavigation>
+                  )}
+                  <NavLink
+                    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")}
+                    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>
+              </Navigation>
+            </div>
           </div>
-        </div>
+        </Page>
-      </Page>
+      </MenuContext.Provider>
     );
   }
 }

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

@@ -1,38 +1,73 @@
 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,
+  Loading,
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  isMenuCollapsed,
+  MenuContext
+} 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 &
-  name: string;
+  WithTranslation & {
-  group: Group;
+    name: string;
-  loading: boolean;
+    group: Group;
-  error: Error;
+    loading: boolean;
-  groupLink: string;
+    error: Error;
+    groupLink: string;
 
-  // dispatcher functions
+    // dispatcher functions
-  fetchGroupByName: (p1: string, p2: string) => void;
+    fetchGroupByName: (p1: string, p2: string) => void;
+  };
 
-  // context objects
+type State = {
-  match: any;
+  menuCollapsed: boolean;
-  history: History;
+  setMenuCollapsed: (collapsed: boolean) => void;
 };
 
-class SingleGroup extends React.Component<Props> {
+class SingleGroup extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
   componentDidMount() {
     this.props.fetchGroupByName(this.props.groupLink, this.props.name);
   }
 
+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/");
+  };
+
+  onCollapseGroupMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -46,6 +81,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,33 +99,48 @@ class SingleGroup extends React.Component<Props> {
     };
 
     return (
-      <Page title={group.name}>
+      <MenuContext.Provider value={this.state}>
-        <div className="columns">
+        <Page title={group.name}>
-          <div className="column is-three-quarters">
+          <div className="columns">
-            <Route path={url} exact component={() => <Details group={group} />} />
+            <div className="column">
-            <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
+              <Route path={url} exact component={() => <Details group={group} />} />
-            <Route
+              <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
-              path={`${url}/settings/permissions`}
+              <Route
-              exact
+                path={`${url}/settings/permissions`}
-              component={() => <SetPermissions selectedPermissionsLink={group._links.permissions} />}
+                exact
-            />
+                component={() => <SetPermissions selectedPermissionsLink={group._links.permissions} />}
-            <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
+              />
+              <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.isCollapseForbidden() ? undefined : () => 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")}
+                    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>
+              </Navigation>
+            </div>
           </div>
-          <div className="column">
+        </Page>
-            <Navigation>
+      </MenuContext.Provider>
-              <Section label={t("singleGroup.menu.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleGroup.menu.informationNavLink")} />
-                <ExtensionPoint name="group.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={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>
-            </Navigation>
-          </div>
-        </div>
-      </Page>
     );
   }
 }

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

@@ -4,16 +4,19 @@ import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 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 {
-  fetchRepoByName,
+  ErrorPage,
-  getFetchRepoFailure,
+  Loading,
-  getRepository,
+  Navigation,
-  isFetchRepoPending,
+  NavLink,
-  isRepositoryMenuCollapsed,
+  Page,
-  switchRepositoryMenuCollapsed,
+  Section,
-  RepositoryContext
+  SubNavigation,
-} from "../modules/repos";
+  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";
 import BranchesOverview from "../branches/containers/BranchesOverview";
@@ -43,24 +46,28 @@ type Props = RouteComponentProps &
   };
 
 type State = {
-  collapsedRepositoryMenu: boolean;
+  menuCollapsed: boolean;
+  setMenuCollapsed: (collapsed: boolean) => void;
 };
 
 class RepositoryRoot extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
+
     this.state = {
-      collapsedRepositoryMenu: isRepositoryMenuCollapsed()
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
     };
   }
+
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
     fetchRepoByName(repoLink, namespace, name);
   }
 
   componentDidUpdate() {
-    if (this.state.collapsedRepositoryMenu && this.isCollapseForbidden()) {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
-      this.onCollapseRepositoryMenu(false);
+      this.setState({ menuCollapsed: false });
     }
   }
 
@@ -111,13 +118,13 @@ class RepositoryRoot extends React.Component<Props, State> {
     return `${url}/changesets`;
   };
 
-  onCollapseRepositoryMenu = (status: boolean) => {
+  onCollapseRepositoryMenu = (collapsed: boolean) => {
-    this.setState({ collapsedRepositoryMenu: status }, () => switchRepositoryMenuCollapsed(status));
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
   };
 
   render() {
     const { loading, error, indexLinks, repository, t } = this.props;
-    const { collapsedRepositoryMenu } = this.state;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return (
@@ -135,7 +142,7 @@ class RepositoryRoot extends React.Component<Props, State> {
       repository,
       url,
       indexLinks,
-      collapsedRepositoryMenu
+      collapsedRepositoryMenu: menuCollapsed
     };
 
     const redirectUrlFactory = binder.getExtension("repository.redirect", this.props);
@@ -147,15 +154,10 @@ class RepositoryRoot extends React.Component<Props, State> {
     }
 
     return (
-      <RepositoryContext.Provider
+      <Page title={repository.namespace + "/" + repository.name}>
-        value={{
+        <div className="columns">
-          menuCollapsed: this.state.collapsedRepositoryMenu,
+          <div className="column">
-          toggleMenuCollapsed: () => this.setState({ collapsedRepositoryMenu: !this.state.collapsedRepositoryMenu })
+            <MenuContext.Provider value={this.state}>
-        }}
-      >
-        <Page title={repository.namespace + "/" + repository.name}>
-          <div className="columns">
-            <div className="column">
               <Switch>
                 <Redirect exact from={this.props.match.url} to={redirectedUrl} />
 
@@ -204,61 +206,59 @@ class RepositoryRoot extends React.Component<Props, State> {
                 <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
                 <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
               </Switch>
-            </div>
+            </MenuContext.Provider>
-            <div className={collapsedRepositoryMenu ? "column is-1" : "column is-3"}>
-              <Navigation>
-                <Section
-                  label={t("repositoryRoot.menu.navigationLabel")}
-                  onCollapse={
-                    this.isCollapseForbidden()
-                      ? undefined
-                      : () => this.onCollapseRepositoryMenu(!collapsedRepositoryMenu)
-                  }
-                  collapsed={collapsedRepositoryMenu}
-                >
-                  <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}
-                    linkName="branches"
-                    to={`${url}/branches/`}
-                    icon="fas fa-code-branch"
-                    label={t("repositoryRoot.menu.branchesNavLink")}
-                    activeWhenMatch={this.matchesBranches}
-                    activeOnlyWhenExact={false}
-                    title={t("repositoryRoot.menu.branchesNavLink")}
-                  />
-                  <RepositoryNavLink
-                    repository={repository}
-                    linkName={this.getCodeLinkname()}
-                    to={this.evaluateDestinationForCodeLink()}
-                    icon="fas fa-code"
-                    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")}
-                    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>
-              </Navigation>
-            </div>
           </div>
-        </Page>
+          <div className={menuCollapsed ? "column is-1" : "column is-3"}>
-      </RepositoryContext.Provider>
+            <Navigation>
+              <Section
+                label={t("repositoryRoot.menu.navigationLabel")}
+                onCollapse={
+                  this.isCollapseForbidden() ? undefined : () => 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}
+                  linkName="branches"
+                  to={`${url}/branches/`}
+                  icon="fas fa-code-branch"
+                  label={t("repositoryRoot.menu.branchesNavLink")}
+                  activeWhenMatch={this.matchesBranches}
+                  activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.branchesNavLink")}
+                />
+                <RepositoryNavLink
+                  repository={repository}
+                  linkName={this.getCodeLinkname()}
+                  to={this.evaluateDestinationForCodeLink()}
+                  icon="fas fa-code"
+                  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")}
+                  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>
+            </Navigation>
+          </div>
+        </div>
+      </Page>
     );
   }
 }

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

@@ -1,10 +1,20 @@
 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,
+  Loading,
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  MenuContext,
+  isMenuCollapsed
+} from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
 import { fetchUserByName, getFetchUserFailure, getUserByName, isFetchUserPending } from "../modules/users";
@@ -13,27 +23,45 @@ 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 &
-  name: string;
+  WithTranslation & {
-  user: User;
+    name: string;
-  loading: boolean;
+    user: User;
-  error: Error;
+    loading: boolean;
-  usersLink: string;
+    error: Error;
+    usersLink: string;
 
-  // dispatcher function
+    // dispatcher function
-  fetchUserByName: (p1: string, p2: string) => void;
+    fetchUserByName: (p1: string, p2: string) => void;
+  };
 
-  // context objects
+type State = {
-  match: any;
+  menuCollapsed: boolean;
-  history: History;
+  setMenuCollapsed: (collapsed: boolean) => void;
 };
 
-class SingleUser extends React.Component<Props> {
+class SingleUser extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
   componentDidMount() {
     this.props.fetchUserByName(this.props.usersLink, this.props.name);
   }
 
+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -41,12 +69,21 @@ class SingleUser extends React.Component<Props> {
     return url;
   };
 
+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/");
+  };
+
+  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,33 +101,48 @@ class SingleUser extends React.Component<Props> {
     };
 
     return (
-      <Page title={user.displayName}>
+      <MenuContext.Provider value={this.state}>
-        <div className="columns">
+        <Page title={user.displayName}>
-          <div className="column is-three-quarters">
+          <div className="columns">
-            <Route path={url} exact component={() => <Details user={user} />} />
+            <div className="column">
-            <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
+              <Route path={url} exact component={() => <Details user={user} />} />
-            <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
+              <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
-            <Route
+              <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
-              path={`${url}/settings/permissions`}
+              <Route
-              component={() => <SetPermissions selectedPermissionsLink={user._links.permissions} />}
+                path={`${url}/settings/permissions`}
-            />
+                component={() => <SetPermissions selectedPermissionsLink={user._links.permissions} />}
-            <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
+              />
+              <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.isCollapseForbidden() ? undefined : () => this.onCollapseUserMenu(!menuCollapsed)}
+                  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>
+              </Navigation>
+            </div>
           </div>
-          <div className="column">
+        </Page>
-            <Navigation>
+      </MenuContext.Provider>
-              <Section label={t("singleUser.menu.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleUser.menu.informationNavLink")} />
-                <SubNavigation to={`${url}/settings/general`} label={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>
-            </Navigation>
-          </div>
-        </div>
-      </Page>
     );
   }
 }