Moving <ScrollSpy/> out from <PageLayout/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/preferences.tsx

@@ -14,6 +14,7 @@ import { SubTitle } from "../layout/sub-title";
 import { Select, SelectOption } from "../select";
 import { HelmCharts } from "./helm-charts";
 import { KubectlBinaries } from "./kubectl-binaries";
+import { ScrollSpy } from "../scroll-spy/scroll-spy";
 
 @observer
 export class Preferences extends React.Component {
@@ -31,94 +32,96 @@ export class Preferences extends React.Component {
     const header = <h2>Preferences</h2>;
 
     return (
-      <PageLayout
-        showOnTop
-        showNavigation
-        className="Preferences"
-        contentGaps={false}
-        header={header}
-      >
-        <section id="application" title="Application">
-          <section>
-            <h1>Application</h1>
-          </section>
-          <section id="appearance">
-            <h2>Appearance</h2>
-            <SubTitle title="Theme"/>
-            <Select
-              options={this.themeOptions}
-              value={preferences.colorTheme}
-              onChange={({ value }: SelectOption) => preferences.colorTheme = value}
-            />
-          </section>
-          <section id="proxy">
-            <h2>Proxy</h2>
-            <SubTitle title="HTTP Proxy"/>
-            <Input
-              theme="round-black"
-              placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
-              value={this.httpProxy}
-              onChange={v => this.httpProxy = v}
-              onBlur={() => preferences.httpsProxy = this.httpProxy}
-            />
-            <small className="hint">
-              Proxy is used only for non-cluster communication.
-            </small>
+      <ScrollSpy render={navigation => (
+        <PageLayout
+          showOnTop
+          navigation={navigation}
+          className="Preferences"
+          contentGaps={false}
+          header={header}
+        >
+          <section id="application" title="Application">
+            <section>
+              <h1>Application</h1>
+            </section>
+            <section id="appearance">
+              <h2>Appearance</h2>
+              <SubTitle title="Theme"/>
+              <Select
+                options={this.themeOptions}
+                value={preferences.colorTheme}
+                onChange={({ value }: SelectOption) => preferences.colorTheme = value}
+              />
+            </section>
+            <section id="proxy">
+              <h2>Proxy</h2>
+              <SubTitle title="HTTP Proxy"/>
+              <Input
+                theme="round-black"
+                placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
+                value={this.httpProxy}
+                onChange={v => this.httpProxy = v}
+                onBlur={() => preferences.httpsProxy = this.httpProxy}
+              />
+              <small className="hint">
+                Proxy is used only for non-cluster communication.
+              </small>
 
-            <SubTitle title="Certificate Trust"/>
-            <Checkbox
-              label="Allow untrusted Certificate Authorities"
-              value={preferences.allowUntrustedCAs}
-              onChange={v => preferences.allowUntrustedCAs = v}
-            />
-            <small className="hint">
-              This will make Lens to trust ANY certificate authority without any validations.{" "}
-              Needed with some corporate proxies that do certificate re-writing.{" "}
-              Does not affect cluster communications!
-            </small>
+              <SubTitle title="Certificate Trust"/>
+              <Checkbox
+                label="Allow untrusted Certificate Authorities"
+                value={preferences.allowUntrustedCAs}
+                onChange={v => preferences.allowUntrustedCAs = v}
+              />
+              <small className="hint">
+                This will make Lens to trust ANY certificate authority without any validations.{" "}
+                Needed with some corporate proxies that do certificate re-writing.{" "}
+                Does not affect cluster communications!
+              </small>
+            </section>
+            <section id="startup">
+              <h2>Start-up</h2>
+              <SubTitle title="Automatic Start-up"/>
+              <Checkbox
+                label="Automatically start Lens on login"
+                value={preferences.openAtLogin}
+                onChange={v => preferences.openAtLogin = v}
+              />
+            </section>
           </section>
-          <section id="startup">
-            <h2>Start-up</h2>
-            <SubTitle title="Automatic Start-up"/>
-            <Checkbox
-              label="Automatically start Lens on login"
-              value={preferences.openAtLogin}
-              onChange={v => preferences.openAtLogin = v}
-            />
-          </section>
-        </section>
 
-        <section id="kubernetes">
-          <section>
-            <h1>Kubernetes</h1>
+          <section id="kubernetes">
+            <section>
+              <h1>Kubernetes</h1>
+            </section>
+            <section id="kubectl">
+              <h2>Kubectl binary</h2>
+              <KubectlBinaries preferences={preferences}/>
+            </section>
+            <section id="helm">
+              <h2>Helm Charts</h2>
+              <HelmCharts/>
+            </section>
           </section>
-          <section id="kubectl">
-            <h2>Kubectl binary</h2>
-            <KubectlBinaries preferences={preferences}/>
-          </section>
-          <section id="helm">
-            <h2>Helm Charts</h2>
-            <HelmCharts/>
-          </section>
-        </section>
 
-        <section id="extensions">
-          <section>
-            <h1>Extensions</h1>
+          <section id="extensions">
+            <section>
+              <h1>Extensions</h1>
+            </section>
+            {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
+              return (
+                <section key={index} id={title}>
+                  <h2>{title}</h2>
+                  <Input/>
+                  <small className="hint">
+                    <Hint/>
+                  </small>
+                </section>
+              );
+            })}
           </section>
-          {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
-            return (
-              <section key={index} id={title}>
-                <h2>{title}</h2>
-                <Input/>
-                <small className="hint">
-                  <Hint/>
-                </small>
-              </section>
-            );
-          })}
-        </section>
-      </PageLayout>
+        </PageLayout>
+      )}/>
     );
   }
 }

