1  import React, { ReactNode, useEffect, useRef, useState } from 'react'
  2  import styled from 'styled-components'
  3  import { Colors } from '../constants/styles'
  4  import { StyledNavLink } from '../components/top/TopBar'
  5  import { PageInfo } from '../components/PageInfo'
  6  import { ConnectMobile } from './ConnectMobile'
  7  
  8  interface TopBarMobileProps {
  9    heading: string
 10    text: string
 11    type: number
 12    children?: ReactNode
 13  }
 14  
 15  export const TopBarMobile = ({ heading, text, children, type }: TopBarMobileProps) => {
 16    const scrollHeight = useRef(document.documentElement.scrollTop)
 17    const [scrollingUp, setScrollingUp] = useState(0)
 18  
 19    useEffect(() => {
 20      const onScroll = () => {
 21        const newScrollHeight = document.documentElement.scrollTop
 22        setScrollingUp((prev) => {
 23          const newPos = prev + scrollHeight.current - newScrollHeight
 24  
 25          if (newPos > 0) return 0
 26          if (type == 0) {
 27            if (window.innerWidth < 340) {
 28              if (newPos < -206) {
 29                return -206
 30              } else {
 31                return newPos
 32              }
 33            }
 34          }
 35          if (type == 1) {
 36            if (window.innerWidth > 554) {
 37              if (newPos < -169) {
 38                return -169
 39              } else {
 40                return newPos
 41              }
 42            }
 43          }
 44          if (newPos < -186) {
 45            return -186
 46          }
 47          return newPos
 48        })
 49        scrollHeight.current = newScrollHeight
 50      }
 51      window.addEventListener('scroll', onScroll)
 52      return () => window.removeEventListener('scroll', onScroll)
 53    }, [])
 54  
 55    return (
 56      <HeaderMobile style={{ top: scrollingUp }}>
 57        <HeaderWrapperMobile>
 58          <ConnectMobile />
 59          <PageInfo heading={heading} text={text} />
 60          <NavigationMobile>
 61            <NavLinks>
 62              <NavItemMobile>
 63                <StyledNavLinkMobile activeClassName="active-page" to="/votes">
 64                  Votes
 65                </StyledNavLinkMobile>
 66              </NavItemMobile>
 67              <NavItemMobile>
 68                <StyledNavLinkMobile activeClassName="active-page" to="/directory">
 69                  Directory
 70                </StyledNavLinkMobile>
 71              </NavItemMobile>
 72              <NavItemMobile>
 73                <StyledNavLinkMobile activeClassName="active-page" to="/featured">
 74                  Featured
 75                </StyledNavLinkMobile>
 76              </NavItemMobile>
 77            </NavLinks>
 78          </NavigationMobile>
 79        </HeaderWrapperMobile>
 80        {children}
 81      </HeaderMobile>
 82    )
 83  }
 84  
 85  const HeaderMobile = styled.header`
 86    position: fixed;
 87    width: 100%;
 88    background-color: ${Colors.GrayLight};
 89    left: 0px;
 90    z-index: 100;
 91    height: 186px;
 92  
 93    @media (max-width: 340px) {
 94      height: 205px;
 95    }
 96  `
 97  
 98  export const HeaderWrapperMobile = styled.div`
 99    display: flex;
100    flex-direction: column;
101    border-bottom: 1px solid rgba(189, 93, 226, 0.15);
102    width: 100%;
103  `
104  
105  const NavigationMobile = styled.nav`
106    width: 100%;
107    height: 41px;
108    bottom: 0;
109  `
110  
111  const NavLinks = styled.ul`
112    display: flex;
113    justify-content: space-between;
114    height: 100%;
115    color: ${Colors.Black};
116  `
117  
118  const NavItemMobile = styled.li`
119    width: 50%;
120    display: flex;
121    align-items: center;
122  `
123  
124  const StyledNavLinkMobile = styled(StyledNavLink)`
125    width: 100%;
126    font-size: 15px;
127    line-height: 22px;
128    padding: 12px 0;
129    text-align: center;
130  
131    &.active-page::after {
132      content: '';
133      width: 100%;
134      height: 2px;
135      bottom: 2px;
136      left: 50%;
137      transform: translateX(-50%);
138  
139      @media (max-width: 600px) {
140        width: 100%;
141      }
142    }
143  `