Add menu app on topbar

vtex-apps · May 7, 2018 · 3a7e0c7 · 3a7e0c7
1 parent 8ddacd5
commit 3a7e0c7
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,9 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-
-## [0.0.7] - 2018-05-07
+## Added
+- Add Menu app on top bar
 
 ## Deprecated
-
-- Remove the own implementation of shelf to add Shelf app. 
+- Remove the own implementation of shelf to add the app. 
diff --git a/pages/pages.json b/pages/pages.json
@@ -21,6 +21,9 @@
     "store/home": {
       "component": "HomePage"
     },
+    "store/home/menu-link": {
+      "component": "vtex.menu/Menu"
+    },
     "store/home/carousel": {
       "component": "vtex.carousel/Carousel"
     },
@@ -37,4 +40,4 @@
       "component": "ProductPage"
     }
   }
-}
+}
diff --git a/react/components/Header.js b/react/components/Header.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { injectIntl, intlShape } from 'react-intl'
 import Input from '@vtex/styleguide/lib/Input'
 import Button from '@vtex/styleguide/lib/Button'
+import { ExtensionPoint } from 'render'
 
 import MiniCart from './MiniCart'
 import CartIcon from '../images/CartIcon'
@@ -45,12 +46,60 @@ class Header extends Component {
     const { name } = this.props
     const { searchValue, showCart } = this.state
     return (
-      <div className="z-2 flex-ns items-center w-100 top-0 pa4 pa5-ns ph7-l bg-white tl">
-        <div className="flex items-center justify-between pb3 pb0-ns">
-          <a className="link b f3 near-black tc tl-ns pr7 serious-black" href="/">
-            {name || account}
-          </a>
-          <div className="pl6 di dn-ns">
+      <div>
+        <div className="z-2 flex-ns items-center w-100 top-0 bg-white tl">
+          <ExtensionPoint id="menu-link" />
+        </div>
+        <div className="z-2 flex-ns items-center w-100 top-0 pa4 pa5-ns ph7-l bg-white tl">
+          <div className="flex items-center justify-between pb3 pb0-ns">
+            <a className="link b f3 near-black tc tl-ns pr7 serious-black" href="/">
+              {name || account}
+            </a>
+            <div className="pl6 di dn-ns">
+              <Button
+                data-test-id="cart"
+                onClick={this.handleCart}
+                onMouseEnter={this.handleCartMouseEnter}
+              >
+                <CartIcon />
+              </Button>
+              {showCart && (
+                <div
+                  className="absolute z-4 right-0 top-2 w-30 ma6 mt10 bg-white br2 shadow-2"
+                  onMouseLeave={this.handleMouseLeave}
+                >
+                  <MiniCart />
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="tr-ns flex items-center flex-auto justify-center">
+            <div className="w-100 mw7-ns">
+              <Input
+                placeholder={this.translate('search-placeholder')}
+                value={searchValue}
+                onChange={this.handleChange}
+                size="large"
+              />
+            </div>
+            <div className="flex items-center justify-center dim">
+              <Button
+                data-test-id="search"
+                onClick={this.handleSearch}
+                size="large"
+              >
+                <div className="flex items-start">
+                  <div>
+                    <SearchIcon />
+                  </div>
+                  <div className="pl3 blue">
+                    SEARCH
+                  </div>
+                </div>
+              </Button>
+            </div>
+          </div>
+          <div className="pl4 dn di-ns">
             <Button
               data-test-id="cart"
               onClick={this.handleCart}
@@ -68,49 +117,6 @@ class Header extends Component {
             )}
           </div>
         </div>
-        <div className="tr-ns flex items-center flex-auto justify-center">
-          <div className="w-100 mw7-ns">
-            <Input
-              placeholder={this.translate('search-placeholder')}
-              value={searchValue}
-              onChange={this.handleChange}
-              size="large"
-            />
-          </div>
-          <div className="flex items-center justify-center dim">
-            <Button
-              data-test-id="search"
-              onClick={this.handleSearch}
-              size="large"
-            >
-              <div className="flex items-start">
-                <div>
-                  <SearchIcon />
-                </div>
-                <div className="pl3 blue">
-                  SEARCH
-                </div>
-              </div>
-            </Button>
-          </div>
-        </div>
-        <div className="pl4 dn di-ns">
-          <Button
-            data-test-id="cart"
-            onClick={this.handleCart}
-            onMouseEnter={this.handleCartMouseEnter}
-          >
-            <CartIcon />
-          </Button>
-          {showCart && (
-            <div
-              className="absolute z-4 right-0 top-2 w-30 ma6 mt10 bg-white br2 shadow-2"
-              onMouseLeave={this.handleMouseLeave}
-            >
-              <MiniCart />
-            </div>
-          )}
-        </div>
       </div>
     )
   }