diff --git a/src/assets/theme/index.js b/src/assets/theme/index.js index ef0287f..28fb8ed 100644 --- a/src/assets/theme/index.js +++ b/src/assets/theme/index.js @@ -26,6 +26,13 @@ export const textSizes = { hg: 200, } +export const screenSizes = { + xs: 670, + sm: 800, + md: 1000, + lg: 1500, +} + export const defaultTheme = { background: colours.midnightDarker, foreground: colours.rose, highlight: colours.highlight } diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 85b5ab1..3df1d1b 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,36 +1,66 @@ import { h } from 'preact' import { Link as ReactLink } from 'react-router-dom' -import { RightBox, StyledRow as Row } from './styles' +import { RightBox, StyledRow as Row, Modal } from './styles' import { ImageLogo } from '../Logo' +import { useWindowSize } from '../../hooks/dom' import Link from '../Link' +import { Span } from '../Text' +import CrossSvg from '../Svg/Cross' import navigation from '../../data/navigation' -import { colours, textSizes } from '../../assets/theme' +import { colours, screenSizes, textSizes } from '../../assets/theme' +import { useToggle } from '../../hooks/utility' -const Navigation = ({ theme = {}, lang = 'en' }) => ( - - {navigation[lang].map(navItem => {navItem.label})} - -) +const Navigation = ({ theme = {}, lang = 'en', headerTheme }) => navigation[lang].map(navItem => ( + + {navItem.label} + +)) - -const BigHeader = ({ theme = {}, lang = 'en', ...rest }) => ( - +const NavigationModal = ({ theme = {}, lang = 'en', headerTheme, toggleMenuOpen, ...rest }) => ( + - + +
+ +
+ +) + +const FullHeader = ({ theme = {}, headerTheme = {}, lang = 'en', miniHeader, isMobile, toggleMenuOpen, ...rest }) => ( + + {!miniHeader ? + + : null} + {!isMobile ? ( + + + + ) : Menu} ) -const MiniHeader = ({ theme = {}, lang = 'en', ...rest }) => ( - - - -) -const Header = ({ miniHeader, ...rest }) => miniHeader ? : + +const Header = ({ miniHeader, theme, ...rest }) => { + const headerTheme = { foreground: theme.background, background: 'transparent', } + const { width: screenWidth } = useWindowSize() + const [menuOpen, toggleMenuOpen] = useToggle(false) + const isMobile = screenWidth < screenSizes.lg + + if (menuOpen) return + + return +} export default Header diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js index dda927f..2382ef6 100644 --- a/src/components/Header/styles.js +++ b/src/components/Header/styles.js @@ -1,5 +1,7 @@ import styled from 'styled-components' +import { screenSizes } from '../../assets/theme' import { Row } from '../Flex' +import CrossSvg from '../Svg/Cross' export const StyledRow = styled(Row)` @@ -19,12 +21,56 @@ export const StyledRow = styled(Row)` padding: 1em; } - a:hover { - opacity: 0.5; + + a, span { + margin-right: 2em; + cursor: pointer; + + @media screen and (max-width: ${screenSizes.md}px) { + margin-right: 1em; + } + + &:hover { + opacity: 0.5; + } } ` export const RightBox = styled(Row)` - a { - margin-right: 4em; +` + +export const Modal = styled.div` + z-index: 100; + background-color: ${({ theme }) => theme.background}; + color: ${({ theme }) => theme.foreground}; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + pointer-events: all; + + + img { + max-height: 80px; + mix-blend-mode: exclusion; + padding: 1em; } + + div { + padding: 3em; + display: flex; + flex-direction: column; + } + + div a { + margin-bottom: 1em; + font-size: 6vh; + display: inline-block; + line-height: 0.8; + } +` +export const PositionedCross = styled(CrossSvg)` + position: fixed; + right: 1em; + top: 1em; ` \ No newline at end of file diff --git a/src/components/Link/index.js b/src/components/Link/index.js index 18de9f8..51df15d 100644 --- a/src/components/Link/index.js +++ b/src/components/Link/index.js @@ -11,8 +11,6 @@ const Link = ({ children, to, activeOnlyWhenExact = true, href, textProps: { col exact: activeOnlyWhenExact }) - console.log({ colour }) - return href ? {children} : ( {children} diff --git a/src/helpers/string.js b/src/helpers/string.js index e41aa5a..d9b40c4 100644 --- a/src/helpers/string.js +++ b/src/helpers/string.js @@ -1,5 +1,8 @@ export const slugify = (title) => { - let str = title.replace(/^\s+|\s+$/g, '') // trim + let str = title ? title.replace(/^\s+|\s+$/g, '') : null // trim + + if (!str) return title; + str = str.toLowerCase() // remove accents, swap ñ for n, etc @@ -22,11 +25,11 @@ export const capitaliseFirstLetter = word => word ? `${word?.charAt(0).toUpperCase()}${word?.slice(1)}` : ''; export const camelise = str => { - return str + return str ? str .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => { return index === 0 ? letter.toLowerCase() : letter.toUpperCase(); }) - .replace(/\s+/g, ''); + .replace(/\s+/g, '') : str }; /** diff --git a/src/hooks/dom.js b/src/hooks/dom.js index 0d0f8fc..06abda4 100644 --- a/src/hooks/dom.js +++ b/src/hooks/dom.js @@ -35,3 +35,31 @@ export const useWindowDimensions = () => { return { width, height } } + + +export const useWindowSize = () => { + // Initialize state with undefined width/height so server and client renders match + // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }) + + useEffect(() => { + // Handler to call on window resize + function handleResize() { + // Set window width/height to state + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }) + } + // Add event listener + window.addEventListener('resize', handleResize) + // Call handler right away so state gets updated with initial window size + handleResize() + // Remove event listener on cleanup + return () => window.removeEventListener('resize', handleResize) + }, []) // Empty array ensures that effect is only run on mount + return windowSize +} \ No newline at end of file diff --git a/src/layouts/InfoLayout/index.js b/src/layouts/InfoLayout/index.js index 4184505..9d546ca 100644 --- a/src/layouts/InfoLayout/index.js +++ b/src/layouts/InfoLayout/index.js @@ -23,7 +23,7 @@ const InfoLayout = ({ title, subtitle, image, children, theme }) => ( {children} -
+

{title}

{ pastSeries.push(series) return false - }) @@ -32,12 +31,14 @@ const Series = () => { -

{strings.en.currentSeries}

- - {currentSeries.map(series => ( - - ))} - + {currentSeries.map(series => ( + +

{strings.en.currentSeries}

+ + + + + ))}

{strings.en.pastSeries}

{pastSeries.map(series => ( diff --git a/src/pages/SeriesPage/index.js b/src/pages/SeriesPage/index.js index c3ade91..7dbc6e3 100644 --- a/src/pages/SeriesPage/index.js +++ b/src/pages/SeriesPage/index.js @@ -16,18 +16,14 @@ import { TrailerContainer, } from './styles' -import config from '../../data/config' import Page from '../../layouts/Page' import { splitArray } from '../../helpers/utils' -import Header from '../../components/Header' -import theme from '../../assets/theme' const SeriesPage = ({ data }) => { - - const credits = ` + const credits = data.credits ? ` ## Credits ${data.credits} - ` + ` : null const dateString = `${new Date()}` let tzShort = @@ -52,7 +48,7 @@ const SeriesPage = ({ data }) => {

{data.title}:

{data.subtitle}

- {data.description} + {data.description ? {data.description} : null} {data.trailer ? ( @@ -101,7 +97,7 @@ const SeriesPage = ({ data }) => { ))} ) : null} - {data.credits ? + {credits ? Credits {credits} : null}