finished mobile top bar

common/constants.js

@@ -44,8 +44,8 @@ export const system = {
 export const zindex = {
   navigation: 1,
   sidebar: 5,
-  alert: 4,
-  header: 3,
+  alert: 3,
+  header: 4,
   modal: 6,
   tooltip: 7,
 };

components/core/ApplicationHeader.js

@@ -31,11 +31,11 @@ const STYLES_ICON_ELEMENT = css`
 
 const STYLES_APPLICATION_HEADER = css`
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   width: calc(100% - ${Constants.sizes.navigation}px);
   height: 56px;
-  padding: 12px 48px 0 36px;
+  padding: 0 48px 0 36px;
   pointer-events: none;
   background-color: ${Constants.system.white};
 
@@ -48,7 +48,7 @@ const STYLES_APPLICATION_HEADER = css`
   }
 
   @media (max-width: ${Constants.sizes.mobile}px) {
-    padding: 12px 24px 0 12px;
+    padding: 0px 12px;
     width: 100%;
   }
 `;
@@ -134,40 +134,44 @@ export default class ApplicationHeader extends React.Component {
     return (
       <header css={STYLES_APPLICATION_HEADER}>
         <div css={STYLES_LEFT}>
-          <span css={STYLES_MOBILE_ONLY}>
+          <span
+            css={STYLES_MOBILE_ONLY}
+            style={{ pointerEvents: "auto", marginLeft: 8, marginRight: 16 }}
+          >
             <ApplicationUserControls
               viewer={this.props.viewer}
               onAction={this.props.onAction}
               onSignOut={this.props.onSignOut}
             />
           </span>
-          <span
-            css={STYLES_ICON_ELEMENT}
-            style={
-              isBackDisabled
-                ? { cursor: "not-allowed", color: Constants.system.border }
-                : null
-            }
-            onClick={isBackDisabled ? () => {} : this.props.onBack}
-          >
-            <SVG.NavigationArrow
-              height="24px"
-              style={{ transform: `rotate(180deg)` }}
-            />
-          </span>
-          <span
-            css={STYLES_ICON_ELEMENT}
-            style={
-              isForwardDisabled
-                ? { cursor: "not-allowed", color: Constants.system.border }
-                : null
-            }
-            onClick={isForwardDisabled ? () => {} : this.props.onForward}
-          >
-            <SVG.NavigationArrow height="24px" />
-          </span>
 
           <span css={STYLES_MOBILE_HIDDEN}>
+            <span
+              css={STYLES_ICON_ELEMENT}
+              style={
+                isBackDisabled
+                  ? { cursor: "not-allowed", color: Constants.system.border }
+                  : null
+              }
+              onClick={isBackDisabled ? () => {} : this.props.onBack}
+            >
+              <SVG.NavigationArrow
+                height="24px"
+                style={{ transform: `rotate(180deg)` }}
+              />
+            </span>
+            <span
+              css={STYLES_ICON_ELEMENT}
+              style={
+                isForwardDisabled
+                  ? { cursor: "not-allowed", color: Constants.system.border }
+                  : null
+              }
+              onClick={isForwardDisabled ? () => {} : this.props.onForward}
+            >
+              <SVG.NavigationArrow height="24px" />
+            </span>
+
             <span
               css={this.state.isRefreshing ? STYLES_ROTATION : STYLES_STATIC}
               style={{ marginLeft: 24 }}
@@ -176,25 +180,64 @@ export default class ApplicationHeader extends React.Component {
                 <SVG.Refresh height="20px" />
               </span>
             </span>
-          </span>
 
-          <span
-            css={STYLES_ICON_ELEMENT}
-            style={{ marginLeft: 24 }}
-            onClick={this._handleCreateSearch}
-          >
-            <SVG.Search height="24px" />
+            <span
+              css={STYLES_ICON_ELEMENT}
+              style={{ marginLeft: 24 }}
+              onClick={this._handleCreateSearch}
+            >
+              <SVG.Search height="24px" />
+            </span>
           </span>
         </div>
         {/* <div css={STYLES_MIDDLE} /> */}
         <div css={STYLES_RIGHT}>
-          <span
-            css={STYLES_ICON_ELEMENT}
-            onClick={() =>
-              this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_HELP" })
-            }
-          >
-            <SVG.Help height="24px" />
+          <span css={STYLES_MOBILE_HIDDEN}>
+            <span
+              css={STYLES_ICON_ELEMENT}
+              onClick={() =>
+                this.props.onAction({
+                  type: "SIDEBAR",
+                  value: "SIDEBAR_HELP",
+                })
+              }
+            >
+              <SVG.Help height="24px" />
+            </span>
+          </span>
+          <span css={STYLES_MOBILE_ONLY}>
+            <span
+              css={STYLES_ICON_ELEMENT}
+              style={
+                isBackDisabled
+                  ? { cursor: "not-allowed", color: Constants.system.border }
+                  : null
+              }
+              onClick={isBackDisabled ? () => {} : this.props.onBack}
+            >
+              <SVG.NavigationArrow
+                height="24px"
+                style={{ transform: `rotate(180deg)` }}
+              />
+            </span>
+            <span
+              css={STYLES_ICON_ELEMENT}
+              style={
+                isForwardDisabled
+                  ? { cursor: "not-allowed", color: Constants.system.border }
+                  : null
+              }
+              onClick={isForwardDisabled ? () => {} : this.props.onForward}
+            >
+              <SVG.NavigationArrow height="24px" />
+            </span>
+            <span
+              css={STYLES_ICON_ELEMENT}
+              style={{ marginLeft: 12 }}
+              onClick={this._handleCreateSearch}
+            >
+              <SVG.Search height="24px" />
+            </span>
           </span>
         </div>
       </header>

components/core/ApplicationLayout.js

@@ -66,6 +66,7 @@ const STYLES_CONTENT = css`
   margin-top: ${Constants.sizes.topOffset}px;
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding-left: 0px;
+    margin-top: calc(${Constants.sizes.topOffset}px + 36px);
   }
 `;
 
@@ -144,6 +145,10 @@ const STYLES_SIDEBAR_HEADER = css`
 const STYLES_SIDEBAR_CONTENT = css`
   padding: 56px 24px 24px 24px;
   padding-top: calc(56px + ${Constants.sizes.topOffset}px);
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    padding-top: 8px;
+  }
 `;
 
 const STYLES_BLOCK = css`
@@ -163,6 +168,12 @@ export default class ApplicationLayout extends React.Component {
   _navigation;
   _body;
 
+  _handleDismiss = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.props.onDismissSidebar();
+  };
+
   render() {
     let sidebarElements = null;
     if (this.props.sidebar) {
@@ -175,8 +186,8 @@ export default class ApplicationLayout extends React.Component {
           <div css={STYLES_SIDEBAR_HEADER}>
             <div
               css={STYLES_BLOCK}
-              onMouseUp={this.props.onDismissSidebar}
-              onTouchEnd={this.props.onDismissSidebar}
+              onMouseUp={this._handleDismiss}
+              onTouchEnd={this._handleDismiss}
             >
               <SVG.Dismiss height="24px" />
             </div>
@@ -242,7 +253,7 @@ export default class ApplicationLayout extends React.Component {
             captureResize={false}
             captureScroll={false}
             enabled
-            onOutsideRectEvent={this.props.onDismissSidebar}
+            onOutsideRectEvent={this._handleDismiss}
           >
             <div
               css={STYLES_SIDEBAR}

components/core/ApplicationUserControls.js

@@ -23,6 +23,7 @@ const STYLES_HEADER = css`
 
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 0px;
+    width: auto;
   }
 `;
 
@@ -51,9 +52,7 @@ const STYLES_PROFILE = css`
 
 const STYLES_PROFILE_MOBILE = css`
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: center;
   width: 100%;
 
   @media (min-width: ${Constants.sizes.mobile}px) {
@@ -76,7 +75,6 @@ const STYLES_PROFILE_IMAGE = css`
     height: 24px;
     width: 24px;
     margin-left: 0px;
-    margin-bottom: 4px;
   }
 `;
 
@@ -265,6 +263,8 @@ export default class ApplicationUserControls extends React.Component {
             onClick={this._handleClick}
             style={{
               backgroundImage: `url('${this.props.viewer.data.photo}')`,
+              height: 28,
+              width: 28,
             }}
           />
           {/* <div onClick={this._handleClick} css={STYLES_ITEM_BOX_MOBILE}>