feat(sidebar): add drop shadow when scroll off the top

Author: mydearxym

src/containers/Sidebar/MenuBar.js

@@ -16,10 +16,10 @@ import {
 
 import { onCommunitySelect } from './logic'
 
-const MenuBar = ({ pin, item, activeRaw, forceRerender }) => (
+const MenuBar = ({ pin, item, activeRaw, forceRerender, dropShadow }) => (
   <Wrapper onClick={onCommunitySelect.bind(this, item)}>
     <ActiveBar pin={pin} active={activeRaw === R.toLower(item.raw)} />
-    <MenuItemBar>
+    <MenuItemBar dropShadow={dropShadow}>
       <MenuRow pin={pin} active={activeRaw === R.toLower(item.raw)}>
         <MenuItemIcon
           key={uid.gen()}

src/containers/Sidebar/MenuList.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import R from 'ramda'
+import { Waypoint } from 'react-waypoint'
 import { SortableContainer, SortableElement } from 'react-sortable-hoc'
-
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
 import MenuBar from './MenuBar'
+import { scrollOnTop, scrollOffTop } from './logic'
 import { Wrapper, ScrollWrapper } from './styles/menu_list'
 
 const SortableMenuBar = SortableElement(
@@ -19,30 +20,39 @@ const SortableMenuBar = SortableElement(
 )
 
 const MenuList = SortableContainer(
-  ({ items, pin, activeRaw, forceRerender }) => {
+  ({ items, pin, activeRaw, forceRerender, showHomeBarShadow }) => {
     const homeCommunities = R.filter(R.propEq('raw', 'home'), items)
     const sortableCommunities = R.reject(R.propEq('raw', 'home'), items)
 
     return (
       <Wrapper>
         {homeCommunities.map(item => (
-          <MenuBar key={item.raw} pin={pin} item={item} activeRaw={activeRaw} />
+          <MenuBar
+            key={item.raw}
+            pin={pin}
+            item={item}
+            activeRaw={activeRaw}
+            dropShadow={showHomeBarShadow}
+          />
         ))}
         <OverlayScrollbarsComponent
           options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
           className="os-theme-light"
         >
           <ScrollWrapper>
-            {sortableCommunities.map((item, index) => (
-              <SortableMenuBar
-                index={index}
-                key={item.raw}
-                pin={pin}
-                item={item}
-                activeRaw={activeRaw}
-                forceRerender={forceRerender}
-              />
-            ))}
+            <React.Fragment>
+              <Waypoint onEnter={scrollOnTop} onLeave={scrollOffTop} />
+              {sortableCommunities.map((item, index) => (
+                <SortableMenuBar
+                  index={index}
+                  key={item.raw}
+                  pin={pin}
+                  item={item}
+                  activeRaw={activeRaw}
+                  forceRerender={forceRerender}
+                />
+              ))}
+            </React.Fragment>
           </ScrollWrapper>
         </OverlayScrollbarsComponent>
       </Wrapper>

src/containers/Sidebar/index.js

@@ -20,7 +20,13 @@ const log = buildLog('C:Sidebar:index')
 const SidebarContainer = ({ sidebar }) => {
   useInit(sidebar)
 
-  const { curCommunity, pin, communitiesData, forceRerender } = sidebar
+  const {
+    curCommunity,
+    pin,
+    showHomeBarShadow,
+    communitiesData,
+    forceRerender,
+  } = sidebar
 
   // onMouseLeave={logic.leaveSidebar}
   // onMouseLeave is not unreliable in chrome: https://github.com/facebook/react/issues/4492
@@ -32,6 +38,7 @@ const SidebarContainer = ({ sidebar }) => {
       <MenuList
         items={communitiesData}
         pin={pin}
+        showHomeBarShadow={showHomeBarShadow}
         forceRerender={forceRerender}
         activeRaw={activeRaw}
         onSortEnd={onSortMenuEnd}

src/containers/Sidebar/logic.js

@@ -27,6 +27,16 @@ let sub$ = null
 
 export const setPin = () => store.mark({ pin: !store.pin })
 
+export const scrollOnTop = () => {
+  store.mark({ showHomeBarShadow: false })
+  log('scrollTop ... On')
+}
+
+export const scrollOffTop = () => {
+  store.mark({ showHomeBarShadow: true })
+  log('scrollTop ... Off')
+}
+
 export const onCommunitySelect = community => {
   // NOTE: check page, if current it's from communities then redirect whole page
   const { mainPath } = store.curRoute

src/containers/Sidebar/store.js

@@ -15,6 +15,8 @@ const SidebarStore = t
   .model('SidebarStore', {
     // open: t.optional(t.boolean, false),
     pin: t.optional(t.boolean, false),
+    // add shadow effect when user scroll the communities list
+    showHomeBarShadow: t.optional(t.boolean, false),
 
     /*
        this is a fix for wired svg icon in sidebar

src/containers/Sidebar/styles/menu_bar.js

@@ -26,6 +26,8 @@ export const ActiveBar = styled.div`
     top: 20px;
   }
 `
+// box-shadow: 0px 6px 4px 0px rgba(0,0,0,0.2);
+// border-bottom: 1px dashed #316d7b;
 export const MenuItemBar = styled.div`
   cursor: pointer;
   opacity: 1;
@@ -37,6 +39,11 @@ export const MenuItemBar = styled.div`
   width: 100%;
   box-sizing: border-box;
   color: ${theme('sidebar.menuLink')};
+
+  box-shadow: ${({ dropShadow }) =>
+    dropShadow ? '0px 6px 4px 0px rgba(0,0,0,0.2)' : 'none'};
+  border-bottom: ${({ dropShadow }) =>
+    dropShadow ? '1px dashed #316d7b' : ''};
 `
 export const MenuRow = styled.div`
   ${cs.flex()};