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 & {
-  me: Me;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    me: Me;
 
-  // Context props
-  match: any;
+    // 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,26 +93,41 @@ class Profile extends React.Component<Props, State> {
     };
 
     return (
-      <Page title={me.displayName}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <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} />
+      <MenuContext.Provider value={this.state}>
+        <Page title={me.displayName}>
+          <div className="columns">
+            <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={menuCollapsed ? "column is-1" : "column is-3"}>
+              <Navigation>
+                <Section
+                  label={t("profile.navigationLabel")}
+                  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>
+                </Section>
+              </Navigation>
+            </div>
           </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("profile.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("profile.informationNavLink")} />
-                <SubNavigation to={`${url}/settings/password`} label={t("profile.settingsNavLink")}>
-                  <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
-                  <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
-                </SubNavigation>
-              </Section>
-            </Navigation>
-          </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }