fix(website): scrolling stuff

Author: christianalfoni

packages/overmind-website/backend/index.html

@@ -62,13 +62,15 @@
     body {
       margin: 0;
       height: 100%;
+      overflow: hidden;
     }
 
     #overmind-app {
       height: 100%;
       background-color: #333;
       transition: background-color 0.2s ease-in, color 0.2s ease-in;
       overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
     }
 
     #overmind-loader {

packages/overmind-website/src/components/Api/elements.tsx

@@ -16,6 +16,7 @@ export const ListWrapper = styled.div`
   height: 100vh;
   right: calc(50% + 350px);
   overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 `
 
 export const List = styled.ul`

packages/overmind-website/src/components/MobileTopBar/elements.tsx

@@ -37,6 +37,9 @@ export const Menu = styled.div`
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   border-right: 2px solid ${({ theme }) => theme.color.primary};
+  padding: ${({ theme }) => theme.padding.small};
+  padding-bottom: ${({ theme }) => theme.padding.large};
+  box-sizing: border-box;
 `
 
 export const Link = styled<{ selected?: boolean }, 'a'>('a')`

packages/overmind-website/src/components/MobileTopBar/index.tsx

@@ -17,9 +17,13 @@ class MobileTopBar extends React.Component<Props> {
   }
   openMenu = () => {
     this.menu.style.transform = 'translate3d(0, 0, 0)'
+    const page: HTMLElement = document.querySelector('#overmind-app')
+    page.style.overflowY = 'hidden'
   }
   closeMenu = () => {
     this.menu.style.transform = 'translate3d(-110vw, 0, 0)'
+    const page: HTMLElement = document.querySelector('#overmind-app')
+    page.style.overflowY = 'scroll'
   }
   render() {
     const { selectedTheme, currentPage, currentPath } = this.props

packages/overmind-website/src/components/Search/index.tsx

@@ -45,13 +45,17 @@ class Search extends React.Component<{}, State> {
     searchResult: [],
     showSearchResult: false,
   }
+  isUnmounting: boolean
   componentDidMount() {
     document.addEventListener('click', () => {
       this.setState({
         showSearchResult: false,
       })
     })
   }
+  componentWillUnmount() {
+    this.isUnmounting = true
+  }
   onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const query = event.target.value
     this.setState({
@@ -67,6 +71,10 @@ class Search extends React.Component<{}, State> {
     this.search()
   }
   search = debounce(function() {
+    if (this.isUnmounting) {
+      return
+    }
+
     this.setState({
       isLoading: true,
     })
@@ -106,6 +114,10 @@ class Search extends React.Component<{}, State> {
     if (this.state.searchResult.length) {
       // Let closing click event go through first
       setTimeout(() => {
+        if (this.isUnmounting) {
+          return
+        }
+
         this.setState({
           showSearchResult: true,
         })