Make the top "sidebar" disappear when scrolling down on mobile

Author: eyalroth

src/assets/scss/_progress.scss

@@ -1,5 +1,15 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
 #gatsby-plugin-page-progress {
     height: 2px;
     background-color: gray;
     transition: none;
+    z-index: 2
+}
+
+@include breakpoint-sm {
+    #gatsby-plugin-page-progress {
+        z-index: unset;
+    }
 }

src/assets/scss/_variables.scss

@@ -42,4 +42,6 @@ $page-sm-padding-left: 25%;
 $page-md-padding-top: 30px;
 $page-md-padding-left: 35%;
 
+$topbar-height: 44px;
+
 $footer-padding: 2.5rem;

src/components/Layout/index.jsx

@@ -21,8 +21,8 @@ class Layout extends React.Component {
         <Helmet>
           <title>{subtitle}Eyal Roth</title>
         </Helmet>
+        <Sidebar globalLinkId={this.props.globalLinkId} />
         <div className="content-wrap">
-          <Sidebar globalLinkId={this.props.globalLinkId} />
           {children}
         </div>
         <Footer />

src/components/Layout/style.scss

@@ -12,12 +12,19 @@ html {
 
 .content-wrap {
     lost-center: $layout-width;
+    padding-top: $topbar-height;
     padding-bottom: $footer-padding;
 
     max-width: $layout-breakpoint-lg;
     margin: 0 auto;
 }
 
+@include breakpoint-sm {
+    .content-wrap {
+        padding-top: unset;
+    }
+}
+
 @include breakpoint-xlg {
     .content-wrap {
         max-width: $layout-breakpoint-xlg;

src/components/Sidebar/index.jsx

@@ -18,10 +18,14 @@ class Sidebar extends React.Component {
 
   constructor(props) {
     super(props)
+
     if (!globalState.sidebar.mode) {
       globalState.sidebar.mode = SidebarMode.Main
     }
-    this.state = { mode: globalState.sidebar.mode }
+    this.state = { isEnabled: true, mode: globalState.sidebar.mode }
+    this.lastScrollY = null
+
+    this.handleScroll = this.handleScroll.bind(this)
   }
 
   changeMode(newMode) {
@@ -68,17 +72,35 @@ class Sidebar extends React.Component {
   compose(profileImg, authorTitle, menu, contact, menuButton, contactButton) {
 
     return (
-      <div id="sidebar" className="sidebar">
-        {menuButton}
-        {profileImg}
-        {authorTitle}
-        {contact}
-        {menu}
-        {contactButton}
-      </div>
+      <Toggle isEnabled={this.state.isEnabled}>
+        <div id="sidebar" className="sidebar">
+          {menuButton}
+          {profileImg}
+          {authorTitle}
+          {contact}
+          {menu}
+          {contactButton}
+        </div>
+      </Toggle>
     )
   }
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll() {
+    const isScrollUp = this.lastScrollY && window.scrollY < this.lastScrollY 
+    this.lastScrollY = window.scrollY
+    const isEnabled = isScrollUp || scrollY <= window.innerHeight
+    if (isEnabled != this.state.isEnabled) {
+      this.setState({isEnabled})
+    }
+  }
 
   renderProfileImg(author) {
     return (

src/components/Sidebar/style.scss

@@ -9,9 +9,18 @@ $transition-timing: 0.2s;
 
 .sidebar {
     width: 100%;
-    position: relative;
     border-bottom: 1px solid #E7E7E7;
     display: inline-block;
+    
+    position: fixed;
+    background-color: $color-white;
+    transition: transform 0.5s ease-out;
+    z-index: 1;
+    height: $topbar-height;
+    
+    @include disabled {
+        transform: translateY(-$topbar-height - 10);
+    }
 
     &__author {
         &-img {
@@ -180,6 +189,16 @@ $transition-timing: 0.2s;
         display: unset;
         text-align: center;
 
+        position: relative;
+        background-color: unset;
+        transition: unset;
+        z-index: unset;
+        height: unset;
+    
+        @include disabled {
+            transform: unset;
+        }
+
         &__author {
             &-img {
                 display: block;