Add anchor and remove on hash change event

pages/_app.js

@@ -25,7 +25,6 @@ export default class MyApp extends App {
     Router.onRouteChangeStart = () => this.setState({ loading: true })
     Router.onRouteChangeComplete = () => this.setState({ loading: false })
 
-    window.addEventListener('hashchange', offsetAnchor)
     window.setTimeout(offsetAnchor, 1)
   }
 
@@ -47,8 +46,4 @@ export default class MyApp extends App {
       </IconContext.Provider>
     )
   }
-
-  componentWillUnmount() {
-    window.removeEventListener('hashchange', offsetAnchor, false)
-  }
 }

styles/helpers/base.sass

@@ -6,6 +6,7 @@ html, body
 	font-family: $font-sans
 	line-height: 1.2
 	background: #fff url(/images/bg-pattern.jpg)
+	scroll-behavior: smooth
 
 
 // Typography

utils/helpers.js

@@ -1,15 +1,15 @@
-import { ABOUT } from '~/consts/pages'
+import { INIT_SELECTED_PAGE } from '~/consts/initState'
 
 export const offsetAnchor = () => {
   if (location.hash.length !== 0) {
-    const adjustPixel = calcAdjustPixel(location.hash)
-    window.scrollTo(window.scrollX, window.scrollY + adjustPixel)
+    window.scrollTo(window.scrollX, window.scrollY)
   }
 }
 
-const calcAdjustPixel = locationHash => {
-  if (locationHash === `#${ABOUT}`) {
-    return -150
+export const getSelectedSection = () => {
+  if (location.hash.length !== 0) {
+    const selectedPage = location.hash.substr(1)
+    return selectedPage
   }
-  return -50
+  return INIT_SELECTED_PAGE
 }

views/components/About.js

@@ -4,10 +4,12 @@ import styled from 'styled-components/macro'
 import Container from 'react-bootstrap/Container'
 import CardHeader from '~/views/components/about/CardHeader'
 import CardInfo from '~/views/components/about/CardInfo'
+import Anchor from '~/views/components/common/Anchor'
 
 const About = () => (
   <Section>
-    <Container id={ABOUT}>
+    <Anchor id={ABOUT} top={-150} />
+    <Container>
       <Card>
         <CardHeader />
         <CardInfo />
@@ -17,6 +19,7 @@ const About = () => (
 )
 
 const Section = styled.section`
+  position: relative;
   margin-top: -200px;
 `
 

views/components/Certification.js

@@ -5,12 +5,14 @@ import { CERTIFICATIONS } from '~/consts/pages'
 import { CERT_ACTIVE_ITEM } from '~/consts/certification'
 import Container from '~/views/components/common/section/Container'
 import Header from '~/views/components/common/section/Header'
+import Anchor from '~/views/components/common/Anchor'
 
 const Certification = () => {
   const [itemSelected, setSelectedItem] = useState(CERT_ACTIVE_ITEM[0])
 
   return (
-    <WorkAroundContainer id={CERTIFICATIONS}>
+    <WorkAroundContainer>
+      <Anchor id={CERTIFICATIONS} top={-40} />
       <div className="container">
         <Header>
           <h2>Certifications and Prizes</h2>

views/components/Contact.js

@@ -5,9 +5,11 @@ import Map from '~/views/components/contact/Map'
 import Content from '~/views/components/contact/Content'
 import Header from '~/views/components/contact/Header'
 import Container from 'react-bootstrap/Container'
+import Anchor from '~/views/components/common/Anchor'
 
 const Contact = () => (
-  <Wrapper id={CONTACTS}>
+  <Wrapper>
+    <Anchor id={CONTACTS} top={-40} />
     <Container>
       <Card>
         <Header />

views/components/Experiences.js

@@ -6,13 +6,14 @@ import SectionContainer from '~/views/components/common/section/Container'
 import List from '~/views/components/experiences/List'
 import Container from 'react-bootstrap/Container'
 import Row from 'react-bootstrap/Row'
-
+import Anchor from '~/views/components/common/Anchor'
 import { Translate } from 'react-localize-redux'
 
 const companyRows = getCompanies()
 
 const Experiences = () => (
-  <SectionContainer id={EXPERIENCES}>
+  <SectionContainer>
+    <Anchor id={EXPERIENCES} top={-40} />
     <Container>
       <Header>
         <h2>

views/components/Home.js

@@ -3,9 +3,11 @@ import { HOME } from '~/consts/pages'
 import styled from 'styled-components/macro'
 import { Translate } from 'react-localize-redux'
 import Container from 'react-bootstrap/Container'
+import Anchor from '~/views/components/common/Anchor'
 
 const Home = () => (
-  <HomeSection id={HOME}>
+  <HomeSection>
+    <Anchor id={HOME} />
     <Background />
     <Overlay>
       <Container>

views/components/Project.js

@@ -5,9 +5,11 @@ import Header from '~/views/components/common/section/Header'
 import Content from '~/views/components/project/Content'
 import Item from '~/views/components/project/Item'
 import { PROJECTS } from '~/consts/pages'
+import Anchor from '~/views/components/common/Anchor'
 
 const Project = () => (
-  <Container id={PROJECTS}>
+  <Container>
+    <Anchor id={PROJECTS} top={-40} />
     <Header>
       <h2>
         <Translate id="Project: Title" />

views/components/common/Anchor.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components/macro'
+
+const Anchor = styled.span`
+  position: absolute;
+  top: ${props => props.top || 0}px;
+`
+
+export default Anchor

views/components/common/section/Container.js

@@ -17,6 +17,7 @@ Container.propTypes = {
 export default Container
 
 const Style = styled.section`
+  position: relative;
   padding-top: 100px;
 
   @media screen and (max-width: 800px) {

views/components/nav/NavContent.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components/macro'
 import PropTypes from 'prop-types'
 import NavLogo from '~/views/components/nav/NavLogo'
@@ -7,10 +7,20 @@ import MobileContainer from '~/views/components/common/container/MobileContainer
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import { PAGE_LIST } from '~/consts/pages'
-import { INIT_SELECTED_PAGE } from '~/consts/initState'
+import { getSelectedSection } from '~/utils/helpers'
 
 const NavContent = ({ isShowNavContent }) => {
-  const [selectedPage, setSelectedPage] = useState(INIT_SELECTED_PAGE)
+  const [selectedPage, setSelectedPage] = useState(getSelectedSection())
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      setSelectedPage(getSelectedSection())
+    }
+    window.addEventListener('hashchange', handleHashChange)
+    return function cleanup() {
+      window.removeEventListener('hashchange', handleHashChange, false)
+    }
+  })
 
   return (
     <NavContainer isShowNavContent={isShowNavContent}>