feat(settings): sidebar navigation

.stylelintrc

@@ -4,6 +4,7 @@
     "function-url-quotes": "always",
     "number-leading-zero": "always",
     "max-nesting-depth": 4,
-    "function-name-case": "lower"
+    "function-name-case": "lower",
+    "no-descending-specificity": null
   }
 }

package.json

@@ -35,6 +35,8 @@
     "react-dom": "16.4.2",
     "react-redux": "5.0.7",
     "react-router-dom": "4.3.1",
+    "react-scroll": "1.7.10",
+    "react-sticky": "6.0.3",
     "recharts": "1.1.0",
     "recompose": "0.28.2",
     "redux": "3.7.2",

src/renderer/settings/components/GeneralSettings/GeneralSettings.scss

@@ -2,6 +2,7 @@
   .input {
     display: flex;
     align-items: center;
+    margin-bottom: 0;
 
     .label {
       flex: 0 1 230px;

src/renderer/settings/components/SectionContent/SectionContent.scss

@@ -1,5 +1,5 @@
 .sectionContent {
-  margin-bottom: 40px;
+  padding-bottom: 40px;
   color: #494759;
   font-size: 14px;
 }

src/renderer/settings/components/Settings/Settings.js

@@ -1,19 +1,64 @@
 import React from 'react';
+import { Element, scrollSpy } from 'react-scroll';
+import { StickyContainer, Sticky } from 'react-sticky';
 
 import Page from 'shared/components/Page';
 import Panel from 'shared/components/Panel';
 
 import GeneralSettings from '../GeneralSettings';
 import NetworkSettings from '../NetworkSettings';
+import SidebarLink from '../SidebarLink';
 import styles from './Settings.scss';
 
-export default function Settings() {
-  return (
-    <Page className={styles.settings}>
-      <Panel className={styles.panel}>
-        <GeneralSettings />
-        <NetworkSettings />
-      </Panel>
-    </Page>
-  );
+export default class Settings extends React.PureComponent {
+  state = {
+    offset: 0
+  };
+
+  componentDidMount() {
+    this.setState({ offset: this.container.node.offsetTop });
+    scrollSpy.update();
+  }
+
+  render() {
+    return (
+      <StickyContainer id="settingsContainer" ref={this.registerRef} className={styles.settings}>
+        <Page className={styles.page}>
+          <Panel className={styles.panel}>
+            <div className={styles.sidebar}>
+              <Sticky relative topOffset={this.state.offset}>
+                {({ style }) => (
+                  <ul style={style}>
+                    <li>
+                      <SidebarLink to="general" containerId="settingsContainer">
+                        General
+                      </SidebarLink>
+                    </li>
+                    <li>
+                      <SidebarLink to="network" containerId="settingsContainer">
+                        Network
+                      </SidebarLink>
+                    </li>
+                  </ul>
+                )}
+              </Sticky>
+            </div>
+
+            <div className={styles.content}>
+              <Element name="general">
+                <GeneralSettings />
+              </Element>
+              <Element name="network">
+                <NetworkSettings />
+              </Element>
+            </div>
+          </Panel>
+        </Page>
+      </StickyContainer>
+    );
+  }
+
+  registerRef = (el) => {
+    this.container = el;
+  }
 }

src/renderer/settings/components/Settings/Settings.scss

@@ -1,7 +1,41 @@
 .settings {
-  padding: 24px;
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+
+  .page {
+    padding: 24px;
+  }
 
   .panel {
-    padding: 0 40px 20px;
+    display: flex;
+
+    .sidebar {
+      flex: 0 0 auto;
+    }
+
+    .content {
+      flex: 1 1 auto;
+    }
+  }
+
+  .sidebar {
+    width: 170px;
+    box-shadow: inset -1px 0px 0px #d7d8de;
+
+    ul {
+      list-style: none;
+      margin: 0;
+    }
+  }
+
+  .content {
+    padding: 0 40px;
+  }
+
+  @media only screen and (max-width: $responsive-width) {
+    .sidebar {
+      display: none;
+    }
   }
 }

src/renderer/settings/components/SidebarLink/SidebarLink.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-scroll';
+
+import styles from './SidebarLink.scss';
+
+export default function SidebarLink(props) {
+  return (
+    <Link
+      className={styles.sidebarLink}
+      activeClass={styles.active}
+      spy
+      smooth
+      duration={250}
+      {...props}
+    />
+  );
+}

src/renderer/settings/components/SidebarLink/SidebarLink.scss

@@ -0,0 +1,31 @@
+.sidebarLink {
+  display: block;
+  height: 42px;
+  line-height: 42px;
+  padding: 0 16px;
+  color: $light-text-color;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+
+  &.active,
+  &:hover {
+    color: $dark-text-color;
+  }
+
+  &.active {
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      background: linear-gradient(0deg, #b9d532 0%, #5bba47 100%);
+    }
+  }
+}

src/renderer/settings/components/SidebarLink/index.js

@@ -0,0 +1 @@
+export { default } from './SidebarLink';

src/renderer/shared/components/Page/Page.js

@@ -1,23 +1,19 @@
 import React from 'react';
 import classNames from 'classnames';
-import { string, node } from 'prop-types';
+import { string } from 'prop-types';
 
 import styles from './Page.scss';
 
 export default function Page(props) {
   return (
-    <div className={classNames(styles.page, props.className)}>
-      {props.children}
-    </div>
+    <div {...props} className={classNames(styles.page, props.className)} />
   );
 }
 
 Page.propTypes = {
-  className: string,
-  children: node
+  className: string
 };
 
 Page.defaultProps = {
-  className: null,
-  children: null
+  className: null
 };

yarn.lock

@@ -5843,6 +5843,10 @@ lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7652,7 +7656,7 @@ quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
 
-raf@^3.2.0, raf@^3.4.0:
+raf@^3.2.0, raf@^3.3.0, raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:
@@ -7853,6 +7857,13 @@ react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
+react-scroll@1.7.10:
+  version "1.7.10"
+  resolved "https://registry.npmjs.org/react-scroll/-/react-scroll-1.7.10.tgz#b59cfa11a899a362c6489607ed5865c9c5fd0b53"
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.5.8"
+
 react-smooth@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.0.tgz#b29dbebddddb06d21b5b08962167fb9eac1897d8"
@@ -7862,6 +7873,13 @@ react-smooth@1.0.0:
     raf "^3.2.0"
     react-transition-group "^2.2.1"
 
+react-sticky@6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
+  dependencies:
+    prop-types "^15.5.8"
+    raf "^3.3.0"
+
 react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"