Header adjusts

Author: cazetto

src/components/back4App/Header/Header.react.js

@@ -20,7 +20,7 @@ export default class Header extends React.Component {
   } 
   componentWillMount() {
     /*
-      - Thi-s resource should be implemented following parse-dashboard community standards (using flux).
+      - This resource should be implemented following parse-dashboard community standards (using flux).
       But it was actualy not possible to use the subscribeTo decorator in the Header component 
       before the App was injected in the router. This is a simple temporary solution.
     */
@@ -49,29 +49,26 @@ export default class Header extends React.Component {
               }} />
             </div>
           </Media>
-          <Media query="(min-width: 1100px)">
-            <a className={styles['logo-face']} href="http://www.back4app.com/">
-              <Icon width={46} height={47} name='back4app-logo-face-blue' fill='#208AEC' />
+
+          <a className={styles['logo-face']} href="http://www.back4app.com/">
+            <Icon width={46} height={47} name='back4app-logo-face-blue' fill='#208AEC' />
+          </a>
+          
+          <Media query="(min-width: 680px)">
+            <a className={styles['logo-text']} href="http://www.back4app.com/">
+              <Icon width={134} height={53} name='back4app-logo-text-blue' fill='#208AEC' />
             </a>
           </Media>
-          <a className={styles['logo-text']} href="http://www.back4app.com/">
-            <Icon width={134} height={53} name='back4app-logo-text-blue' fill='#208AEC' />
-          </a>
-        </div>
 
+        </div>
         <div className={styles['right-side']}>
-
-          <Media query="(min-width: 1100px)">
-            <Nav items={navData.items} />
-          </Media>
-
+          <Nav items={navData.items} />
           <Media query="(min-width: 1100px)">
             <div className="ml-auto">
               <Dropdown items={navData.dropdownItems}>{this.state.username && `Hello, ${this.state.username}`}<i className="dropdown-icon zmdi zmdi-caret-down"></i></Dropdown>
               <Button color="green" weight="700" url="https://dashboard.back4app.com/apps/#!/apps/new">NEW APP</Button>
             </div>
           </Media>
-
         </div>
       </header>
     );

src/components/back4App/Header/Header.scss

@@ -12,7 +12,7 @@
   font-family: 'Raleway';
   font-size: 16px;
   padding-right: 45px;
-
+  
   .left-side {
     display: flex;
     min-width: 247px;
@@ -41,4 +41,25 @@
     padding: 24px 0 0 10px;
     white-space: nowrap;
   }
+
+  // Responsive
+  @media(max-width: 1100px) {
+    padding-right: 14px;
+    .left-side {
+      min-width: 44px;
+      max-width: 44px;
+      margin-left: 14px;
+    }
+
+    .logo-face {
+      display: none;
+
+      @media(max-width: 680px) {
+        display: block;
+        position: absolute;
+        left: 50%;
+        margin-left: -70px;
+      }
+    }
+  }
 }

src/components/back4App/Header/headerNavData.js

@@ -1,7 +1,7 @@
 const headerNavData = {
   items: [
     {label: 'My Apps', url: 'https://dashboard.back4app.com/apps/#!/admin'},
-    {label: 'Dashboard', url: 'https://dashboard.back4app.com/'},
+    {label: 'Dashboard', url: 'https://parse-dashboard.back4app.com/'},
     {label: 'Docs', url: 'http://docs.back4app.com/'},
     {label: 'Community', url: 'https://groups.google.com/forum/#!forum/back4app'},
     {label: 'Blog', url: 'http://blog.back4app.com/'},
@@ -14,4 +14,9 @@ const headerNavData = {
   ]
 }
 
-export default headerNavData;
+headerNavData.sidebarItems = [
+  ...headerNavData.items,
+  ...headerNavData.dropdownItems,
+]
+
+export default headerNavData;

src/components/back4App/HeaderNav/HeaderNav.scss

@@ -1,6 +1,9 @@
 @import 'stylesheets/back4app.scss';
 
 .nav {
+  display: flex;
+  flex-basis: 100%;
+  
   .menu {
     display: flex;
 
@@ -9,4 +12,9 @@
       margin-top: 0px;
     }
   }
-}
+
+  // Responsive
+  @media(max-width: 1100px) {
+    justify-content: center;
+  }
+}

src/components/back4App/HeaderNavItem/HeaderNavItem.react.js

@@ -5,7 +5,6 @@ import { Link } from 'react-router';
 import styles from 'components/back4App/HeaderNavItem/HeaderNavItem.scss';
 
 let NavItem = props => {
-
   return (
     <li className={`${styles.item} ${props.isCurrent ? styles.active : ''}`}>
       {
@@ -21,7 +20,6 @@ let NavItem = props => {
 export default class HeaderNavItem extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       isCurrent: !!(props.index === 1)
     }

src/components/back4App/HeaderNavItem/HeaderNavItem.scss

@@ -1,7 +1,6 @@
 @import 'stylesheets/back4app.scss';
 
 .item {
-
   margin-top: 6px;
 
   &:not(:first-child) {
@@ -22,6 +21,10 @@
     color: $dark-gray;
     font-weight: 300;
     white-space: nowrap;
+
+    &:hover {
+      color: #208ADB;
+    }
   }
 
   .icon {
@@ -30,4 +33,15 @@
     color: blue;
   }
 
-}
+
+  // Responsive
+  @media(max-width: 1100px) {
+    &:not(:first-child) {
+      margin-left: 0;
+    }
+
+    &:not(.active) {
+      display: none;
+    }
+  }
+}

src/components/back4App/Sidebar/Sidebar.react.js

@@ -23,7 +23,7 @@ const _renderHeaderMenuItems = items => items.map(({label, pathname, url}, index
 let SidebarNav = props => {
   return (
     <nav className={styles.menu} id="accordion" role="tablist" aria-multiselectable="true">
-      {_renderHeaderMenuItems(navData.items)}
+      {_renderHeaderMenuItems(navData.sidebarItems)}
     </nav>
   );
 };
@@ -42,7 +42,7 @@ let sidebarContent = (
     </header>
 
     <div className={styles['menu-wrapper']}>
-      { <SidebarNav items={navData.items} /> }
+      { <SidebarNav items={navData.sidebarItems} /> }
     </div>
 
     <footer className={styles.footer}>