refactor

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

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

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

@@ -6,14 +6,14 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
 import {
   ErrorPage,
+  isMenuCollapsed,
   Loading,
+  MenuContext,
   Navigation,
   NavLink,
   Page,
   Section,
-  SubNavigation,
+  SubNavigation
-  isMenuCollapsed,
-  MenuContext
 } from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";

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

@@ -1,19 +1,18 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Route, RouteComponentProps } from "react-router-dom";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
 import {
   ErrorPage,
+  isMenuCollapsed,
   Loading,
+  MenuContext,
   Navigation,
   NavLink,
   Page,
   Section,
-  SubNavigation,
+  SubNavigation
-  MenuContext,
-  isMenuCollapsed
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";