Navigation menu in Preferences (#2304)

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

@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { Icon } from "../icon";
 import { navigation } from "../../navigation";
+import { NavigationTree, RecursiveTreeView } from "../tree-view";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
@@ -14,6 +15,7 @@ export interface PageLayoutProps extends React.DOMAttributes<any> {
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
   showOnTop?: boolean; // covers whole app view
+  navigation?: NavigationTree[];
   back?: (evt: React.MouseEvent | KeyboardEvent) => void;
 }
 
@@ -57,9 +59,9 @@ export class PageLayout extends React.Component<PageLayoutProps> {
   render() {
     const {
       contentClass, header, headerClass, provideBackButtonNavigation,
-      contentGaps, showOnTop, children, ...elemProps
+      contentGaps, showOnTop, navigation, children, ...elemProps
     } = this.props;
-    const className = cssNames("PageLayout", { top: showOnTop }, this.props.className);
+    const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);
 
     return (
       <div {...elemProps} className={className}>
@@ -73,8 +75,13 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             />
           )}
         </div>
-        <div className="content-wrapper">
-          <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
+        { navigation && (
+          <nav className="content-navigation">
+            <RecursiveTreeView data={navigation}/>
+          </nav>
+        )}
+        <div className="content-wrapper" id="ScrollSpyRoot">
+          <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
             {children}
           </div>
         </div>