From 72886bd204e597616d14c60da0fe7fbc5880d20a Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 12 Dec 2023 09:18:50 +0100
Subject: [PATCH] Save collapse status of secondary navigation

Pushed-by: Florian Scholdei<florian.scholdei@cloudogu.com>
Co-authored-by: Florian Scholdei<florian.scholdei@cloudogu.com>
Co-authored-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
Committed-by: Florian Scholdei<florian.scholdei@cloudogu.com>
---
 .../secondary_navigation_status.yaml          |   2 +
 scm-ui/ui-api/src/localStorage.tsx            |  20 +-
 .../src/__snapshots__/storyshots.test.ts.snap |  12 +-
 scm-ui/ui-components/src/index.ts             |   1 +
 .../src/layout/Footer.stories.tsx             |   2 +
 .../src/layout/PrimaryContentColumn.tsx       |  19 +-
 .../src/layout/SecondaryNavigationColumn.tsx  |  21 +-
 .../src/navigation/ExternalNavLink.tsx        |  11 +-
 .../src/navigation/MenuContext.tsx            |   3 +
 .../ui-components/src/navigation/NavLink.tsx  |  22 +-
 .../SecondaryNavigation.stories.tsx           |   8 +-
 .../src/navigation/SecondaryNavigation.tsx    |  46 ++-
 .../navigation/SecondaryNavigationContext.ts  |  26 ++
 .../src/navigation/SubNavigation.tsx          |  37 ++-
 .../src/navigation/SubNavigationContext.ts    |  26 ++
 .../src/useSecondaryNavigation.tsx            |  52 ++++
 .../ui-webapp/src/admin/containers/Admin.tsx  | 203 +++++++------
 scm-ui/ui-webapp/src/containers/Profile.tsx   | 109 ++++---
 .../src/groups/containers/SingleGroup.tsx     |  99 +++---
 .../repos/components/EditRepoNavLink.test.tsx |  15 +-
 .../components/PermissionsNavLink.test.tsx    |  15 +-
 .../components/RepositoryNavLink.test.tsx     |  25 +-
 .../repos/components/RepositoryNavLink.tsx    |  18 +-
 .../src/repos/containers/RepositoryRoot.tsx   | 283 +++++++++---------
 .../namespaces/containers/NamespaceRoot.tsx   |  73 +++--
 .../src/users/containers/SingleUser.tsx       | 121 ++++----
 26 files changed, 675 insertions(+), 594 deletions(-)
 create mode 100644 gradle/changelog/secondary_navigation_status.yaml
 create mode 100644 scm-ui/ui-components/src/navigation/SecondaryNavigationContext.ts
 create mode 100644 scm-ui/ui-components/src/navigation/SubNavigationContext.ts
 create mode 100644 scm-ui/ui-components/src/useSecondaryNavigation.tsx

diff --git a/gradle/changelog/secondary_navigation_status.yaml b/gradle/changelog/secondary_navigation_status.yaml
new file mode 100644
index 0000000000..d6a68411fd
--- /dev/null
+++ b/gradle/changelog/secondary_navigation_status.yaml
@@ -0,0 +1,2 @@
+- type: changed
+  description: Save collapse status of secondary navigation
diff --git a/scm-ui/ui-api/src/localStorage.tsx b/scm-ui/ui-api/src/localStorage.tsx
index d4dc8d1361..e2e7c6fa4e 100644
--- a/scm-ui/ui-api/src/localStorage.tsx
+++ b/scm-ui/ui-api/src/localStorage.tsx
@@ -22,11 +22,12 @@
  * SOFTWARE.
  */
 
