From c264a5fb475e0ce805d0aeeb355521e79081407d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Oct 2021 19:09:34 -0500
Subject: [PATCH] SubNavigation: border-radius 0 when scrolled

---
 app/soapbox/components/sub_navigation.js | 41 +++++++++++++++++++++++-
 app/styles/navigation.scss               |  4 +++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js
index 6edf355a4..627dffff4 100644
--- a/app/soapbox/components/sub_navigation.js
+++ b/app/soapbox/components/sub_navigation.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import { throttle } from 'lodash';
 import Icon from 'soapbox/components/icon';
+import classNames from 'classnames';
 
 export default class SubNavigation extends React.PureComponent {
 
@@ -13,6 +15,10 @@ export default class SubNavigation extends React.PureComponent {
     router: PropTypes.object.isRequired,
   }
 
+  state = {
+    scrolled: false,
+  }
+
   handleBackClick = () => {
     if (window.history && window.history.length === 1) {
       this.context.router.history.push('/');
@@ -27,11 +33,44 @@ export default class SubNavigation extends React.PureComponent {
     }
   }
 
+  componentDidMount() {
+    this.attachScrollListener();
+  }
+
+  componentWillUnmount() {
+    this.detachScrollListener();
+  }
+
+  attachScrollListener() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  detachScrollListener() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = throttle(() => {
+    if (this.node) {
+      const { top } = this.node.getBoundingClientRect();
+
+      if (top <= 50) {
+        this.setState({ scrolled: true });
+      } else {
+        this.setState({ scrolled: false });
+      }
+    }
+  }, 150, { trailing: true });
+
+  setRef = c => {
+    this.node = c;
+  }
+
   render() {
     const { message } = this.props;
+    const { scrolled } = this.state;
 
     return (
-      <div className='sub-navigation'>
+      <div className={classNames('sub-navigation', { 'sub-navigation--scrolled': scrolled })} ref={this.setRef}>
         <div className='sub-navigation__content'>
           <button
             className='sub-navigation__back'
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index c9498aeff..a0c0c451a 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -113,6 +113,10 @@
   justify-content: center;
   z-index: 999;
 
+  &--scrolled {
+    border-radius: 0 !important;
+  }
+
   &__content {
     width: 100%;
     height: 100%;