src/renderer/components/layout/page-layout.tsx

@@ -5,8 +5,7 @@ import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { Icon } from "../icon";
 import { navigation } from "../../navigation";
-import { ScrollSpy } from "../scroll-spy/scroll-spy";
-import { RecursiveTreeView } from "../tree-view";
+import { NavigationTree, RecursiveTreeView } from "../tree-view";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
@@ -16,7 +15,7 @@ export interface PageLayoutProps extends React.DOMAttributes<any> {
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
   showOnTop?: boolean; // covers whole app view
-  showNavigation?: boolean;
+  navigation?: NavigationTree[];
   back?: (evt: React.MouseEvent | KeyboardEvent) => void;
 }
 
@@ -60,36 +59,35 @@ export class PageLayout extends React.Component<PageLayoutProps> {
   render() {
     const {
       contentClass, header, headerClass, provideBackButtonNavigation,
-      contentGaps, showOnTop, showNavigation, children, ...elemProps
+      contentGaps, showOnTop, navigation, children, ...elemProps
     } = this.props;
-    const className = cssNames("PageLayout", { showOnTop, showNavigation }, this.props.className);
+    const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);
 
     return (
-      <ScrollSpy render={navigation => (
-        <div {...elemProps} className={className}>
-          <div className={cssNames("header flex gaps align-center", headerClass)}>
-            {header}
-            {provideBackButtonNavigation && (
-              <Icon
-                big material="close"
-                className="back box right"
-                onClick={this.back}
-              />
+      <div {...elemProps} className={className}>
+        <div className={cssNames("header flex gaps align-center", headerClass)}>
+          {header}
+          {provideBackButtonNavigation && (
+            <Icon
+              big material="close"
+              className="back box right"
+              onClick={this.back}
+            />
+          )}
+        </div>
+        <div className="content-scrollable-area">
+          <div className="content-wrapper">
+            { navigation && (
+              <nav className="content-navigation">
+                <RecursiveTreeView data={navigation}/>
+              </nav>
             )}
-          </div>
-          <div className="content-scrollable-area">
-            <div className="content-wrapper">
-              { showNavigation && (
-                <nav className="content-navigation">
-                  <RecursiveTreeView data={navigation}/>
-                </nav>
-              )}
-              <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
-                {children}
-              </div>
+            <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
+              {children}
             </div>
           </div>
         </div>
-      )} />);
+      </div>
+    );
   }
 }