-import React, { createContext, FC, useCallback, useContext, useMemo, useState } from "react";
+import React, { createContext, FC, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 type LocalStorage = {
-  getItem: <T>(key: string, initialValue: T) => T;
+  getItem: <T>(key: string, fallback: T) => T;
   setItem: <T>(key: string, value: T) => void;
+  preload: <T>(key: string, initialValue: T) => void;
 };
 
 const LocalStorageContext = createContext<LocalStorage>(null as unknown as LocalStorage);
@@ -50,9 +51,14 @@ export const LocalStorageProvider: FC = ({ children }) => {
   }, []);
 
   const getItem = useCallback(
-    <T,>(key: string, initialValue: T): T => {
-      let initialLoadResult: T | undefined;
+    <T,>(key: string, fallback: T): T => (key in localStorageCache ? (localStorageCache[key] as T) : fallback),
+    [localStorageCache]
+  );
+
+  const preload = useCallback(
+    <T,>(key: string, initialValue: T) => {
       if (!(key in localStorageCache)) {
+        let initialLoadResult: T | undefined;
         try {
           const item = localStorage.getItem(key);
           initialLoadResult = item ? JSON.parse(item) : initialValue;
@@ -63,13 +69,12 @@ export const LocalStorageProvider: FC = ({ children }) => {
         }
         setItem(key, initialLoadResult);
       }
-      return initialLoadResult ?? (localStorageCache[key] as T);
     },
     [localStorageCache, setItem]
   );
 
   return (
-    <LocalStorageContext.Provider value={useMemo(() => ({ getItem, setItem }), [getItem, setItem])}>
+    <LocalStorageContext.Provider value={useMemo(() => ({ getItem, setItem, preload }), [getItem, preload, setItem])}>
       {children}
     </LocalStorageContext.Provider>
   );
@@ -85,7 +90,7 @@ export function useLocalStorage<T>(
   key: string,
   initialValue: T
 ): [value: T, setValue: (value: T | ((previousConfig: T) => T)) => void] {
-  const { getItem, setItem } = useContext(LocalStorageContext);
+  const { getItem, setItem, preload } = useContext(LocalStorageContext);
   const value = useMemo(() => getItem(key, initialValue), [getItem, initialValue, key]);
   const setValue = useCallback(
     (newValue: T | ((previousConfig: T) => T)) =>
@@ -95,5 +100,6 @@ export function useLocalStorage<T>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [key, setItem, value]
   );
+  useEffect(() => preload(key, initialValue), [initialValue, key, preload]);
   return useMemo(() => [value, setValue], [setValue, value]);
 }
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 64255ef8bd..661171f18a 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -72218,7 +72218,7 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
     >
       <div>
         <p
@@ -72237,7 +72237,6 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
         </p>
         <ul
           className="menu-list"
-          onClick={[Function]}
         >
           <li>
             <a
@@ -72280,7 +72279,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
     >
       <div>
         <p
@@ -72299,7 +72298,6 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
         </p>
         <ul
           className="menu-list"
-          onClick={[Function]}
         >
           <li>
             <a
@@ -72342,7 +72340,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
     >
       <div>
         <p
@@ -72361,7 +72359,6 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
         </p>
         <ul
           className="menu-list"
-          onClick={[Function]}
         >
           <li>
             <a
@@ -72430,7 +72427,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 ioXCUt menu"
     >
       <div>
         <p
@@ -72449,7 +72446,6 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
         </p>
         <ul
           className="menu-list"
-          onClick={[Function]}
         >
           <li>
             <a
diff --git a/scm-ui/ui-components/src/index.ts b/scm-ui/ui-components/src/index.ts
index 3fc13b758c..254e17b3be 100644
--- a/scm-ui/ui-components/src/index.ts
+++ b/scm-ui/ui-components/src/index.ts
@@ -89,6 +89,7 @@ export * from "./markdown/PluginApi";
 export * from "./devices";
 export { default as copyToClipboard } from "./CopyToClipboard";
 export { createA11yId } from "./createA11yId";
+export { useSecondaryNavigation } from "./useSecondaryNavigation";
 
 export { default as comparators } from "./comparators";
 
diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx
index 60c0b1c8ee..5e345b8de7 100644
--- a/scm-ui/ui-components/src/layout/Footer.stories.tsx
+++ b/scm-ui/ui-components/src/layout/Footer.stories.tsx
@@ -26,6 +26,7 @@ import { storiesOf } from "@storybook/react";
 import Footer from "./Footer";
 import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
 import { Me } from "@scm-manager/ui-types";
+import { LocalStorageProvider } from "@scm-manager/ui-api";
 import { EXTENSION_POINT } from "../avatar/Avatar";
 // @ts-ignore ignore unknown png
 import hitchhiker from "../__resources__/hitchhiker.png";
@@ -62,6 +63,7 @@ const withBinder = (binder: Binder) => {
 };
 
 storiesOf("Footer", module)
+  .addDecorator((story) => <LocalStorageProvider>{story()}</LocalStorageProvider>)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => {
     return <Footer me={trillian} version="2.0.0" links={{}} />;
diff --git a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
index 73ddadd0a4..78f0704b4f 100644
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
@@ -22,26 +22,9 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import styled from "styled-components";
-import useMenuContext from "../navigation/MenuContext";
-
-const PrimaryColumn = styled.div<{ collapsed: boolean }>`
-  /* This is the counterpart to the specific column in SecondaryNavigationColumn. */
-  flex: none;
-  width: ${(props: { collapsed: boolean }) => (props.collapsed ? "89.7%" : "75%")};
-  /* Render this column to full size if column construct breaks (page size too small). */
-  @media (max-width: 785px) {
-    width: 100%;
-  }
-`;
 
 const PrimaryContentColumn: FC = ({ children }) => {
-  const context = useMenuContext();
-  return (
-    <PrimaryColumn className="column" collapsed={context.isCollapsed()}>
-      {children}
-    </PrimaryColumn>
-  );
+  return <div className="column">{children}</div>;
 };
 
 export default PrimaryContentColumn;
diff --git a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
index 751b5495d4..4a3dfd0c67 100644
--- a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
+++ b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
@@ -23,28 +23,13 @@
  */
 import React, { FC } from "react";
 import styled from "styled-components";
-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. 
-  Navigation size should be as constant as possible. */
-  flex: none;
-  width: ${(props) => (props.collapsed ? "5.5rem" : "20.5rem")};
-  max-width: ${(props: { collapsed: boolean }) => (props.collapsed ? "11.3%" : "25%")};
-  /* Render this column to full size if column construct breaks (page size too small). */
-  @media (max-width: 785px) {
-    width: 100%;
-    max-width: 100%;
-  }
+const SecondaryColumn = styled.div`
+  flex: 0 0 auto;
 `;
 
 const SecondaryNavigationColumn: FC = ({ children }) => {
-  const context = useMenuContext();
-  return (
-    <SecondaryColumn className="column" collapsed={context.isCollapsed()}>
-      {children}
-    </SecondaryColumn>
-  );
+  return <SecondaryColumn className="column">{children}</SecondaryColumn>;
 };
 
 export default SecondaryNavigationColumn;
diff --git a/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx b/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx
index 6684d9f0f6..995bdcccc4 100644
--- a/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/ExternalNavLink.tsx
@@ -21,10 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import classNames from "classnames";
+import { useSecondaryNavigation } from "@scm-manager/ui-components";
 import ExternalLink from "./ExternalLink";
-import useMenuContext from "./MenuContext";
+import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 
 type Props = {
   to: string;
@@ -33,8 +34,8 @@ type Props = {
 };
 
 const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
-  const context = useMenuContext();
-  const collapsed = context.isCollapsed();
+  const { collapsed } = useSecondaryNavigation();
+  const isSecondaryNavigation = useContext(SecondaryNavigationContext);
 
   let showIcon;
   if (icon) {
@@ -49,7 +50,7 @@ const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
     <li title={collapsed ? label : undefined}>
       <ExternalLink to={to} className={collapsed ? "has-text-centered" : ""}>
         {showIcon}
-        {collapsed ? null : label}
+        {isSecondaryNavigation && collapsed ? null : label}
       </ExternalLink>
     </li>
   );
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.tsx b/scm-ui/ui-components/src/navigation/MenuContext.tsx
index ff5c84d0ed..340cbdb054 100644
--- a/scm-ui/ui-components/src/navigation/MenuContext.tsx
+++ b/scm-ui/ui-components/src/navigation/MenuContext.tsx
@@ -29,6 +29,9 @@ export type MenuContext = {
   setCollapsed: (collapsed: boolean) => void;
 };
 
+/**
+ * @deprecated
+ */
 export const MenuContext = React.createContext<MenuContext>({
   isCollapsed() {
     return false;
diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index b2763e5bc0..bd7cad9d83 100644
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -21,13 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React, { FC, useContext, useEffect } from "react";
 import classNames from "classnames";
 import { Link } from "react-router-dom";
+import { useSecondaryNavigation } from "@scm-manager/ui-components";
 import { RoutingProps } from "./RoutingProps";
-import useMenuContext from "./MenuContext";
 import useActiveMatch from "./useActiveMatch";
 import { createAttributesForTesting } from "../devBuild";
+import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
+import { SubNavigationContext } from "./SubNavigationContext";
 
 type Props = RoutingProps & {
   label: string;
@@ -55,9 +57,15 @@ const NavLinkContent: FC<NavLinkContentProp> = ({ label, icon, collapsed }) => (
 
 const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, testId, children, ...contentProps }) => {
   const active = useActiveMatch({ to, activeWhenMatch, activeOnlyWhenExact });
+  const { collapsed, setCollapsible } = useSecondaryNavigation();
+  const isSecondaryNavigation = useContext(SecondaryNavigationContext);
+  const isSubNavigation = useContext(SubNavigationContext);
 
-  const context = useMenuContext();
-  const collapsed = context.isCollapsed();
+  useEffect(() => {
+    if (isSecondaryNavigation && active) {
+      setCollapsible(!isSubNavigation);
+    }
+  }, [active, isSecondaryNavigation, isSubNavigation, setCollapsible]);
 
   return (
     <li title={collapsed ? title : undefined}>
@@ -66,7 +74,11 @@ const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, t
         to={to}
         {...createAttributesForTesting(testId)}
       >
-        {children ? children : <NavLinkContent {...contentProps} collapsed={collapsed} />}
+        {children ? (
+          children
+        ) : (
+          <NavLinkContent {...contentProps} collapsed={(isSecondaryNavigation && collapsed) ?? false} />
+        )}
       </Link>
     </li>
   );
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
index d623eb9c76..c0bba5b171 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
@@ -24,13 +24,13 @@
 
 import { storiesOf } from "@storybook/react";
 import React, { ReactElement } from "react";
+import { LocalStorageProvider } from "@scm-manager/ui-api";
 import SecondaryNavigation from "./SecondaryNavigation";
 import SecondaryNavigationItem from "./SecondaryNavigationItem";
 import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
 import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
 import { MemoryRouter } from "react-router-dom";
-import { StateMenuContextProvider } from "./MenuContext";
 
 const Columns = styled.div`
   margin: 2rem;
@@ -53,8 +53,8 @@ const withRoute = (route: string) => {
 };
 
 storiesOf("Secondary Navigation", module)
-  .addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
-  .addDecorator(story => (
+  .addDecorator((story) => <LocalStorageProvider>{story()}</LocalStorageProvider>)
+  .addDecorator((story) => (
     <Columns className="columns">
       <div className="column is-3">{story()}</div>
     </Columns>
@@ -92,7 +92,7 @@ storiesOf("Secondary Navigation", module)
       <SecondaryNavigation label="Hitchhiker">
         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
         <SecondaryNavigationItem
-          activeWhenMatch={route => route.location?.pathname === "/hog"}
+          activeWhenMatch={(route) => route.location?.pathname === "/hog"}
           to="/heart-of-gold"
           icon="fas fa-star"
           label="Heart Of Gold"
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index afd51eddc1..50b4ced3f3 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC } from "react";
 import styled from "styled-components";
-import useMenuContext from "./MenuContext";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { useSecondaryNavigation } from "@scm-manager/ui-components";
+import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 
 type Props = {
   label: string;
@@ -37,11 +37,12 @@ type CollapsedProps = {
   collapsed: boolean;
 };
 
-const SectionContainer = styled.aside`
+const SectionContainer = styled.aside<{ collapsed: boolean }>`
+  flex: 0 0 auto;
   position: sticky;
   position: -webkit-sticky; /* Safari */
   top: 5rem;
-  width: 100%;
+  min-width: ${(props: { collapsed: boolean }) => (props.collapsed ? "0" : "200px")};
 
   @media (max-height: 900px) {
     position: relative;
@@ -63,42 +64,29 @@ const MenuLabel = styled.p<CollapsedProps>`
 
 const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true }) => {
   const [t] = useTranslation("commons");
-  const menuContext = useMenuContext();
-  const isCollapsed = collapsible && menuContext.isCollapsed();
+  const { collapsible: isCollapsible, collapsed, toggleCollapse } = useSecondaryNavigation(collapsible);
 
-  const toggleCollapseState = () => {
-    if (collapsible) {
-      menuContext.setCollapsed(!isCollapsed);
-    }
-  };
-
-  const uncollapseMenu = () => {
-    if (collapsible && isCollapsed) {
-      menuContext.setCollapsed(false);
-    }
-  };
-
-  const arrowIcon = isCollapsed ? <i className="fas fa-caret-left" /> : <i className="fas fa-caret-down" />;
-  const menuAriaLabel = isCollapsed ? t("secondaryNavigation.showContent") : t("secondaryNavigation.hideContent");
+  const arrowIcon = collapsed ? <i className="fas fa-caret-left" /> : <i className="fas fa-caret-down" />;
+  const menuAriaLabel = collapsed ? t("secondaryNavigation.showContent") : t("secondaryNavigation.hideContent");
 
   return (
-    <SectionContainer className="menu">
+    <SectionContainer className="menu" collapsed={collapsed ?? false}>
       <div>
         <MenuLabel
-          className={classNames("menu-label", { "is-clickable": collapsible })}
-          collapsed={isCollapsed}
-          onClick={toggleCollapseState}
+          className={classNames("menu-label", { "is-clickable": isCollapsible })}
+          collapsed={collapsed}
+          onClick={toggleCollapse}
           aria-label={menuAriaLabel}
         >
-          {collapsible ? (
-            <Icon className="is-medium" collapsed={isCollapsed}>
+          {isCollapsible ? (
+            <Icon className="is-medium" collapsed={collapsed}>
               {arrowIcon}
             </Icon>
           ) : null}
-          {isCollapsed ? "" : label}
+          {collapsed ? "" : label}
         </MenuLabel>
-        <ul className="menu-list" onClick={uncollapseMenu}>
-          {children}
+        <ul className="menu-list">
+          <SecondaryNavigationContext.Provider value={true}>{children}</SecondaryNavigationContext.Provider>
         </ul>
       </div>
     </SectionContainer>
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigationContext.ts b/scm-ui/ui-components/src/navigation/SecondaryNavigationContext.ts
new file mode 100644
index 0000000000..08372fa741
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigationContext.ts
@@ -0,0 +1,26 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from "react";
+
+export const SecondaryNavigationContext = React.createContext(false);
diff --git a/scm-ui/ui-components/src/navigation/SubNavigation.tsx b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
index 2614ba8d45..ed0ae128f4 100644
--- a/scm-ui/ui-components/src/navigation/SubNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
@@ -21,13 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
-import useMenuContext from "./MenuContext";
+import { useSecondaryNavigation } from "@scm-manager/ui-components";
 import { RoutingProps } from "./RoutingProps";
 import useActiveMatch from "./useActiveMatch";
 import { createAttributesForTesting } from "../devBuild";
+import { SubNavigationContext } from "./SubNavigationContext";
 
 type Props = RoutingProps & {
   label: string;
@@ -46,9 +47,7 @@ const SubNavigation: FC<Props> = ({
   children,
   testId,
 }) => {
-  const context = useMenuContext();
-  const collapsed = context.isCollapsed();
-
+  const { collapsed, setCollapsible } = useSecondaryNavigation();
   const parents = to.split("/");
   parents.splice(-1, 1);
   const parent = parents.join("/");
@@ -59,6 +58,12 @@ const SubNavigation: FC<Props> = ({
     activeWhenMatch,
   });
 
+  useEffect(() => {
+    if (active) {
+      setCollapsible(false);
+    }
+  }, [active, setCollapsible]);
+
   let defaultIcon = "fas fa-cog";
   if (icon) {
     defaultIcon = icon;
@@ -70,16 +75,18 @@ const SubNavigation: FC<Props> = ({
   }
 
   return (
-    <li title={collapsed ? title : undefined}>
-      <Link
-        className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
-        to={to}
-        {...createAttributesForTesting(testId)}
-      >
-        <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
-      </Link>
-      {childrenList}
-    </li>
+    <SubNavigationContext.Provider value={true}>
+      <li title={collapsed ? title : undefined}>
+        <Link
+          className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
+          to={to}
+          {...createAttributesForTesting(testId)}
+        >
+          <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
+        </Link>
+        {childrenList}
+      </li>
+    </SubNavigationContext.Provider>
   );
 };
 
diff --git a/scm-ui/ui-components/src/navigation/SubNavigationContext.ts b/scm-ui/ui-components/src/navigation/SubNavigationContext.ts
new file mode 100644
index 0000000000..66042b649b
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SubNavigationContext.ts
@@ -0,0 +1,26 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from "react";
+
+export const SubNavigationContext = React.createContext(false);
diff --git a/scm-ui/ui-components/src/useSecondaryNavigation.tsx b/scm-ui/ui-components/src/useSecondaryNavigation.tsx
new file mode 100644
index 0000000000..2660eb47ee
--- /dev/null
+++ b/scm-ui/ui-components/src/useSecondaryNavigation.tsx
@@ -0,0 +1,52 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { useLocalStorage } from "@scm-manager/ui-api";
+import { useCallback, useMemo } from "react";
+
+export const useSecondaryNavigation = (isNavigationCollapsible = true) => {
+  const [isCollapsed, setCollapsed] = useLocalStorage<boolean>("secondaryNavigation.collapsed", false);
+  const [isRouteCollapsible, setRouteCollapsible] = useLocalStorage<boolean>("secondaryNavigation.collapsible", true);
+
+  const collapsible = useMemo(
+    () => isRouteCollapsible && isNavigationCollapsible,
+    [isNavigationCollapsible, isRouteCollapsible]
+  );
+  const collapsed = useMemo(() => collapsible && isCollapsed, [collapsible, isCollapsed]);
+
+  const toggleCollapse = useCallback(() => {
+    if (collapsible) {
+      setCollapsed((previousIsCollapsed) => !previousIsCollapsed);
+    }
+  }, [collapsible, setCollapsed]);
+
+  return useMemo(
+    () => ({
+      collapsed,
+      collapsible,
+      setCollapsible: setRouteCollapsible,
+      toggleCollapse,
+    }),
+    [collapsed, collapsible, setRouteCollapsible, toggleCollapse]
+  );
+};
diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index cea38e7252..db137496cd 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -32,9 +32,8 @@ import {
   PrimaryContentColumn,
   SecondaryNavigation,
   SecondaryNavigationColumn,
-  StateMenuContextProvider,
   SubNavigation,
-  urls
+  urls,
 } from "@scm-manager/ui-components";
 import AdminDetails from "./AdminDetails";
 import PluginsOverview from "../plugins/containers/PluginsOverview";
@@ -60,115 +59,113 @@ const Admin: FC = () => {
   const url = urls.matchedUrlFromMatch(match);
   const extensionProps = {
     links,
-    url
+    url,
   };
 
   return (
-    <StateMenuContextProvider>
-      <Page>
-        <CustomQueryFlexWrappedColumns>
-          <PrimaryContentColumn>
-            <Switch>
-              <Redirect exact from={url} to={`${url}/info`} />
-              <Route path={`${url}/info`} exact component={AdminDetails} />
-              <Route path={`${url}/settings/general`} exact component={GlobalConfig} />
-              <Redirect exact from={`${url}/plugins`} to={`${url}/plugins/installed/`} />
-              <Route path={`${url}/plugins/installed`} exact>
-                <PluginsOverview installed={true} />
-              </Route>
-              <Route path={`${url}/plugins/installed/:page`} exact>
-                <PluginsOverview installed={true} />
-              </Route>
-              <Route path={`${url}/plugins/available`} exact>
-                <PluginsOverview installed={false} />
-              </Route>
-              <Route path={`${url}/plugins/available/:page`} exact>
-                <PluginsOverview installed={false} />
-              </Route>
-              <Route path={`${url}/role/:role`}>
-                <SingleRepositoryRole />
-              </Route>
-              <Route path={`${url}/roles`} exact>
-                <RepositoryRoles baseUrl={`${url}/roles`} />
-              </Route>
-              <Route path={`${url}/roles/create`}>
-                <CreateRepositoryRole />
-              </Route>
-              <Route path={`${url}/roles/:page`} exact>
-                <RepositoryRoles baseUrl={`${url}/roles`} />
-              </Route>
-              <ExtensionPoint<extensionPoints.AdminRoute> name="admin.route" props={extensionProps} renderAll={true} />
-            </Switch>
-          </PrimaryContentColumn>
-          <SecondaryNavigationColumn>
-            <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
+    <Page>
+      <CustomQueryFlexWrappedColumns>
+        <PrimaryContentColumn>
+          <Switch>
+            <Redirect exact from={url} to={`${url}/info`} />
+            <Route path={`${url}/info`} exact component={AdminDetails} />
+            <Route path={`${url}/settings/general`} exact component={GlobalConfig} />
+            <Redirect exact from={`${url}/plugins`} to={`${url}/plugins/installed/`} />
+            <Route path={`${url}/plugins/installed`} exact>
+              <PluginsOverview installed={true} />
+            </Route>
+            <Route path={`${url}/plugins/installed/:page`} exact>
+              <PluginsOverview installed={true} />
+            </Route>
+            <Route path={`${url}/plugins/available`} exact>
+              <PluginsOverview installed={false} />
+            </Route>
+            <Route path={`${url}/plugins/available/:page`} exact>
+              <PluginsOverview installed={false} />
+            </Route>
+            <Route path={`${url}/role/:role`}>
+              <SingleRepositoryRole />
+            </Route>
+            <Route path={`${url}/roles`} exact>
+              <RepositoryRoles baseUrl={`${url}/roles`} />
+            </Route>
+            <Route path={`${url}/roles/create`}>
+              <CreateRepositoryRole />
+            </Route>
+            <Route path={`${url}/roles/:page`} exact>
+              <RepositoryRoles baseUrl={`${url}/roles`} />
+            </Route>
+            <ExtensionPoint<extensionPoints.AdminRoute> name="admin.route" props={extensionProps} renderAll={true} />
+          </Switch>
+        </PrimaryContentColumn>
+        <SecondaryNavigationColumn>
+          <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
+            <NavLink
+              to={`${url}/info`}
+              icon="fas fa-info-circle"
+              label={t("admin.menu.informationNavLink")}
+              title={t("admin.menu.informationNavLink")}
+              testId="admin-information-link"
+            />
+            {(availablePluginsLink || installedPluginsLink) && (
+              <SubNavigation
+                to={`${url}/plugins/`}
+                icon="fas fa-puzzle-piece"
+                label={t("plugins.menu.pluginsNavLink")}
+                title={t("plugins.menu.pluginsNavLink")}
+                testId="admin-plugins-link"
+              >
+                {installedPluginsLink && (
+                  <NavLink
+                    to={`${url}/plugins/installed/`}
+                    label={t("plugins.menu.installedNavLink")}
+                    testId="admin-installed-plugins-link"
+                  />
+                )}
+                {availablePluginsLink && (
+                  <NavLink
+                    to={`${url}/plugins/available/`}
+                    label={t("plugins.menu.availableNavLink")}
+                    testId="admin-available-plugins-link"
+                  />
+                )}
+              </SubNavigation>
+            )}
+            <NavLink
+              to={`${url}/roles/`}
+              icon="fas fa-user-shield"
+              label={t("repositoryRole.navLink")}
+              title={t("repositoryRole.navLink")}
+              testId="admin-repository-role-link"
+              activeWhenMatch={matchesRoles}
+              activeOnlyWhenExact={false}
+            />
+            <ExtensionPoint<extensionPoints.AdminNavigation>
+              name="admin.navigation"
+              props={extensionProps}
+              renderAll={true}
+            />
+            <SubNavigation
+              to={`${url}/settings/general`}
+              label={t("admin.menu.settingsNavLink")}
+              title={t("admin.menu.settingsNavLink")}
+              testId="admin-settings-link"
+            >
               <NavLink
-                to={`${url}/info`}
-                icon="fas fa-info-circle"
-                label={t("admin.menu.informationNavLink")}
-                title={t("admin.menu.informationNavLink")}
-                testId="admin-information-link"
+                to={`${url}/settings/general`}
+                label={t("admin.menu.generalNavLink")}
+                testId="admin-settings-general-link"
               />
-              {(availablePluginsLink || installedPluginsLink) && (
-                <SubNavigation
-                  to={`${url}/plugins/`}
-                  icon="fas fa-puzzle-piece"
-                  label={t("plugins.menu.pluginsNavLink")}
-                  title={t("plugins.menu.pluginsNavLink")}
-                  testId="admin-plugins-link"
-                >
-                  {installedPluginsLink && (
-                    <NavLink
-                      to={`${url}/plugins/installed/`}
-                      label={t("plugins.menu.installedNavLink")}
-                      testId="admin-installed-plugins-link"
-                    />
-                  )}
-                  {availablePluginsLink && (
-                    <NavLink
-                      to={`${url}/plugins/available/`}
-                      label={t("plugins.menu.availableNavLink")}
-                      testId="admin-available-plugins-link"
-                    />
-                  )}
-                </SubNavigation>
-              )}
-              <NavLink
-                to={`${url}/roles/`}
-                icon="fas fa-user-shield"
-                label={t("repositoryRole.navLink")}
-                title={t("repositoryRole.navLink")}
-                testId="admin-repository-role-link"
-                activeWhenMatch={matchesRoles}
-                activeOnlyWhenExact={false}
-              />
-              <ExtensionPoint<extensionPoints.AdminNavigation>
-                name="admin.navigation"
+              <ExtensionPoint<extensionPoints.AdminSetting>
+                name="admin.setting"
                 props={extensionProps}
                 renderAll={true}
               />
-              <SubNavigation
-                to={`${url}/settings/general`}
-                label={t("admin.menu.settingsNavLink")}
-                title={t("admin.menu.settingsNavLink")}
-                testId="admin-settings-link"
-              >
-                <NavLink
-                  to={`${url}/settings/general`}
-                  label={t("admin.menu.generalNavLink")}
-                  testId="admin-settings-general-link"
-                />
-                <ExtensionPoint<extensionPoints.AdminSetting>
-                  name="admin.setting"
-                  props={extensionProps}
-                  renderAll={true}
-                />
-              </SubNavigation>
-            </SecondaryNavigation>
-          </SecondaryNavigationColumn>
-        </CustomQueryFlexWrappedColumns>
-      </Page>
-    </StateMenuContextProvider>
+            </SubNavigation>
+          </SecondaryNavigation>
+        </SecondaryNavigationColumn>
+      </CustomQueryFlexWrappedColumns>
+    </Page>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index 2168399895..d9331329c6 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -32,7 +32,6 @@ import {
   PrimaryContentColumn,
   SecondaryNavigation,
   SecondaryNavigationColumn,
-  StateMenuContextProvider,
   SubNavigation,
   urls,
 } from "@scm-manager/ui-components";
@@ -76,67 +75,61 @@ const Profile: FC = () => {
   };
 
   return (
-    <StateMenuContextProvider>
-      <Page title={me.displayName}>
-        <CustomQueryFlexWrappedColumns>
-          <PrimaryContentColumn>
-            <Route path={url} exact>
-              <ProfileInfo me={me} />
+    <Page title={me.displayName}>
+      <CustomQueryFlexWrappedColumns>
+        <PrimaryContentColumn>
+          <Route path={url} exact>
+            <ProfileInfo me={me} />
+          </Route>
+          <Route path={`${url}/settings/theme`} exact>
+            <Theme />
+          </Route>
+          <Route path={`${url}/settings/accessibility`} exact>
+            <Accessibility />
+          </Route>
+          {mayChangePassword && (
+            <Route path={`${url}/settings/password`}>
+              <ChangeUserPassword me={me} />
             </Route>
-            <Route path={`${url}/settings/theme`} exact>
-              <Theme />
+          )}
+          {canManagePublicKeys && (
+            <Route path={`${url}/settings/publicKeys`}>
+              <SetPublicKeys user={me} />
             </Route>
-            <Route path={`${url}/settings/accessibility`} exact>
-              <Accessibility />
+          )}
+          {canManageApiKeys && (
+            <Route path={`${url}/settings/apiKeys`}>
+              <SetApiKeys user={me} />
             </Route>
-            {mayChangePassword && (
-              <Route path={`${url}/settings/password`}>
-                <ChangeUserPassword me={me} />
-              </Route>
-            )}
-            {canManagePublicKeys && (
-              <Route path={`${url}/settings/publicKeys`}>
-                <SetPublicKeys user={me} />
-              </Route>
-            )}
-            {canManageApiKeys && (
-              <Route path={`${url}/settings/apiKeys`}>
-                <SetApiKeys user={me} />
-              </Route>
-            )}
-            <ExtensionPoint<extensionPoints.ProfileRoute>
-              name="profile.route"
-              props={extensionProps}
-              renderAll={true}
+          )}
+          <ExtensionPoint<extensionPoints.ProfileRoute> name="profile.route" props={extensionProps} renderAll={true} />
+        </PrimaryContentColumn>
+        <SecondaryNavigationColumn>
+          <SecondaryNavigation label={t("profile.navigationLabel")}>
+            <NavLink
+              to={url}
+              icon="fas fa-info-circle"
+              label={t("profile.informationNavLink")}
+              title={t("profile.informationNavLink")}
             />
-          </PrimaryContentColumn>
-          <SecondaryNavigationColumn>
-            <SecondaryNavigation label={t("profile.navigationLabel")}>
-              <NavLink
-                to={url}
-                icon="fas fa-info-circle"
-                label={t("profile.informationNavLink")}
-                title={t("profile.informationNavLink")}
-              />
-              <SubNavigation
-                to={`${url}/settings/theme`}
-                label={t("profile.settingsNavLink")}
-                title={t("profile.settingsNavLink")}
-              >
-                <NavLink to={`${url}/settings/theme`} label={t("profile.theme.navLink")} />
-                <NavLink to={`${url}/settings/accessibility`} label={t("profile.accessibility.navLink")} />
-                {mayChangePassword && (
-                  <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
-                )}
-                <SetPublicKeysNavLink user={me} publicKeyUrl={`${url}/settings/publicKeys`} />
-                <SetApiKeysNavLink user={me} apiKeyUrl={`${url}/settings/apiKeys`} />
-                <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
-              </SubNavigation>
-            </SecondaryNavigation>
-          </SecondaryNavigationColumn>
-        </CustomQueryFlexWrappedColumns>
-      </Page>
-    </StateMenuContextProvider>
+            <SubNavigation
+              to={`${url}/settings/theme`}
+              label={t("profile.settingsNavLink")}
+              title={t("profile.settingsNavLink")}
+            >
+              <NavLink to={`${url}/settings/theme`} label={t("profile.theme.navLink")} />
+              <NavLink to={`${url}/settings/accessibility`} label={t("profile.accessibility.navLink")} />
+              {mayChangePassword && (
+                <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
+              )}
+              <SetPublicKeysNavLink user={me} publicKeyUrl={`${url}/settings/publicKeys`} />
+              <SetApiKeysNavLink user={me} apiKeyUrl={`${url}/settings/apiKeys`} />
+              <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
+            </SubNavigation>
+          </SecondaryNavigation>
+        </SecondaryNavigationColumn>
+      </CustomQueryFlexWrappedColumns>
+    </Page>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index 24cbb1a4d1..430aa3f47b 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -34,9 +34,8 @@ import {
   PrimaryContentColumn,
   SecondaryNavigation,
   SecondaryNavigationColumn,
-  StateMenuContextProvider,
   SubNavigation,
-  urls
+  urls,
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
@@ -63,63 +62,61 @@ const SingleGroup: FC = () => {
 
   const extensionProps = {
     group,
-    url
+    url,
   };
 
   return (
-    <StateMenuContextProvider>
-      <Page title={group.name}>
-        <CustomQueryFlexWrappedColumns>
-          <PrimaryContentColumn>
-            <Route path={escapedUrl} exact>
-              <Details group={group} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/general`} exact>
-              <EditGroup group={group} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/permissions`} exact>
-              <SetGroupPermissions group={group} />
-            </Route>
-            <ExtensionPoint<extensionPoints.GroupRoute>
-              name="group.route"
-              props={{
-                group,
-                url: escapedUrl
-              }}
+    <Page title={group.name}>
+      <CustomQueryFlexWrappedColumns>
+        <PrimaryContentColumn>
+          <Route path={escapedUrl} exact>
+            <Details group={group} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/general`} exact>
+            <EditGroup group={group} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/permissions`} exact>
+            <SetGroupPermissions group={group} />
+          </Route>
+          <ExtensionPoint<extensionPoints.GroupRoute>
+            name="group.route"
+            props={{
+              group,
+              url: escapedUrl,
+            }}
+            renderAll={true}
+          />
+        </PrimaryContentColumn>
+        <SecondaryNavigationColumn>
+          <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
+            <NavLink
+              to={`${url}`}
+              icon="fas fa-info-circle"
+              label={t("singleGroup.menu.informationNavLink")}
+              title={t("singleGroup.menu.informationNavLink")}
+            />
+            <ExtensionPoint<extensionPoints.GroupNavigation>
+              name="group.navigation"
+              props={extensionProps}
               renderAll={true}
             />
-          </PrimaryContentColumn>
-          <SecondaryNavigationColumn>
-            <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
-              <NavLink
-                to={`${url}`}
-                icon="fas fa-info-circle"
-                label={t("singleGroup.menu.informationNavLink")}
-                title={t("singleGroup.menu.informationNavLink")}
-              />
-              <ExtensionPoint<extensionPoints.GroupNavigation>
-                name="group.navigation"
+            <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<extensionPoints.GroupSetting>
+                name="group.setting"
                 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<extensionPoints.GroupSetting>
-                  name="group.setting"
-                  props={extensionProps}
-                  renderAll={true}
-                />
-              </SubNavigation>
-            </SecondaryNavigation>
-          </SecondaryNavigationColumn>
-        </CustomQueryFlexWrappedColumns>
-      </Page>
-    </StateMenuContextProvider>
+            </SubNavigation>
+          </SecondaryNavigation>
+        </SecondaryNavigationColumn>
+      </CustomQueryFlexWrappedColumns>
+    </Page>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.test.tsx b/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.test.tsx
index 0fd665e93d..21c620a659 100644
--- a/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.test.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.test.tsx
@@ -24,6 +24,7 @@
 import React from "react";
 import EditRepoNavLink from "./EditRepoNavLink";
 import { mount, shallow } from "@scm-manager/ui-tests";
+import { LocalStorageProvider } from "@scm-manager/ui-api";
 
 describe("GeneralNavLink", () => {
   it("should render nothing, if the modify link is missing", () => {
@@ -31,7 +32,7 @@ describe("GeneralNavLink", () => {
       namespace: "space",
       name: "name",
       type: "git",
-      _links: {}
+      _links: {},
     };
 
     const navLink = shallow(<EditRepoNavLink repository={repository} editUrl="" />);
@@ -45,12 +46,16 @@ describe("GeneralNavLink", () => {
       type: "git",
       _links: {
         update: {
-          href: "/repositories"
-        }
-      }
+          href: "/repositories",
+        },
+      },
     };
 
-    const navLink = mount(<EditRepoNavLink repository={repository} editUrl="" />);
+    const navLink = mount(
+      <LocalStorageProvider>
+        <EditRepoNavLink repository={repository} editUrl="" />
+      </LocalStorageProvider>
+    );
     expect(navLink.text()).toBe("repositoryRoot.menu.generalNavLink");
   });
 });
diff --git a/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.test.tsx b/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.test.tsx
index 959f8b4b07..8bd121cc9b 100644
--- a/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.test.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.test.tsx
@@ -24,12 +24,13 @@
 import React from "react";
 import { mount, shallow } from "@scm-manager/ui-tests";
 import "@scm-manager/ui-tests";
+import { LocalStorageProvider } from "@scm-manager/ui-api";
 import PermissionsNavLink from "./PermissionsNavLink";
 
 describe("PermissionsNavLink", () => {
   it("should render nothing, if the modify link is missing", () => {
     const repository = {
-      _links: {}
+      _links: {},
     };
 
     const navLink = shallow(<PermissionsNavLink repository={repository} permissionUrl="" />);
@@ -40,12 +41,16 @@ describe("PermissionsNavLink", () => {
     const repository = {
       _links: {
         permissions: {
-          href: "/permissions"
-        }
-      }
+          href: "/permissions",
+        },
+      },
     };
 
-    const navLink = mount(<PermissionsNavLink repository={repository} permissionUrl="" />);
+    const navLink = mount(
+      <LocalStorageProvider>
+        <PermissionsNavLink repository={repository} permissionUrl="" />
+      </LocalStorageProvider>
+    );
     expect(navLink.text()).toBe("repositoryRoot.menu.permissionsNavLink");
   });
 });
diff --git a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.test.tsx b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.test.tsx
index 799fa2ff42..1071715b75 100644
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.test.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.test.tsx
@@ -24,6 +24,7 @@
 import React from "react";
 import { mount, shallow } from "@scm-manager/ui-tests";
 import "@scm-manager/ui-tests";
+import { LocalStorageProvider } from "@scm-manager/ui-api";
 import RepositoryNavLink from "./RepositoryNavLink";
 
 describe("RepositoryNavLink", () => {
@@ -32,7 +33,7 @@ describe("RepositoryNavLink", () => {
       namespace: "Namespace",
       name: "Repo",
       type: "GIT",
-      _links: {}
+      _links: {},
     };
 
     const navLink = shallow(
@@ -54,19 +55,21 @@ describe("RepositoryNavLink", () => {
       type: "GIT",
       _links: {
         sources: {
-          href: "/sources"
-        }
-      }
+          href: "/sources",
+        },
+      },
     };
 
     const navLink = mount(
-      <RepositoryNavLink
-        repository={repository}
-        linkName="sources"
-        to="/sources"
-        label="Sources"
-        activeOnlyWhenExact={true}
-      />
+      <LocalStorageProvider>
+        <RepositoryNavLink
+          repository={repository}
+          linkName="sources"
+          to="/sources"
+          label="Sources"
+          activeOnlyWhenExact={true}
+        />
+      </LocalStorageProvider>
     );
     expect(navLink.text()).toBe("Sources");
   });
diff --git a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
index d6eec2f505..1545d9f4b4 100644
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
 import { Repository } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
 import { RouteProps } from "react-router-dom";
@@ -40,16 +40,12 @@ type Props = {
 /**
  * Component renders only if the repository contains the link with the given name.
  */
-class RepositoryNavLink extends React.Component<Props> {
-  render() {
-    const { repository, linkName } = this.props;
-
-    if (!repository._links[linkName]) {
-      return null;
-    }
-
-    return <NavLink {...this.props} />;
+const RepositoryNavLink: FC<Props> = ({ repository, linkName, ...props }) => {
+  if (!repository._links[linkName]) {
+    return null;
   }
-}
+
+  return <NavLink {...props} />;
+};
 
 export default RepositoryNavLink;
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 8637b2bc3c..211eeee163 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -41,7 +41,6 @@ import {
   RepositoryFlags,
   SecondaryNavigation,
   SecondaryNavigationColumn,
-  StateMenuContextProvider,
   SubNavigation,
   urls,
 } from "@scm-manager/ui-components";
@@ -269,153 +268,151 @@ const RepositoryRoot = () => {
   const escapedUrl = urls.escapeUrlForRoute(url);
 
   return (
-    <StateMenuContextProvider>
-      <RepositoryContextProvider repository={repository}>
-        <Page
-          title={titleComponent}
-          documentTitle={`${repository.namespace}/${repository.name}`}
-          afterTitle={
-            <MobileWrapped className="is-flex is-align-items-center">
-              <ExtensionPoint name="repository.afterTitle" props={{ repository }} />
-              <TagGroup className="has-text-weight-bold">
-                <RepositoryFlags repository={repository} tooltipLocation="bottom" />
-              </TagGroup>
-            </MobileWrapped>
-          }
-        >
-          {modal}
-          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn>
-              <Switch>
-                <Redirect exact from={urls.escapeUrlForRoute(match.url)} to={urls.escapeUrlForRoute(redirectedUrl)} />
+    <RepositoryContextProvider repository={repository}>
+      <Page
+        title={titleComponent}
+        documentTitle={`${repository.namespace}/${repository.name}`}
+        afterTitle={
+          <MobileWrapped className="is-flex is-align-items-center">
+            <ExtensionPoint name="repository.afterTitle" props={{ repository }} />
+            <TagGroup className="has-text-weight-bold">
+              <RepositoryFlags repository={repository} tooltipLocation="bottom" />
+            </TagGroup>
+          </MobileWrapped>
+        }
+      >
+        {modal}
+        <CustomQueryFlexWrappedColumns>
+          <PrimaryContentColumn>
+            <Switch>
+              <Redirect exact from={urls.escapeUrlForRoute(match.url)} to={urls.escapeUrlForRoute(redirectedUrl)} />
 
-                {/* redirect pre 2.0.0-rc2 links */}
-                <Redirect from={`${escapedUrl}/changeset/:id`} to={`${url}/code/changeset/:id`} />
-                <Redirect exact from={`${escapedUrl}/sources`} to={`${url}/code/sources`} />
-                <Redirect from={`${escapedUrl}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
-                <Redirect exact from={`${escapedUrl}/changesets`} to={`${url}/code/changesets`} />
-                <Redirect
-                  from={`${escapedUrl}/branch/:branch/changesets`}
-                  to={`${url}/code/branch/:branch/changesets/`}
-                />
+              {/* redirect pre 2.0.0-rc2 links */}
+              <Redirect from={`${escapedUrl}/changeset/:id`} to={`${url}/code/changeset/:id`} />
+              <Redirect exact from={`${escapedUrl}/sources`} to={`${url}/code/sources`} />
+              <Redirect from={`${escapedUrl}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
+              <Redirect exact from={`${escapedUrl}/changesets`} to={`${url}/code/changesets`} />
+              <Redirect
+                from={`${escapedUrl}/branch/:branch/changesets`}
+                to={`${url}/code/branch/:branch/changesets/`}
+              />
 
-                <Route path={`${escapedUrl}/info`} exact>
-                  <RepositoryDetails repository={repository} />
-                </Route>
-                <Route path={`${escapedUrl}/settings/general`}>
-                  <EditRepo repository={repository} />
-                </Route>
-                <Route path={`${escapedUrl}/settings/permissions`}>
-                  <Permissions namespaceOrRepository={repository} />
-                </Route>
-                <Route exact path={`${escapedUrl}/code/changeset/:id`}>
-                  <ChangesetView repository={repository} fileControlFactoryFactory={fileControlFactoryFactory} />
-                </Route>
-                <Route path={`${escapedUrl}/code/sourceext/:extension`} exact={true}>
-                  <SourceExtensions repository={repository} />
-                </Route>
-                <Route path={`${escapedUrl}/code/sourceext/:extension/:revision/:path*`}>
-                  <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />
-                </Route>
-                <Route path={`${escapedUrl}/code`}>
-                  <CodeOverview baseUrl={`${url}/code`} repository={repository} />
-                </Route>
-                <Route path={`${escapedUrl}/branch/:branch`}>
-                  <BranchRoot repository={repository} />
-                </Route>
-                <Route path={`${escapedUrl}/branches`} exact={true}>
-                  <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />
-                </Route>
-                <Route path={`${escapedUrl}/branches/create`}>
-                  <CreateBranch repository={repository} />
-                </Route>
-                <Route path={`${escapedUrl}/tag/:tag`}>
-                  <TagRoot repository={repository} baseUrl={`${url}/tag`} />
-                </Route>
-                <Route path={`${escapedUrl}/tags`} exact={true}>
-                  <TagsOverview repository={repository} baseUrl={`${url}/tag`} />
-                </Route>
-                <Route path={`${escapedUrl}/compare/:sourceType/:sourceName`}>
-                  <CompareRoot repository={repository} baseUrl={`${url}/compare`} />
-                </Route>
-                <ExtensionPoint<extensionPoints.RepositoryRoute>
-                  name="repository.route"
-                  props={{
-                    repository,
-                    url: urls.escapeUrlForRoute(url),
-                    indexLinks,
-                  }}
-                  renderAll={true}
-                />
-              </Switch>
-            </PrimaryContentColumn>
-            <SecondaryNavigationColumn>
-              <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
-                <ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
-                  name="repository.navigation.topLevel"
+              <Route path={`${escapedUrl}/info`} exact>
+                <RepositoryDetails repository={repository} />
+              </Route>
+              <Route path={`${escapedUrl}/settings/general`}>
+                <EditRepo repository={repository} />
+              </Route>
+              <Route path={`${escapedUrl}/settings/permissions`}>
+                <Permissions namespaceOrRepository={repository} />
+              </Route>
+              <Route exact path={`${escapedUrl}/code/changeset/:id`}>
+                <ChangesetView repository={repository} fileControlFactoryFactory={fileControlFactoryFactory} />
+              </Route>
+              <Route path={`${escapedUrl}/code/sourceext/:extension`} exact={true}>
+                <SourceExtensions repository={repository} />
+              </Route>
+              <Route path={`${escapedUrl}/code/sourceext/:extension/:revision/:path*`}>
+                <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />
+              </Route>
+              <Route path={`${escapedUrl}/code`}>
+                <CodeOverview baseUrl={`${url}/code`} repository={repository} />
+              </Route>
+              <Route path={`${escapedUrl}/branch/:branch`}>
+                <BranchRoot repository={repository} />
+              </Route>
+              <Route path={`${escapedUrl}/branches`} exact={true}>
+                <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />
+              </Route>
+              <Route path={`${escapedUrl}/branches/create`}>
+                <CreateBranch repository={repository} />
+              </Route>
+              <Route path={`${escapedUrl}/tag/:tag`}>
+                <TagRoot repository={repository} baseUrl={`${url}/tag`} />
+              </Route>
+              <Route path={`${escapedUrl}/tags`} exact={true}>
+                <TagsOverview repository={repository} baseUrl={`${url}/tag`} />
+              </Route>
+              <Route path={`${escapedUrl}/compare/:sourceType/:sourceName`}>
+                <CompareRoot repository={repository} baseUrl={`${url}/compare`} />
+              </Route>
+              <ExtensionPoint<extensionPoints.RepositoryRoute>
+                name="repository.route"
+                props={{
+                  repository,
+                  url: urls.escapeUrlForRoute(url),
+                  indexLinks,
+                }}
+                renderAll={true}
+              />
+            </Switch>
+          </PrimaryContentColumn>
+          <SecondaryNavigationColumn>
+            <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
+              <ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
+                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={matchesBranches}
+                activeOnlyWhenExact={false}
+                title={t("repositoryRoot.menu.branchesNavLink")}
+              />
+              <RepositoryNavLink
+                repository={repository}
+                linkName="tags"
+                to={`${url}/tags/`}
+                icon="fas fa-tags"
+                label={t("repositoryRoot.menu.tagsNavLink")}
+                activeWhenMatch={matchesTags}
+                activeOnlyWhenExact={false}
+                title={t("repositoryRoot.menu.tagsNavLink")}
+              />
+              <RepositoryNavLink
+                repository={repository}
+                linkName={codeLinkname}
+                to={evaluateDestinationForCodeLink()}
+                icon="fas fa-code"
+                label={t("repositoryRoot.menu.sourcesNavLink")}
+                activeWhenMatch={matchesCode}
+                activeOnlyWhenExact={false}
+                title={t("repositoryRoot.menu.sourcesNavLink")}
+              />
+              <ExtensionPoint<extensionPoints.RepositoryNavigation>
+                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<extensionPoints.RepositorySetting>
+                  name="repository.setting"
                   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={matchesBranches}
-                  activeOnlyWhenExact={false}
-                  title={t("repositoryRoot.menu.branchesNavLink")}
-                />
-                <RepositoryNavLink
-                  repository={repository}
-                  linkName="tags"
-                  to={`${url}/tags/`}
-                  icon="fas fa-tags"
-                  label={t("repositoryRoot.menu.tagsNavLink")}
-                  activeWhenMatch={matchesTags}
-                  activeOnlyWhenExact={false}
-                  title={t("repositoryRoot.menu.tagsNavLink")}
-                />
-                <RepositoryNavLink
-                  repository={repository}
-                  linkName={codeLinkname}
-                  to={evaluateDestinationForCodeLink()}
-                  icon="fas fa-code"
-                  label={t("repositoryRoot.menu.sourcesNavLink")}
-                  activeWhenMatch={matchesCode}
-                  activeOnlyWhenExact={false}
-                  title={t("repositoryRoot.menu.sourcesNavLink")}
-                />
-                <ExtensionPoint<extensionPoints.RepositoryNavigation>
-                  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<extensionPoints.RepositorySetting>
-                    name="repository.setting"
-                    props={extensionProps}
-                    renderAll={true}
-                  />
-                </SubNavigation>
-              </SecondaryNavigation>
-            </SecondaryNavigationColumn>
-          </CustomQueryFlexWrappedColumns>
-        </Page>
-      </RepositoryContextProvider>
-    </StateMenuContextProvider>
+              </SubNavigation>
+            </SecondaryNavigation>
+          </SecondaryNavigationColumn>
+        </CustomQueryFlexWrappedColumns>
+      </Page>
+    </RepositoryContextProvider>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx b/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx
index c2f7ccfbd0..67b68ebe2d 100644
--- a/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx
@@ -33,7 +33,6 @@ import {
   PrimaryContentColumn,
   SecondaryNavigation,
   SecondaryNavigationColumn,
-  StateMenuContextProvider,
   SubNavigation,
   urls,
 } from "@scm-manager/ui-components";
@@ -78,46 +77,44 @@ const NamespaceRoot: FC = () => {
   };
 
   return (
-    <StateMenuContextProvider>
-      <Page title={namespace.namespace}>
-        <CustomQueryFlexWrappedColumns>
-          <PrimaryContentColumn>
-            <Switch>
-              <Redirect exact from={`${url}/settings`} to={`${url}/settings/permissions`} />
-              <Route path={`${url}/settings/permissions`}>
-                <Permissions namespaceOrRepository={namespace} />
-              </Route>
-              <ExtensionPoint<extensionPoints.NamespaceRoute>
-                name="namespace.route"
+    <Page title={namespace.namespace}>
+      <CustomQueryFlexWrappedColumns>
+        <PrimaryContentColumn>
+          <Switch>
+            <Redirect exact from={`${url}/settings`} to={`${url}/settings/permissions`} />
+            <Route path={`${url}/settings/permissions`}>
+              <Permissions namespaceOrRepository={namespace} />
+            </Route>
+            <ExtensionPoint<extensionPoints.NamespaceRoute>
+              name="namespace.route"
+              props={extensionProps}
+              renderAll={true}
+            />
+          </Switch>
+        </PrimaryContentColumn>
+        <SecondaryNavigationColumn>
+          <SecondaryNavigation label={t("namespaceRoot.menu.navigationLabel")}>
+            <ExtensionPoint<extensionPoints.NamespaceTopLevelNavigation>
+              name="namespace.navigation.topLevel"
+              props={extensionProps}
+              renderAll={true}
+            />
+            <SubNavigation
+              to={`${url}/settings`}
+              label={t("namespaceRoot.menu.settingsNavLink")}
+              title={t("namespaceRoot.menu.settingsNavLink")}
+            >
+              <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} namespace={namespace} />
+              <ExtensionPoint<extensionPoints.NamespaceSetting>
+                name="namespace.setting"
                 props={extensionProps}
                 renderAll={true}
               />
-            </Switch>
-          </PrimaryContentColumn>
-          <SecondaryNavigationColumn>
-            <SecondaryNavigation label={t("namespaceRoot.menu.navigationLabel")}>
-              <ExtensionPoint<extensionPoints.NamespaceTopLevelNavigation>
-                name="namespace.navigation.topLevel"
-                props={extensionProps}
-                renderAll={true}
-              />
-              <SubNavigation
-                to={`${url}/settings`}
-                label={t("namespaceRoot.menu.settingsNavLink")}
-                title={t("namespaceRoot.menu.settingsNavLink")}
-              >
-                <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} namespace={namespace} />
-                <ExtensionPoint<extensionPoints.NamespaceSetting>
-                  name="namespace.setting"
-                  props={extensionProps}
-                  renderAll={true}
-                />
-              </SubNavigation>
-            </SecondaryNavigation>
-          </SecondaryNavigationColumn>
-        </CustomQueryFlexWrappedColumns>
-      </Page>
-    </StateMenuContextProvider>
+            </SubNavigation>
+          </SecondaryNavigation>
+        </SecondaryNavigationColumn>
+      </CustomQueryFlexWrappedColumns>
+    </Page>
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 3e85d44c9c..6c8e8c776d 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -33,9 +33,8 @@ import {
   PrimaryContentColumn,
   SecondaryNavigation,
   SecondaryNavigationColumn,
-  StateMenuContextProvider,
   SubNavigation,
-  urls
+  urls,
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
@@ -44,7 +43,7 @@ import {
   SetApiKeysNavLink,
   SetPasswordNavLink,
   SetPermissionsNavLink,
-  SetPublicKeysNavLink
+  SetPublicKeysNavLink,
 } from "./../components/navLinks";
 import { useTranslation } from "react-i18next";
 import SetUserPassword from "../components/SetUserPassword";
@@ -71,70 +70,72 @@ const SingleUser: FC = () => {
 
   const extensionProps = {
     user,
-    url
+    url,
   };
 
   const escapedUrl = urls.escapeUrlForRoute(url);
 
   return (
-    <StateMenuContextProvider>
-      <Page title={user.displayName}>
-        <CustomQueryFlexWrappedColumns>
-          <PrimaryContentColumn>
-            <Route path={escapedUrl} exact>
-              <Details user={user} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/general`}>
-              <EditUser user={user} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/password`}>
-              <SetUserPassword user={user} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/permissions`}>
-              <SetUserPermissions user={user} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/publickeys`}>
-              <SetPublicKeys user={user} />
-            </Route>
-            <Route path={`${escapedUrl}/settings/apiKeys`}>
-              <SetApiKeys user={user} />
-            </Route>
-            <ExtensionPoint<extensionPoints.UserRoute> name="user.route" props={{
+    <Page title={user.displayName}>
+      <CustomQueryFlexWrappedColumns>
+        <PrimaryContentColumn>
+          <Route path={escapedUrl} exact>
+            <Details user={user} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/general`}>
+            <EditUser user={user} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/password`}>
+            <SetUserPassword user={user} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/permissions`}>
+            <SetUserPermissions user={user} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/publickeys`}>
+            <SetPublicKeys user={user} />
+          </Route>
+          <Route path={`${escapedUrl}/settings/apiKeys`}>
+            <SetApiKeys user={user} />
+          </Route>
+          <ExtensionPoint<extensionPoints.UserRoute>
+            name="user.route"
+            props={{
               user,
-              url: escapedUrl
-            }} renderAll={true} />
-          </PrimaryContentColumn>
-          <SecondaryNavigationColumn>
-            <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
-              <NavLink
-                to={url}
-                icon="fas fa-info-circle"
-                label={t("singleUser.menu.informationNavLink")}
-                title={t("singleUser.menu.informationNavLink")}
-                testId="user-information-link"
+              url: escapedUrl,
+            }}
+            renderAll={true}
+          />
+        </PrimaryContentColumn>
+        <SecondaryNavigationColumn>
+          <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
+            <NavLink
+              to={url}
+              icon="fas fa-info-circle"
+              label={t("singleUser.menu.informationNavLink")}
+              title={t("singleUser.menu.informationNavLink")}
+              testId="user-information-link"
+            />
+            <SubNavigation
+              to={`${url}/settings/general`}
+              label={t("singleUser.menu.settingsNavLink")}
+              title={t("singleUser.menu.settingsNavLink")}
+              testId="user-settings-link"
+            >
+              <EditUserNavLink user={user} editUrl={`${url}/settings/general`} />
+              <SetPasswordNavLink user={user} passwordUrl={`${url}/settings/password`} />
+              <SetPermissionsNavLink user={user} permissionsUrl={`${url}/settings/permissions`} />
+              <SetPublicKeysNavLink user={user} publicKeyUrl={`${url}/settings/publickeys`} />
+              <SetApiKeysNavLink user={user} apiKeyUrl={`${url}/settings/apiKeys`} />
+              <ExtensionPoint<extensionPoints.UserSetting>
+                name="user.setting"
+                props={extensionProps}
+                renderAll={true}
               />
-              <SubNavigation
-                to={`${url}/settings/general`}
-                label={t("singleUser.menu.settingsNavLink")}
-                title={t("singleUser.menu.settingsNavLink")}
-                testId="user-settings-link"
-              >
-                <EditUserNavLink user={user} editUrl={`${url}/settings/general`} />
-                <SetPasswordNavLink user={user} passwordUrl={`${url}/settings/password`} />
-                <SetPermissionsNavLink user={user} permissionsUrl={`${url}/settings/permissions`} />
-                <SetPublicKeysNavLink user={user} publicKeyUrl={`${url}/settings/publickeys`} />
-                <SetApiKeysNavLink user={user} apiKeyUrl={`${url}/settings/apiKeys`} />
-                <ExtensionPoint<extensionPoints.UserSetting>
-                  name="user.setting"
-                  props={extensionProps}
-                  renderAll={true}
-                />
-              </SubNavigation>
-            </SecondaryNavigation>
-          </SecondaryNavigationColumn>
-        </CustomQueryFlexWrappedColumns>
-      </Page>
-    </StateMenuContextProvider>
+            </SubNavigation>
+          </SecondaryNavigation>
+        </SecondaryNavigationColumn>
+      </CustomQueryFlexWrappedColumns>
+    </Page>
   );
 };