From 13633fb57e1b6f8506bc564589d63f846b1738c1 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 31 Mar 2020 11:00:07 +0200
Subject: [PATCH] un collapse menu on each interaction with it

---
 .../src/__snapshots__/storyshots.test.ts.snap | 269 +++++-------------
 .../src/layout/PrimaryContentColumn.tsx       |  31 +-
 .../src/layout/SecondaryNavigationColumn.tsx  |  31 +-
 .../src/navigation/SecondaryNavigation.tsx    |  25 +-
 scm-ui/ui-components/src/navigation/index.ts  |   2 +-
 scm-ui/ui-components/src/repos/DiffFile.tsx   |  10 +-
 .../ui-webapp/src/admin/containers/Admin.tsx  |  41 +--
 scm-ui/ui-webapp/src/containers/Profile.tsx   |  41 +--
 .../src/groups/containers/SingleGroup.tsx     |  41 +--
 .../src/repos/containers/RepositoryRoot.tsx   |  42 +--
 .../src/users/containers/SingleUser.tsx       |  39 +--
 11 files changed, 154 insertions(+), 418 deletions(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 7078431b33..f76f64d754 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -34188,70 +34188,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
 </div>
 `;
 
-exports[`Storyshots Navigation|Secondary Collapsed 1`] = `
-<div
-  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
->
-  <div
-    className="column is-3"
-  >
-    <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
-    >
-      <div>
-        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 ktrCnD menu-label"
-          onClick={[Function]}
-        >
-          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 cqWEjA is-medium"
-            color="info"
-          >
-            <i
-              className="fas fa-caret-down"
-            />
-          </i>
-          
-        </p>
-        <ul
-          className="menu-list"
-        >
-          <li
-            title="Puzzle 42"
-          >
-            <a
-              className="is-active has-text-centered"
-              href="/"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-puzzle-piece fa-fw"
-              />
-               
-            </a>
-          </li>
-          <li
-            title="Heart Of Gold"
-          >
-            <a
-              className="has-text-centered"
-              href="/some"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-star fa-fw"
-              />
-               
-            </a>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
+exports[`Storyshots Navigation|Secondary Default 1`] = `
 <div
   className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
 >
@@ -34264,11 +34201,75 @@ exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
       <div>
         <p
           className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
+          onClick={[Function]}
+        >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
+            color="info"
+          >
+            <i
+              className="fas fa-caret-right"
+            />
+          </i>
+          Hitchhiker
+        </p>
+        <ul
+          className="menu-list"
+          onClick={[Function]}
+        >
+          <li>
+            <a
+              className=""
+              href="/42"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-puzzle-piece fa-fw"
+              />
+               
+              Puzzle 42
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="/heart-of-gold"
+              onClick={[Function]}
+            >
+              <i
+                className="fas fa-star fa-fw"
+              />
+               
+              Heart Of Gold
+            </a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
+<div
+  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
+>
+  <div
+    className="column is-3"
+  >
+    <aside
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
+    >
+      <div>
+        <p
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
+          onClick={[Function]}
         >
           Hitchhiker
         </p>
         <ul
           className="menu-list"
+          onClick={[Function]}
         >
           <li>
             <a
@@ -34329,67 +34330,6 @@ exports[`Storyshots Navigation|Secondary Collapsed EP Sub 1`] = `
 </div>
 `;
 
-exports[`Storyshots Navigation|Secondary Default 1`] = `
-<div
-  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
->
-  <div
-    className="column is-3"
-  >
-    <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
-    >
-      <div>
-        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
-          onClick={[Function]}
-        >
-          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
-            color="info"
-          >
-            <i
-              className="fas fa-caret-right"
-            />
-          </i>
-          Hitchhiker
-        </p>
-        <ul
-          className="menu-list"
-        >
-          <li>
-            <a
-              className="is-active"
-              href="/"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-puzzle-piece fa-fw"
-              />
-               
-              Puzzle 42
-            </a>
-          </li>
-          <li>
-            <a
-              className=""
-              href="/some"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-star fa-fw"
-              />
-               
-              Heart Of Gold
-            </a>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
 <div
   className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
@@ -34417,6 +34357,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
         </p>
         <ul
           className="menu-list"
+          onClick={[Function]}
         >
           <li>
             <a
@@ -34451,84 +34392,6 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
 </div>
 `;
 
-exports[`Storyshots Navigation|Secondary Sub Navigation Collapsed 1`] = `
-<div
-  className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
->
-  <div
-    className="column is-3"
-  >
-    <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
-    >
-      <div>
-        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
-        >
-          Hitchhiker
-        </p>
-        <ul
-          className="menu-list"
-        >
-          <li>
-            <a
-              className=""
-              href="/42"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-puzzle-piece fa-fw"
-              />
-               
-              Puzzle 42
-            </a>
-          </li>
-          <li>
-            <a
-              className="is-active"
-              href="/hitchhiker/starships"
-              onClick={[Function]}
-            >
-              <i
-                className="fas fa-cog fa-fw"
-              />
-               
-              Starships
-            </a>
-            <ul
-              className="sub-menu"
-            >
-              <li>
-                <a
-                  className="is-active"
-                  href="/hitchhiker/starships/heart-of-gold"
-                  onClick={[Function]}
-                >
-                  <i
-                    className="fas fa-star fa-fw"
-                  />
-                   
-                  Heart Of Gold
-                </a>
-              </li>
-              <li>
-                <a
-                  className=""
-                  href="/hitchhiker/starships/titanic"
-                  onClick={[Function]}
-                >
-                  Titanic
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    </aside>
-  </div>
-</div>
-`;
-
 exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
 <div
   className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
diff --git a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
index 76427dc4e0..73ddadd0a4 100644
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
@@ -21,13 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
-
-type Props = {
-  children?: ReactNode;
-  collapsed: boolean;
-};
+import useMenuContext from "../navigation/MenuContext";
 
 const PrimaryColumn = styled.div<{ collapsed: boolean }>`
   /* This is the counterpart to the specific column in SecondaryNavigationColumn. */
@@ -39,18 +35,13 @@ const PrimaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-export default class PrimaryContentColumn extends React.Component<Props> {
-  static defaultProps = {
-    collapsed: false
-  };
+const PrimaryContentColumn: FC = ({ children }) => {
+  const context = useMenuContext();
+  return (
+    <PrimaryColumn className="column" collapsed={context.isCollapsed()}>
+      {children}
+    </PrimaryColumn>
+  );
+};
 
-  render() {
-    const { children, collapsed } = this.props;
-
-    return (
-      <PrimaryColumn className="column" collapsed={collapsed}>
-        {children}
-      </PrimaryColumn>
-    );
-  }
-}
+export default PrimaryContentColumn;
diff --git a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
index aae722bbe3..a974c8d438 100644
--- a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
+++ b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
@@ -21,13 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
-
-type Props = {
-  children?: ReactNode;
-  collapsed: boolean;
-};
+import useMenuContext from "../navigation/MenuContext";
 
 const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   /* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size. 
@@ -42,18 +38,13 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-export default class SecondaryNavigationColumn extends React.Component<Props> {
-  static defaultProps = {
-    collapsed: false
-  };
+const SecondaryNavigationColumn: FC = ({ children }) => {
+  const context = useMenuContext();
+  return (
+    <SecondaryColumn className="column" collapsed={context.isCollapsed()}>
+      {children}
+    </SecondaryColumn>
+  );
+};
 
-  render() {
-    const { children, collapsed } = this.props;
-
-    return (
-      <SecondaryColumn className="column" collapsed={collapsed}>
-        {children}
-      </SecondaryColumn>
-    );
-  }
-}
+export default SecondaryNavigationColumn;
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index efb925c679..61e0860a18 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { FC, ReactElement, ReactNode} from "react";
+import React, {FC, ReactElement, ReactNode, useEffect, useMemo} from "react";
 import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
 import { matchPath, useLocation } from "react-router-dom";
@@ -64,10 +64,27 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
   const location = useLocation();
   const binder = useBinder();
   const menuContext = useMenuContext();
-
   const subNavActive = isSubNavigationActive(binder, children, location.pathname);
   const isCollapsed = menuContext.isCollapsed();
 
+  useEffect(() => {
+    if (isCollapsed && subNavActive) {
+      menuContext.setCollapsed(false);
+    }
+  }, [subNavActive, isCollapsed]);
+
+  const toggleCollapseState = () => {
+    if (!subNavActive) {
+      menuContext.setCollapsed(!isCollapsed);
+    }
+  };
+
+  const uncollapseMenu = () => {
+    if (isCollapsed) {
+      menuContext.setCollapsed(false);
+    }
+  };
+
   const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
 
   return (
@@ -76,7 +93,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
         <MenuLabel
           className="menu-label"
           collapsed={isCollapsed}
-          onClick={!subNavActive ? () => menuContext.setCollapsed(!isCollapsed) : undefined}
+          onClick={toggleCollapseState}
         >
           {!subNavActive && (
             <Icon color="info" className="is-medium" collapsed={isCollapsed}>
@@ -85,7 +102,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children}) => {
           )}
           {isCollapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list">{children}</ul>
+        <ul className="menu-list" onClick={uncollapseMenu}>{children}</ul>
       </div>
     </SectionContainer>
   );
diff --git a/scm-ui/ui-components/src/navigation/index.ts b/scm-ui/ui-components/src/navigation/index.ts
index 942beb0080..4dcce4321b 100644
--- a/scm-ui/ui-components/src/navigation/index.ts
+++ b/scm-ui/ui-components/src/navigation/index.ts
@@ -31,5 +31,5 @@ export { default as SubNavigation } from "./SubNavigation";
 export { default as PrimaryNavigation } from "./PrimaryNavigation";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
 export { default as SecondaryNavigation } from "./SecondaryNavigation";
-export { MenuContext, LocalStorageMenuContextProvider } from "./MenuContext";
+export { MenuContext, StateMenuContextProvider } from "./MenuContext";
 export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 5d6381a971..981423fabe 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -34,7 +34,6 @@ import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
 import { MenuContext } from "@scm-manager/ui-components";
-import { storeMenuCollapsed } from "../navigation";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -132,7 +131,6 @@ class DiffFile extends React.Component<Props, State> {
       }),
       () => callback()
     );
-    storeMenuCollapsed(true);
   };
 
   setCollapse = (collapsed: boolean) => {
@@ -289,11 +287,15 @@ class DiffFile extends React.Component<Props, State> {
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
             <MenuContext.Consumer>
-              {({ setMenuCollapsed }) => (
+              {({ setCollapsed }) => (
                 <DiffButton
                   icon={sideBySide ? "align-left" : "columns"}
                   tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                  onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
+                  onClick={() => this.toggleSideBySide(() => {
+                    if (this.state.sideBySide) {
+                      setCollapsed(true);
+                    }
+                  })}
                 />
               )}
             </MenuContext.Consumer>
diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index 6840808214..ebfaaa1325 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -35,10 +35,7 @@ import {
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation,
-  isMenuCollapsed,
-  MenuContext,
-  storeMenuCollapsed
+  SubNavigation
 } from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
@@ -47,6 +44,7 @@ import GlobalConfig from "./GlobalConfig";
 import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+import {StateMenuContextProvider} from "@scm-manager/ui-components/src/navigation/MenuContext";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -55,23 +53,7 @@ type Props = RouteComponentProps &
     installedPluginsLink: string;
   };
 
-type State = {
-  menuCollapsed: boolean;
-};
-
-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));
-  };
-
+class Admin extends React.Component<Props> {
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       if (url.includes("role")) {
@@ -94,7 +76,6 @@ class Admin extends React.Component<Props, State> {
 
   render() {
     const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
-    const { menuCollapsed } = this.state;
 
     const url = this.matchedUrl();
     const extensionProps = {
@@ -103,12 +84,10 @@ class Admin extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <Page>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Switch>
                 <Redirect exact from={url} to={`${url}/info`} />
                 <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -147,12 +126,8 @@ class Admin extends React.Component<Props, State> {
                 <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
               </Switch>
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("admin.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
                 <NavLink
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
@@ -195,7 +170,7 @@ class Admin extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index 221e8974c7..8f14bed1e7 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -30,20 +30,18 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import {
   ErrorPage,
-  isMenuCollapsed,
-  MenuContext,
   NavLink,
   Page,
   CustomQueryFlexWrappedColumns,
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  StateMenuContextProvider
 } 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 = RouteComponentProps &
   WithTranslation & {
@@ -53,23 +51,7 @@ type Props = RouteComponentProps &
     match: any;
   };
 
-type State = {
-  menuCollapsed: boolean;
-};
-
-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));
-  };
-
+class Profile extends React.Component<Props> {
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -85,7 +67,6 @@ class Profile extends React.Component<Props, State> {
     const url = this.matchedUrl();
 
     const { me, t } = this.props;
-    const { menuCollapsed } = this.state;
 
     if (!me) {
       return (
@@ -106,22 +87,16 @@ class Profile extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <Page title={me.displayName}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <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} />
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("profile.navigationLabel")}
-                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("profile.navigationLabel")}>
                 <NavLink
                   to={`${url}`}
                   icon="fas fa-info-circle"
@@ -140,7 +115,7 @@ class Profile extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index c7c658c059..5b5555b80c 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -29,16 +29,15 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
 import {
   ErrorPage,
-  isMenuCollapsed,
   Loading,
-  MenuContext,
   NavLink,
   Page,
   CustomQueryFlexWrappedColumns,
   PrimaryContentColumn,
   SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
@@ -46,7 +45,6 @@ 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 = RouteComponentProps &
   WithTranslation & {
@@ -60,27 +58,11 @@ type Props = RouteComponentProps &
     fetchGroupByName: (p1: string, p2: string) => void;
   };
 
-type State = {
-  menuCollapsed: boolean;
-};
-
-class SingleGroup extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class SingleGroup extends React.Component<Props> {
   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);
@@ -94,7 +76,6 @@ class SingleGroup extends React.Component<Props, State> {
 
   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} />;
@@ -112,12 +93,10 @@ class SingleGroup extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <Page title={group.name}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Route path={url} exact component={() => <Details group={group} />} />
               <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
               <Route
@@ -127,12 +106,8 @@ class SingleGroup extends React.Component<Props, State> {
               />
               <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("singleGroup.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
                 <NavLink
                   to={`${url}`}
                   icon="fas fa-info-circle"
@@ -153,7 +128,7 @@ class SingleGroup extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 9651cd0a0b..38b0570cb5 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -37,9 +37,7 @@ import {
   SecondaryNavigationColumn,
   SecondaryNavigation,
   SubNavigation,
-  MenuContext,
-  storeMenuCollapsed,
-  isMenuCollapsed
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
@@ -70,19 +68,7 @@ type Props = RouteComponentProps &
     fetchRepoByName: (link: string, namespace: string, name: string) => void;
   };
 
-type State = {
-  menuCollapsed: boolean;
-};
-
-class RepositoryRoot extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class RepositoryRoot extends React.Component<Props> {
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
     fetchRepoByName(repoLink, namespace, name);
@@ -131,13 +117,8 @@ class RepositoryRoot extends React.Component<Props, State> {
     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 (
@@ -166,18 +147,13 @@ class RepositoryRoot extends React.Component<Props, State> {
     }
 
     return (
-      <MenuContext.Provider
-        value={{
-          menuCollapsed,
-          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
-        }}
-      >
+      <StateMenuContextProvider>
         <Page
           title={repository.namespace + "/" + repository.name}
           afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
         >
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <Switch>
                 <Redirect exact from={this.props.match.url} to={redirectedUrl} />
 
@@ -227,12 +203,8 @@ class RepositoryRoot extends React.Component<Props, State> {
                 <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
               </Switch>
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("repositoryRoot.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
                 <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                 <NavLink
                   to={`${url}/info`}
@@ -274,7 +246,7 @@ class RepositoryRoot extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 5050b3ea05..ff2c57f0e6 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -28,9 +28,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
 import {
   ErrorPage,
-  isMenuCollapsed,
   Loading,
-  MenuContext,
   NavLink,
   Page,
   CustomQueryFlexWrappedColumns,
@@ -38,7 +36,7 @@ import {
   SecondaryNavigationColumn,
   SecondaryNavigation,
   SubNavigation,
-  storeMenuCollapsed
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
@@ -61,19 +59,7 @@ type Props = RouteComponentProps &
     fetchUserByName: (p1: string, p2: string) => void;
   };
 
-type State = {
-  menuCollapsed: boolean;
-};
-
-class SingleUser extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class SingleUser extends React.Component<Props> {
   componentDidMount() {
     this.props.fetchUserByName(this.props.usersLink, this.props.name);
   }
@@ -85,17 +71,12 @@ class SingleUser extends React.Component<Props, State> {
     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} />;
@@ -113,12 +94,10 @@ class SingleUser extends React.Component<Props, State> {
     };
 
     return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
         <Page title={user.displayName}>
           <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
               <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} />} />
@@ -128,12 +107,8 @@ class SingleUser extends React.Component<Props, State> {
               />
               <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
             </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("singleUser.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
                 <NavLink
                   to={`${url}`}
                   icon="fas fa-info-circle"
@@ -154,7 +129,7 @@ class SingleUser extends React.Component<Props, State> {
             </SecondaryNavigationColumn>
           </CustomQueryFlexWrappedColumns>
         </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
     );
   }
 }