un collapse menu on each interaction with it

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"

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;

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;

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>
   );

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";

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>