refactor #1
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { ROUTE } from '@config/routing';
|
import { ROUTE } from '@config/routing';
|
||||||
import useSmoothScroll from '@libs/useSmoothScroll';
|
import smoothScroll from '@utils/smoothScroll';
|
||||||
import logo from '@images/logo.svg';
|
import logo from '@images/logo.svg';
|
||||||
import { HEADER_ID } from '@features/IndexPage/components/Header/Header';
|
import { HEADER_ID } from '@features/IndexPage/components/Header/Header';
|
||||||
import { SECTION_ID as PORTFOLIO_SECTION_ID } from '@features/IndexPage/components/Portfolio/Portfolio';
|
import { SECTION_ID as PORTFOLIO_SECTION_ID } from '@features/IndexPage/components/Portfolio/Portfolio';
|
||||||
|
@ -13,7 +13,6 @@ import { Link as GatsbyLink } from 'gatsby-theme-material-ui';
|
||||||
|
|
||||||
function Navbar({ className, ...rest }) {
|
function Navbar({ className, ...rest }) {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const handleClickLink = useSmoothScroll();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppBar
|
<AppBar
|
||||||
|
@ -39,7 +38,7 @@ function Navbar({ className, ...rest }) {
|
||||||
title="Start"
|
title="Start"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
href={'#' + HEADER_ID}
|
href={'#' + HEADER_ID}
|
||||||
onClick={handleClickLink(HEADER_ID)}
|
onClick={smoothScroll(HEADER_ID)}
|
||||||
>
|
>
|
||||||
Start
|
Start
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -47,7 +46,7 @@ function Navbar({ className, ...rest }) {
|
||||||
title="Portfolio"
|
title="Portfolio"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
href={'#' + PORTFOLIO_SECTION_ID}
|
href={'#' + PORTFOLIO_SECTION_ID}
|
||||||
onClick={handleClickLink(PORTFOLIO_SECTION_ID)}
|
onClick={smoothScroll(PORTFOLIO_SECTION_ID)}
|
||||||
>
|
>
|
||||||
Portfolio
|
Portfolio
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -55,7 +54,7 @@ function Navbar({ className, ...rest }) {
|
||||||
title="Contact"
|
title="Contact"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
href={'#' + CONTACT_SECTION_ID}
|
href={'#' + CONTACT_SECTION_ID}
|
||||||
onClick={handleClickLink(CONTACT_SECTION_ID)}
|
onClick={smoothScroll(CONTACT_SECTION_ID)}
|
||||||
>
|
>
|
||||||
Contact
|
Contact
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
@ -4,25 +4,6 @@ import classnames from 'classnames';
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
|
||||||
section: {
|
|
||||||
padding: '3rem 0',
|
|
||||||
'&.is-primary': {
|
|
||||||
backgroundColor: theme.palette.primary.main,
|
|
||||||
},
|
|
||||||
'&.is-black': {
|
|
||||||
backgroundColor: '#000',
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
padding: '6rem 0',
|
|
||||||
},
|
|
||||||
'&.is-small': {
|
|
||||||
padding: '3rem 0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const BG_COLOR = {
|
export const BG_COLOR = {
|
||||||
TRANSPARENT: 'transparent',
|
TRANSPARENT: 'transparent',
|
||||||
BLACK: 'black',
|
BLACK: 'black',
|
||||||
|
@ -61,4 +42,23 @@ Section.propTypes = {
|
||||||
size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
|
size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
section: {
|
||||||
|
padding: '3rem 0',
|
||||||
|
'&.is-primary': {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
|
'&.is-black': {
|
||||||
|
backgroundColor: '#000',
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
padding: '6rem 0',
|
||||||
|
},
|
||||||
|
'&.is-small': {
|
||||||
|
padding: '3rem 0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export default Section;
|
export default Section;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import useSmoothScroll from '@libs/useSmoothScroll';
|
import smoothScroll from '@utils/smoothScroll';
|
||||||
import { SECTION_ID } from '../Contact';
|
import { SECTION_ID } from '../Contact';
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
@ -10,7 +10,7 @@ export const HEADER_ID = 'start';
|
||||||
|
|
||||||
function Header() {
|
function Header() {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const handleLinkClick = useSmoothScroll();
|
|
||||||
return (
|
return (
|
||||||
<header id={HEADER_ID} className={classes.header}>
|
<header id={HEADER_ID} className={classes.header}>
|
||||||
<Container className={classes.container}>
|
<Container className={classes.container}>
|
||||||
|
@ -29,7 +29,7 @@ function Header() {
|
||||||
<Link
|
<Link
|
||||||
underline="none"
|
underline="none"
|
||||||
to={'#' + SECTION_ID}
|
to={'#' + SECTION_ID}
|
||||||
onClick={handleLinkClick(SECTION_ID)}
|
onClick={smoothScroll(SECTION_ID)}
|
||||||
>
|
>
|
||||||
<Button variant="outlined" size="large">
|
<Button variant="outlined" size="large">
|
||||||
<Typography variant="h4">Get in touch</Typography>
|
<Typography variant="h4">Get in touch</Typography>
|
||||||
|
|
|
@ -1,18 +0,0 @@
|
||||||
import isSmoothScrollSupported from '@utils/isSmoothScrollSupported';
|
|
||||||
|
|
||||||
const useSmoothScroll = () => {
|
|
||||||
return id => e => {
|
|
||||||
if (!isSmoothScrollSupported()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
document.querySelector('#' + id).scrollIntoView({
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'start',
|
|
||||||
inline: 'nearest',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useSmoothScroll;
|
|
|
@ -1,4 +0,0 @@
|
||||||
const isSmoothScrollSupported = () =>
|
|
||||||
'scrollBehavior' in document.documentElement.style;
|
|
||||||
|
|
||||||
export default isSmoothScrollSupported;
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
const isSmoothScrollSupported = () =>
|
||||||
|
'scrollBehavior' in document.documentElement.style;
|
||||||
|
|
||||||
|
const smoothScroll = id => e => {
|
||||||
|
if (!isSmoothScrollSupported()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
document.querySelector('#' + id).scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start',
|
||||||
|
inline: 'nearest',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default smoothScroll;
|
Loading…
Reference in New Issue