Navigation menu in Preferences (#2304)

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

@@ -1,17 +1,35 @@
 .PageLayout {
-  $spacing: $padding * 2;
   --width: 60%;
-  --max-width: 1000px;
-  --min-width: 570px;
+  --nav-width: 180px;
+  --nav-column-width: 30vw;
+  --spacing: calc(var(--unit) * 2);
+  --wrapper-padding: calc(var(--spacing) * 2);
+  --header-height: 64px;
+  --header-height-mac: 80px;
 
   position: relative;
   width: 100%;
   height: 100%;
   display: grid !important;
   grid-template-rows: min-content 1fr;
+  grid-template-columns: 1fr;
+
+  &.showNavigation {
+    --width: 70%;
+
+    grid-template-columns: var(--nav-column-width) 1fr;
+
+    > .content-wrapper {
+      > .content {
+        width: 100%;
+        padding-left: 1px; // Fix visual content crop
+        padding-right: calc(var(--nav-column-width) - var(--nav-width));
+      }
+    }
+  }
 
   // covers whole app view area
-  &.top {
+  &.showOnTop {
     position: fixed !important; // allow to cover ClustersMenu
     z-index: 1;
     left: 0;
@@ -19,37 +37,44 @@
     right: 0;
     bottom: 24px;
     height: unset;
-    background-color: $mainBackground;
+    background-color: var(--mainBackground);
 
     // adds extra space for traffic-light top buttons (mac only)
     .is-mac & > .header {
-      padding-top: $spacing * 2;
+      height: var(--header-height-mac);
+      padding-top: calc(var(--spacing) * 2);
     }
   }
 
   > .header {
     position: sticky;
-    padding: $spacing;
-    background-color: $layoutTabsBackground;
+    padding: var(--spacing);
+    background-color: var(--layoutTabsBackground);
+    height: var(--header-height);
+    grid-column-start: 1;
+    grid-column-end: 4;
   }
 
-  > .content-wrapper {
-    overflow: auto;
-    padding: $spacing * 2;
+  > .content-navigation {
     display: flex;
-    flex-direction: column;
+    justify-content: flex-end;
+    overflow-y: auto;
+    margin-top: 32px;
 
-    > .content {
-      flex: 1;
-      margin: 0 auto;
-      width: var(--width);
-      min-width: var(--min-width);
-      max-width: var(--max-width);
+    ul.TreeView {
+      width: var(--nav-width);
+      padding-right: 24px;
     }
   }
 
-  h2:not(:first-of-type) {
-    margin-top: $spacing;
+  > .content-wrapper {
+    padding: 32px;
+    overflow: auto;
+
+    > .content {
+      width: var(--width);
+      margin: 0 auto;
+    }
   }
 
   p {
@@ -57,21 +82,49 @@
   }
 
   a {
-    color: $colorInfo;
+    color: var(--colorInfo);
   }
 
   .SubTitle {
     text-transform: none;
     margin-bottom: 0 !important;
-
-    + * + .hint {
-      margin-top: -$padding / 2;
-    }
   }
 
   .Select {
     &__control {
-      box-shadow: 0 0 0 1px $borderFaintColor;
+      box-shadow: 0 0 0 1px var(--borderFaintColor);
+    }
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--spacing);
+
+    > :not(:last-child) {
+      margin-bottom: var(--spacing);
+    }
+
+    h1, h2 {
+      color: var(--textColorAccent);
+    }
+
+    h1 {
+      font-size: x-large;
+      border-bottom: 1px solid var(--borderFaintColor);
+      padding-bottom: var(--padding);
+    }
+
+    h2 {
+      font-size: large;
+    }
+
+    small.hint {
+      margin-top: calc(var(--unit) * -1.5);
+    }
+
+    .SubTitle {
+      margin-top: 0;
     }
   }
 }

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>