Progress

app/javascript/gabsocial/components/page_layout/index.js

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

app/javascript/gabsocial/components/page_layout/page_layout.js

@@ -0,0 +1,36 @@
+import Header from '../header'
+
+console.log("in the page_layout - styles:", styles);
+
+export default class PageLayout extends PureComponent {
+  static propTypes = {
+    layout: PropTypes.object,
+  };
+
+  render() {
+    const { children, layout } = this.props;
+
+    const right = layout.RIGHT || null;
+
+    return (
+      <div className='page'>
+        {/*<Header />*/}
+        <main className='main' role='main'>
+          <div className='main__container'>
+            <div className='main-contents'>
+              <div className='main-contents__inner'>
+                { /* children */ }
+              </div>
+            </div>
+            <div className='main-sidebar'>
+              <div className='main-sidebar__inner'>
+                { /* right */ }
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/page_layout/page_layout.scss

@@ -0,0 +1,54 @@
+.page {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  &__top {
+    display: flex;
+    z-index: 105;
+
+    @include size(100%, auto);
+
+    @media (min-width:895px) {
+      top: -290px;
+      position: sticky;
+    }
+  }
+
+  .main {
+    display: flex;
+    flex-basis: auto;
+    flex-direction: column;
+    flex-shrink: 1;
+    flex-grow: 1;
+    align-items: flex-start;
+
+    &__container {
+      display: flex;
+      align-items: stretch;
+      justify-content: space-between;
+      flex-grow: 1;
+      flex-direction: row;
+      width: 990px;
+    }
+  }
+}
+
+.main-contents {
+  display: flex;
+  max-width: 600px;
+  z-index: 1;
+
+  &__inner {
+    
+  }
+}
+
+.main-sidebar {
+  display: flex;
+  width: 350px;
+
+  &__inner {
+    
+  }
+}