Add navigation layout in <PageLayout/>

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

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

@@ -111,7 +111,12 @@ export class Preferences extends React.Component {
     const header = <h2>Preferences</h2>;
 
     return (
-      <PageLayout showOnTop className="Preferences" header={header}>
+      <PageLayout
+        showOnTop
+        showNavigation
+        className="Preferences"
+        header={header}
+      >
         <h2>Color Theme</h2>
         <Select
           options={this.themeOptions}

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

@@ -1,8 +1,9 @@
 .PageLayout {
-  $spacing: $padding * 2;
   --width: 60%;
   --max-width: 1000px;
   --min-width: 570px;
+  --nav-width: 160px;
+  --spacing: calc(var(--unit) * 2);
 
   position: relative;
   width: 100%;
@@ -10,45 +11,56 @@
   display: grid !important;
   grid-template-rows: min-content 1fr;
 
+  &.showNavigation {
+    --width: 70%;
+
+    > .content-scrollable-area {
+      > .content-wrapper {
+        grid-template-columns: var(--nav-width) 1fr;
+      }
+    }
+  }
+
   // covers whole app view area
-  &.top {
+  &.showOnTop {
     position: fixed !important; // allow to cover ClustersMenu
     z-index: 1;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
-    background-color: $mainBackground;
+    background-color: var(--mainBackground);
 
     // adds extra space for traffic-light top buttons (mac only)
     .is-mac & > .header {
-      padding-top: $spacing * 2;
+      padding-top: calc(var(--spacing) * 2);
     }
   }
 
   > .header {
     position: sticky;
-    padding: $spacing;
+    padding: var(--spacing);
     background-color: $layoutTabsBackground;
   }
 
-  > .content-wrapper {
+  > .content-scrollable-area {
     overflow: auto;
-    padding: $spacing * 2;
+    display: grid;
-    display: flex;
+    place-items: center;
-    flex-direction: column;
 
-    > .content {
+    > .content-wrapper {
-      flex: 1;
+      display: grid;
-      margin: 0 auto;
+      grid-template-columns: none;
+      column-gap: 16px;
       width: var(--width);
       min-width: var(--min-width);
       max-width: var(--max-width);
+      padding: calc(var(--spacing) * 2);
     }
   }
 
   h2:not(:first-of-type) {
-    margin-top: $spacing;
+    margin-top: var(--spacing);
   }
 
   p {
@@ -56,21 +68,17 @@
   }
 
   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);
     }
   }
 }

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

@@ -14,6 +14,7 @@ export interface PageLayoutProps extends React.DOMAttributes<any> {
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
   showOnTop?: boolean; // covers whole app view
+  showNavigation?: boolean;
   back?: (evt: React.MouseEvent | KeyboardEvent) => void;
 }
 
@@ -57,9 +58,9 @@ export class PageLayout extends React.Component<PageLayoutProps> {
   render() {
     const {
       contentClass, header, headerClass, provideBackButtonNavigation,
-      contentGaps, showOnTop, children, ...elemProps
+      contentGaps, showOnTop, showNavigation, children, ...elemProps
     } = this.props;
-    const className = cssNames("PageLayout", { top: showOnTop }, this.props.className);
+    const className = cssNames("PageLayout", { showOnTop, showNavigation }, this.props.className);
 
     return (
       <div {...elemProps} className={className}>
@@ -73,9 +74,19 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             />
           )}
         </div>
-        <div className="content-wrapper">
+        <div className="content-scrollable-area">
-          <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
+          <div className="content-wrapper">
-            {children}
+            { showNavigation && (
+              <div className="content-navigation">
+                <ul>
+                  <li>Section 1</li>
+                  <li>Section 2</li>
+                </ul>
+              </div>
+            )}
+            <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
+              {children}
+            </div>
           </div>
         </div>
       </div>