Share button in navbar

mustofa-id · Jul 14, 2019 · 271544e · 271544e
1 parent 3a413b4
commit 271544e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 29 deletions.
diff --git a/src/components/widget/share-button.js b/src/components/widget/share-button.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import IconButton from './icon-button'
+import Icon from './icon'
 
 const links = {
   facebook: 'https://www.facebook.com/sharer/sharer.php?u=',
@@ -9,14 +9,20 @@ const links = {
   pinterest: 'https://pinterest.com/pin/create/button/?url='
 }
 
-export const ShareButton = ({ type, url, ...wrapperProps }) => (
-  <IconButton icon={type} to={links[type] + url} {...wrapperProps} />
-)
-
-export const ShareButtons = ({ url, ...wrapperProps }) => (
-  <>
-    {Object.keys(links).map((k, i) => (
-      <ShareButton key={`${k}--${i}`} type={k} url={url} {...wrapperProps} />
-    ))}
-  </>
+export const ShareButtons = ({ url }) => (
+  <div className='navbar-end'>
+    <div className='navbar-item has-dropdown is-hoverable'>
+      <p className='navbar-link'>Share</p>
+      <div className='navbar-dropdown is-right'>
+        {Object.keys(links).map((k, i) => (
+          <a className='navbar-item' key={`${k}--${i}`} href={links[k] + url}>
+            <span className='icon'>
+              <Icon name={k} size='16' />
+            </span>
+            <span>{k.replace(/./, x => x.toUpperCase())}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  </div>
 )
diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -42,7 +42,10 @@ const BlogPost = ({ data, pageContext, location }) => {
           backTo={`/${paramType}`}
           title={category}
           subtitle={`· ${timeToRead} min read`}
-        />
+          burgerIcon='share-2'>
+          {/* Social media share */}
+          <ShareButtons url={location.href} />
+        </Navbar>
       </header>
       <main>
         <div className='hero is-light'>
@@ -89,14 +92,6 @@ const BlogPost = ({ data, pageContext, location }) => {
                   <LoveContext.Provider value={{ state, dispatch }}>
                     <BottomSheet pageContext={pageContext} title={title} />
                   </LoveContext.Provider>
-                  {/* Social media share */}
-                  <p className='has-text-centered'>
-                    <ShareButtons
-                      url={location.href}
-                      iconSize='24'
-                      buttonClass='is-white has-text-grey'
-                    />
-                  </p>
                 </div>
               </div>
             </div>

diff --git a/src/templates/gallery-post.js b/src/templates/gallery-post.js
@@ -42,7 +42,10 @@ const GalleryPost = ({ data, pageContext, location }) => {
           backTo={`/${paramType}`}
           title={category}
           subtitle={`· ${timeToRead} min read`}
-        />
+          burgerIcon='share-2'>
+          {/* Social media share */}
+          <ShareButtons url={location.href} />
+        </Navbar>
       </header>
       <main>
         <div className='hero is-light'>
@@ -85,14 +88,6 @@ const GalleryPost = ({ data, pageContext, location }) => {
                   <LoveContext.Provider value={{ state, dispatch }}>
                     <BottomSheet pageContext={pageContext} title={title} />
                   </LoveContext.Provider>
-                  {/* Social media share */}
-                  <p className='has-text-centered'>
-                    <ShareButtons
-                      url={location.href}
-                      iconSize='24'
-                      buttonClass='is-white has-text-grey'
-                    />
-                  </p>
                 </div>
               </div>
             </div>