implemented subnav and added settings for profile

scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js

@@ -0,0 +1,51 @@
+//@flow
+import * as React from "react";
+import {Link, Route} from "react-router-dom";
+
+type Props = {
+  to: string,
+  label: string,
+  activeOnlyWhenExact?: boolean,
+  activeWhenMatch?: (route: any) => boolean,
+  children?: React.Node
+};
+
+class SubNavigation extends React.Component<Props> {
+  static defaultProps = {
+    activeOnlyWhenExact: false
+  };
+
+  isActive(route: any) {
+    const { activeWhenMatch } = this.props;
+    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  }
+
+  renderLink = (route: any) => {
+    const { to, label } = this.props;
+
+    let children = null;
+    if(this.isActive(route)) {
+      children = (
+        <ul>{this.props.children}</ul>
+      );
+    }
+
+    return (
+      <li>
+        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          {label}
+        </Link>
+        {children}
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+    return (
+      <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
+    );
+  }
+}
+
+export default SubNavigation;

scm-ui-components/packages/ui-components/src/navigation/index.js

@@ -3,6 +3,7 @@
 export { default as NavAction } from "./NavAction.js";
 export { default as NavLink } from "./NavLink.js";
 export { default as Navigation } from "./Navigation.js";
+export { default as SubNavigation } from "./SubNavigation.js";
 export { default as PrimaryNavigation } from "./PrimaryNavigation.js";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink.js";
 export { default as Section } from "./Section.js";

scm-ui/public/locales/en/commons.json

@@ -46,6 +46,7 @@
     "navigationLabel": "Profile Navigation",
     "informationNavLink": "Information",
     "changePasswordNavLink": "Change password",
+    "settingsNavLink": "Settings",
     "username": "Username",
     "displayName": "Display Name",
     "mail": "E-Mail",

scm-ui/src/containers/Profile.js

@@ -12,6 +12,7 @@ import {
   ErrorPage,
   Page,
   Navigation,
+  SubNavigation,
   Section,
   NavLink
 } from "@scm-manager/ui-components";
@@ -63,18 +64,26 @@ class Profile extends React.Component<Props, State> {
           <div className="column is-three-quarters">
             <Route path={url} exact render={() => <ProfileInfo me={me} />} />
             <Route
-              path={`${url}/password`}
+              path={`${url}/settings/password`}
               render={() => <ChangeUserPassword me={me} />}
             />
           </div>
           <div className="column">
             <Navigation>
               <Section label={t("profile.navigationLabel")}>
-                <NavLink to={`${url}`} label={t("profile.informationNavLink")} />
                 <NavLink
-                  to={`${url}/password`}
+                  to={`${url}`}
+                  label={t("profile.informationNavLink")}
+                />
+                <SubNavigation
+                  to={`${url}/settings/password`}
+                  label={t("profile.settingsNavLink")}
+                >
+                  <NavLink
+                    to={`${url}/settings/password`}
                     label={t("profile.changePasswordNavLink")}
                   />
+                </SubNavigation>
               </Section>
             </Navigation>
           </div>