Progress

app/javascript/gabsocial/layouts/layout.js

@@ -1,9 +1,9 @@
 import Sticky from 'react-stickynode'
-import * as Constants from '../constants'
 import Search from '../components/search'
 import ColumnHeader from '../components/column_header'
 import Sidebar from '../components/sidebar'
-// import Header from '../components/header'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import NavigationBar from '../components/navigation_bar'
 // import Footer from '../components/footer'
 import FloatingActionButton from '../components/floating_action_button'
 import Responsive from '../features/ui/util/responsive_component'
@@ -36,82 +36,63 @@ export default class Layout extends PureComponent {
     } = this.props
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
+      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
-        {
-          !noSidebar &&
-          <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
-            <Sidebar />
-          </Responsive>
-        }
-
-        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
+        <NavigationBar
+          title={title}
+          tabs={tabs}
+          actions={actions}
+        />
 
+        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
           {
-            !noHeader &&
-            <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
-              <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-                <div className={[_s.default, _s.width645PX].join(' ')}>
-                  <ColumnHeader
-                    title={title}
-                    showBackBtn={showBackBtn}
-                    actions={actions}
-                    tabs={tabs}
-                  />
+            !noSidebar &&
+            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+              <Sidebar title={title} tabs={tabs} actions={actions} />
+            </Responsive>
+          }
+
+          <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}>
+
+            <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
+
+              {
+                noRightSidebar && children
+              }
+
+              {
+                !noRightSidebar &&
+                <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                  <div className={_s.default}>
+                    {children}
+                  </div>
                 </div>
-                <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
-                  <div className={[_s.default, _s.width340PX].join(' ')}>
-                    <Search />
+              }
+
+              {
+                !noRightSidebar &&
+                <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+                  <div className={[_s.default, _s.width340PX, _s.ml15].join(' ')}>
+                    <Sticky top={73} enabled>
+                      <div className={[_s.default, _s.width340PX].join(' ')}>
+                        {layout}
+                      </div>
+                    </Sticky>
                   </div>
                 </Responsive>
-              </div>
+              }
+
+              {
+                !noComposeButton &&
+                <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+                  <FloatingActionButton />
+                </Responsive>
+              }
+
             </div>
-          }
-
-          {
-            !noHeader &&
-            <div className={[_s.default, _s.height53PX].join(' ')}></div>
-          }
-
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
-
-            {
-              noRightSidebar && children
-            }
-
-            {
-              !noRightSidebar &&
-              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-                <div className={_s.default}>
-                  {children}
-                </div>
-              </div>
-            }
-
-            {
-              !noRightSidebar &&
-              <Responsive min={Constants.BREAKPOINT_EXTRA_SMALL}>
-                <div className={[_s.default, _s.width340PX].join(' ')}>
-                  <Sticky top={73} enabled>
-                    <div className={[_s.default, _s.width340PX].join(' ')}>
-                      {layout}
-                    </div>
-                  </Sticky>
-                </div>
-              </Responsive>
-            }
-
-            {
-              !noComposeButton &&
-              <Responsive max={Constants.BREAKPOINT_EXTRA_SMALL}>
-                <FloatingActionButton />
-              </Responsive>
-            }
-
-          </div>
-
-        </main>
 
+          </main>
+        </div>
       </div>
     )
   }

app/javascript/gabsocial/layouts/profile_layout.js

@@ -1,8 +1,8 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Sticky from 'react-stickynode'
-import Layout from './layout'
 import ProfileHeader from '../components/profile_header'
+import NavigationBar from '../components/navigation_bar'
 
 export default class ProfileLayout extends ImmutablePureComponent {
   static propTypes = {
@@ -18,38 +18,48 @@ export default class ProfileLayout extends ImmutablePureComponent {
       account,
       children,
       layout,
+      title,
+      showBackBtn,
     } = this.props
 
     return (
-      <Layout
-        noRightSidebar
-        noComposeButton
-      >
-        <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15].join(' ')}>
-          <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
+      <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
-            <ProfileHeader account={account} />
+        <NavigationBar />
 
-            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween, _s.py15].join(' ')}>
-              <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
-                <div className={_s.default}>
-                  {children}
-                </div>
-              </div>
+        <main role='main' className={[_s.default, _s.width100PC].join(' ')}>
 
-              <div className={[_s.default, _s.width340PX].join(' ')}>
-                <Sticky top={63} enabled>
-                  <div className={[_s.default, _s.width340PX].join(' ')}>
-                    {layout}
+          <div className={[_s.default, _s.width100PC, _s.flexRow, _s.pb15].join(' ')}>
+
+            <div className={[_s.default, _s.width100PC, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+              <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+
+                <ProfileHeader account={account} />
+
+                <div className={[_s.default, _s.width1015PX,, _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
+                  <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
+                    <Sticky top={63} enabled>
+                      <div className={[_s.default, _s.width340PX].join(' ')}>
+                        {layout}
+                      </div>
+                    </Sticky>
                   </div>
-                </Sticky>
+                  <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+                    <div className={_s.default}>
+                      {children}
+                    </div>
+                  </div>
+                </div>
+
               </div>
             </div>
 
-          </div>
-        </div>
 
-      </Layout>
+          </div>
+
+        </main>
+
+      </div>
     )
   }
 

app/javascript/gabsocial/layouts/settings_layout.js

@@ -14,13 +14,13 @@ export default class SettingsLayout extends PureComponent {
     const { children, actions, tabs, title } = this.props
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundColorSecondary3].join(' ')}>
+      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
         <Sidebar />
 
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
 
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgTertiary, _s.z3, _s.top0, _s.posFixed].join(' ')}>
             <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width100PC].join(' ')}>
                 <ColumnHeader