From be9f07bdb79f93b054199f572856f23d82d51a5e Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 03:40:14 +0300 Subject: [PATCH 01/19] Menu component updated --- src/components/Menu/ActiveLink.tsx | 15 ++++ src/components/Menu/MenuItem.tsx | 33 -------- src/components/Menu/index.tsx | 121 ++++------------------------- src/components/Menu/styles.css | 52 +++++++++++++ 4 files changed, 80 insertions(+), 141 deletions(-) create mode 100644 src/components/Menu/ActiveLink.tsx delete mode 100644 src/components/Menu/MenuItem.tsx create mode 100644 src/components/Menu/styles.css diff --git a/src/components/Menu/ActiveLink.tsx b/src/components/Menu/ActiveLink.tsx new file mode 100644 index 00000000..bd2f4466 --- /dev/null +++ b/src/components/Menu/ActiveLink.tsx @@ -0,0 +1,15 @@ +import Link from 'next/link' + +export interface ActiveLinkProps { + href?: string + activeStyle?: React.CSSProperties +} + +export const ActiveLink: React.FC = props => props.href + ? ( + + {props.children} + + ) : ( + {props.children} + ) \ No newline at end of file diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx deleted file mode 100644 index cc6bd5ab..00000000 --- a/src/components/Menu/MenuItem.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react' - -export interface IMenuItemProps { - active: boolean - text: string - url: string -} - -export const MenuItem: React.FC = ({ active, text, url }) => ( - <> - - - {active - ? ( - {text} - ) : ( - {text} - ) - } - -) \ No newline at end of file diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index cc2a7d10..7533ca8c 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,9 +1,7 @@ -import * as React from 'react' -import cx from 'classnames' -import { getPathWithNoTrailingSlash } from '../../lib/url' -import { MenuItem } from './MenuItem' +import './styles.css' -const itemUrl = (url: string) => getPathWithNoTrailingSlash(url) +import cx from 'classnames' +import { ActiveLink } from './ActiveLink' export interface IMenuProps { layout: 'desktop' | 'mobile' @@ -12,113 +10,20 @@ export interface IMenuProps { export const Menu: React.FC = props => (
- - {props.items.map((item, index) => (
  • - + + {item.text} +
    • ))}
    diff --git a/src/components/Menu/styles.css b/src/components/Menu/styles.css new file mode 100644 index 00000000..c04d3137 --- /dev/null +++ b/src/components/Menu/styles.css @@ -0,0 +1,52 @@ +.menu { + display: flex; + align-items: flex-start; + + list-style: none; +} + +div.desktop { + flex-direction: row; + flex-wrap: wrap; +} + +div.mobile { + flex-direction: column; +} + +.menuItem { + position: relative; + border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0); +} + +.menuItem.desktop { + padding: 0.3em 0.2em 0; + margin-right: 1em; + + font-size: var(--normal-font-size); +} + +.menuItem.mobile { + padding: 0.3em 0.5em; + margin-bottom: var(--half-margin); + + font-size: 1.25em; + /* color: white; */ + color: var(--color-text-opposite); +} + +.menuItem:last-child { + margin-right: 0; +} + +.menuItem.selected { + font-weight: bold; +} + +.menuItem.mobile.selected { + background-color: var(--color-back-opposite); +} + +.menuItem.desktop.selected { + border-top-color: var(--color-back-opposite); +} From 8a41a895fb79ae550275a71e1d7601207a4e00b3 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 03:40:22 +0300 Subject: [PATCH 02/19] text colors changed --- src/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style.css b/src/style.css index e4b77543..b07f3cac 100644 --- a/src/style.css +++ b/src/style.css @@ -59,9 +59,9 @@ --schedule-row-color: hsl(210, 55%, 90%); /* TEXT COLOR */ - --color-text: #303030; + --color-text: #202020; --color-text-second: #9090a0; - --color-text-opposite: var(--light-color); + --color-text-opposite: #f0f0f0; --color-back-main: white; --color-back-opposite: var(--darker-color); From b07def3eee295bc3ba18949bc54f7211899b9856 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 04:22:19 +0300 Subject: [PATCH 03/19] menu refactoring --- src/components/Menu/MenuItem.tsx | 31 +++++++++++++++++++++++++++++++ src/components/Menu/index.tsx | 28 ++++++++++------------------ 2 files changed, 41 insertions(+), 18 deletions(-) create mode 100644 src/components/Menu/MenuItem.tsx diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx new file mode 100644 index 00000000..774c7aab --- /dev/null +++ b/src/components/Menu/MenuItem.tsx @@ -0,0 +1,31 @@ +import cx from 'classnames' +import { useRouter } from 'next/router' +import { ActiveLink } from './ActiveLink' + +export type MenuItemProps = { + href: string + layout: 'desktop' | 'mobile' +} + +export const MenuItem: React.FC = props => { + const router = useRouter() + const current = router.asPath === props.href + const href = current ? null : props.href + + return ( +
  • + + {props.children} + +
    • + ) +} diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 7533ca8c..f964996b 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,30 +1,22 @@ import './styles.css' import cx from 'classnames' -import { ActiveLink } from './ActiveLink' +import { MenuItem } from './MenuItem' -export interface IMenuProps { +export type MenuProps = { layout: 'desktop' | 'mobile' items: any[] } -export const Menu: React.FC = props => ( -
    +export const Menu: React.FC = props => ( + {props.items.map((item, index) => ( -
  • - - {item.text} - -
    • + {item.text} + ))} -
    + ) From 57b6e249ead691a00733f1284be5032cf3fa6459 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 04:22:26 +0300 Subject: [PATCH 04/19] menu style cleanup --- src/components/Menu/styles.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/Menu/styles.css b/src/components/Menu/styles.css index c04d3137..89bfcd4e 100644 --- a/src/components/Menu/styles.css +++ b/src/components/Menu/styles.css @@ -5,15 +5,6 @@ list-style: none; } -div.desktop { - flex-direction: row; - flex-wrap: wrap; -} - -div.mobile { - flex-direction: column; -} - .menuItem { position: relative; border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0); From e8fb2e817b29d88702fa678b9654543806c15d13 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 04:37:33 +0300 Subject: [PATCH 05/19] menu style update --- src/components/Menu/styles.css | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/src/components/Menu/styles.css b/src/components/Menu/styles.css index 89bfcd4e..be3cb18d 100644 --- a/src/components/Menu/styles.css +++ b/src/components/Menu/styles.css @@ -1,43 +1,41 @@ .menu { display: flex; align-items: flex-start; + flex-wrap: wrap; list-style: none; } .menuItem { position: relative; - border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0); + border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0); } -.menuItem.desktop { - padding: 0.3em 0.2em 0; - margin-right: 1em; - - font-size: var(--normal-font-size); -} +/* MOBILE */ .menuItem.mobile { - padding: 0.3em 0.5em; - margin-bottom: var(--half-margin); + flex-direction: column; font-size: 1.25em; - /* color: white; */ color: var(--color-text-opposite); } -.menuItem:last-child { - margin-right: 0; -} - -.menuItem.selected { - font-weight: bold; -} - .menuItem.mobile.selected { background-color: var(--color-back-opposite); } +/* DESKTOP */ + +.menuItem.desktop { + padding: var(--size-xs) var(--size-s); + margin-bottom: var(--size-s); + margin-right: var(--size-s); +} + +.menuItem.desktop:last-child { + margin-right: 0; +} + .menuItem.desktop.selected { border-top-color: var(--color-back-opposite); } From 1dbbe04d5956bb8e034f94ee7bdadfb7792b017c Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 04:53:22 +0300 Subject: [PATCH 06/19] menu moved to config and context --- pages/[...slug].tsx | 4 -- pages/album/[slug].tsx | 6 -- pages/article/[slug].tsx | 5 -- pages/articles/[slug].tsx | 6 -- pages/collective.tsx | 7 -- pages/document/[slug].tsx | 6 -- pages/documents.tsx | 6 -- pages/gallery.tsx | 6 -- pages/index.tsx | 8 +-- pages/schedule.tsx | 7 -- pages/teacher/[person].tsx | 6 -- src/components/App/index.tsx | 5 +- src/components/Menu/index.tsx | 7 +- src/components/Navigation/index.tsx | 18 ++--- src/config.ts | 38 +++++++++++ src/lib/menu.js | 50 -------------- src/lib/url.js | 15 ---- src/models/menu.js | 102 ---------------------------- src/style.css | 2 +- src/types.ts | 7 ++ 20 files changed, 62 insertions(+), 249 deletions(-) delete mode 100644 src/lib/menu.js delete mode 100644 src/models/menu.js diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx index 2598de86..5b59f97c 100644 --- a/pages/[...slug].tsx +++ b/pages/[...slug].tsx @@ -2,8 +2,6 @@ import Head from 'next/head' import { App } from 'src/components/App' import { tail } from 'lodash' import { Page } from 'src/components/Page' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { Meta } from 'src/components/Meta' import { meta } from 'src/lib/meta' import { createApiUrl, requestGet, wrapInitialProps, IResponseItems } from 'src/next-lib' @@ -16,7 +14,6 @@ function array(value: T | T[]) { const Index = props => ( { return { props: { content: page.data, - pageUrl: slug, title: page.title, meta: meta({ title: page.title, diff --git a/pages/album/[slug].tsx b/pages/album/[slug].tsx index 323b7a7a..0ee6e3d6 100644 --- a/pages/album/[slug].tsx +++ b/pages/album/[slug].tsx @@ -2,13 +2,10 @@ import Head from 'next/head' import { App } from 'src/components/App' import { Article } from 'src/components/Article' import { Html } from 'src/components/Html' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' type Props = { - pageUrl: string data: any //(album) } @@ -21,7 +18,6 @@ const Page: NextPage = props => { return ( @@ -43,7 +39,6 @@ const Page: NextPage = props => { } export const unstable_getStaticProps = async (ctx: any) => { - const pageUrl = '/gallery' // const id = ctx.query.slug const id = ctx.params.slug const data = await requestGet(createApiUrl(`/api/albums/${id}`), null) @@ -55,7 +50,6 @@ export const unstable_getStaticProps = async (ctx: any) => { return { props: { data, - pageUrl, } } } diff --git a/pages/article/[slug].tsx b/pages/article/[slug].tsx index b835acb6..93f8ee02 100644 --- a/pages/article/[slug].tsx +++ b/pages/article/[slug].tsx @@ -3,8 +3,6 @@ import { get } from 'lodash' import { App } from 'src/components/App' import { Article } from 'src/components/Article' import { Html } from 'src/components/Html' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { Meta } from 'src/components/Meta' import { meta } from 'src/lib/meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' @@ -12,7 +10,6 @@ import { NextPage } from 'next' import { IArticle } from 'src/types' type Props = { - pageUrl: string meta: any data: IArticle } @@ -25,7 +22,6 @@ const Page: NextPage = props => { return ( @@ -59,7 +55,6 @@ export const unstable_getStaticProps = async (ctx: any) => { return { props: { data, - pageUrl, meta: meta({ title: data.title, image: image.src, diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index b378122a..cc8dce36 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -2,8 +2,6 @@ import Head from 'next/head' import { range } from 'lodash' import { App } from 'src/components/App' import { ArticleGrid } from 'src/components/ArticleGrid' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' import { Meta } from 'src/components/Meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' @@ -12,7 +10,6 @@ import { NextPage } from 'next' const pageSize = Number(process.env.APP_ARTICLES_PAGE_SIZE) type Props = { - pageUrl: string meta: any title: string data: any //(list of article) @@ -28,7 +25,6 @@ const Page: NextPage = props => { return ( @@ -46,7 +42,6 @@ const Page: NextPage = props => { } export const unstable_getStaticProps = async (ctx: any) => { - const pageUrl = '/' // const page = parseInt(ctx.query.page) const page = parseInt(ctx.params.slug) const res = await requestGet>( @@ -67,7 +62,6 @@ export const unstable_getStaticProps = async (ctx: any) => { data, nextPage, prevPage, - pageUrl, title, meta: meta({ title, diff --git a/pages/collective.tsx b/pages/collective.tsx index 9d944176..95345efa 100644 --- a/pages/collective.tsx +++ b/pages/collective.tsx @@ -3,8 +3,6 @@ import { get } from 'lodash' import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' import { CollectiveImage } from 'src/components/CollectiveImage' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' import { IMeta, IImage } from 'src/types' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' @@ -20,7 +18,6 @@ interface IPerson { } type Props = { - pageUrl: string title: string image: string meta: IMeta @@ -35,7 +32,6 @@ const Page: NextPage = props => { return ( @@ -83,7 +79,6 @@ const Page: NextPage = props => { export const unstable_getStaticProps = async (ctx: NextPageContext) => { // const pageUrl = ctx.req.url - const pageUrl = '/collective' const res = await requestGet>(createApiUrl('/api/persons'), null) const data = res?.items || [] @@ -96,11 +91,9 @@ export const unstable_getStaticProps = async (ctx: NextPageContext) => { props: { data, image, - pageUrl, title, meta: meta({ title, - url: pageUrl, description: 'Преподаватели Шлиссельбургской ДХШ', }) } diff --git a/pages/document/[slug].tsx b/pages/document/[slug].tsx index dc821944..0f044e09 100644 --- a/pages/document/[slug].tsx +++ b/pages/document/[slug].tsx @@ -3,8 +3,6 @@ import Head from 'next/head' import { App } from 'src/components/App' import Document from 'src/components/Document' import { Share } from 'src/components/Share' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' import { Meta } from 'src/components/Meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' @@ -12,7 +10,6 @@ import { NextPage } from 'next' import { IMeta } from 'src/types' type Props = { - pageUrl: string data: any //(file) meta: IMeta } @@ -26,7 +23,6 @@ const Page: NextPage = props => { return ( @@ -40,14 +36,12 @@ const Page: NextPage = props => { } export const unstable_getStaticProps = async (ctx: any) => { - const pageUrl = '/documents' const id = ctx.params.slug const data = await requestGet(createApiUrl(`/api/files/${id}`), {}) return { props: { data, - pageUrl, meta: meta({ // title: file.meta, }) diff --git a/pages/documents.tsx b/pages/documents.tsx index a4d310aa..12c1f8c6 100644 --- a/pages/documents.tsx +++ b/pages/documents.tsx @@ -1,8 +1,6 @@ import Head from 'next/head' import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' import { IDocument } from 'src/types' import { DocumentList } from 'src/components/DocumentList' @@ -94,14 +92,12 @@ function getSorted(documents: IDocument[]): IDocumentCategory[] { interface IProps { collections: IDocumentCategory[] - pageUrl: string title: string meta: any } const Page: NextPage = props => ( @@ -122,7 +118,6 @@ const Page: NextPage = props => ( ) export const unstable_getStaticProps = async (ctx) => { - const pageUrl = '/documents' const res = await requestGet>(createApiUrl('/api/files'), null) const files = res.items const title = 'Документы' @@ -131,7 +126,6 @@ export const unstable_getStaticProps = async (ctx) => { return { props: { collections, - pageUrl, title, meta: meta({ title, diff --git a/pages/gallery.tsx b/pages/gallery.tsx index ab74db8f..df7ac59c 100644 --- a/pages/gallery.tsx +++ b/pages/gallery.tsx @@ -1,8 +1,6 @@ import Head from 'next/head' import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { splitBy } from 'src/lib/array' import { meta } from 'src/lib/meta' import { createApiUrl, requestGet } from 'src/next-lib' @@ -64,14 +62,12 @@ const ACollection = ({ title, albums }) => ( interface IProps { meta: any - pageUrl: string title: string collections: any[] } const Page: NextPage = props => ( @@ -96,7 +92,6 @@ const Page: NextPage = props => ( export const unstable_getStaticProps = async (ctx: any) => { // const pageUrl = ctx.req.url - const pageUrl = '/gallery' const res = await requestGet(createApiUrl(`/api/albums`), null) if (!res) { return null @@ -108,7 +103,6 @@ export const unstable_getStaticProps = async (ctx: any) => { return { props: { collections: [...albumCollections.entries()], - pageUrl, title, meta: meta({ title, diff --git a/pages/index.tsx b/pages/index.tsx index a5eaf48e..c0bf8e06 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,15 +3,12 @@ import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' import { ArticleGrid } from 'src/components/ArticleGrid' import { HudozkaTitle } from 'src/components/HudozkaTitle' -import menuModel from 'src/models/menu' import { meta } from 'src/lib/meta' -import { buildMenu } from 'src/lib/menu' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' import { IArticle } from 'src/types' interface IProps { - pageUrl: string title: string meta: any prevPage: number @@ -21,7 +18,6 @@ interface IProps { const Page: NextPage = props => ( @@ -45,7 +41,6 @@ const Page: NextPage = props => ( ) export const unstable_getStaticProps = async () => { - const pageUrl = '/' const page = 1 const pageSize = process.env.APP_ARTICLES_PAGE_SIZE const res = await requestGet>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null) @@ -63,11 +58,10 @@ export const unstable_getStaticProps = async () => { articles, nextPage, prevPage, - pageUrl, title, meta: meta({ title, - url: pageUrl, + url: '/', }) } } diff --git a/pages/schedule.tsx b/pages/schedule.tsx index 4b676456..42ea5bde 100644 --- a/pages/schedule.tsx +++ b/pages/schedule.tsx @@ -2,20 +2,16 @@ import Head from 'next/head' import { App } from 'src/components/App' import { Schedule } from 'src/components/Schedule' import { Share } from 'src/components/Share' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { createApiUrl, requestGet } from 'src/next-lib' import { NextPage } from 'next' type Props = { - pageUrl: string title: string data: any //(schedule) } const Page: NextPage = props => ( @@ -30,8 +26,6 @@ const Page: NextPage = props => ( ) export const unstable_getStaticProps = async (ctx: any) => { - // const pageUrl = ctx.req.url - const pageUrl = '/schedule' const period = '2016-2017' const semester = 'spring' const data = await requestGet(createApiUrl(`/api/schedule?period=${period}&semester=${semester}`), null) @@ -42,7 +36,6 @@ export const unstable_getStaticProps = async (ctx: any) => { return { props: { data, - pageUrl, title: 'Расписание', } } diff --git a/pages/teacher/[person].tsx b/pages/teacher/[person].tsx index b46f2f9d..87eee949 100644 --- a/pages/teacher/[person].tsx +++ b/pages/teacher/[person].tsx @@ -2,8 +2,6 @@ import Head from 'next/head' import { App } from 'src/components/App' import { Article } from 'src/components/Article' import { Meta } from 'src/components/Meta' -import menuModel from 'src/models/menu' -import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' @@ -11,7 +9,6 @@ import { IMeta } from 'src/types' import { Html } from 'src/components/Html' interface IProps { - pageUrl: string title: string meta: IMeta person: any @@ -26,7 +23,6 @@ const Index: NextPage = props => { return ( @@ -53,7 +49,6 @@ const Index: NextPage = props => { export const unstable_getStaticProps = async (ctx: any) => { console.log('call unstable_getStaticProps', ctx) - const pageUrl = '/collective' // const id = ctx.query.person // const id = ctx.params.person ?? 'va-sarzhin' const id = ctx.params.person //?? 'mg-timasheva' @@ -73,7 +68,6 @@ export const unstable_getStaticProps = async (ctx: any) => { return { props: { - pageUrl, person, title, meta: meta({ diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 977afe91..4fc789ff 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -13,7 +13,6 @@ const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigat }) export interface IAppProps { - menu: any showAuthor: boolean wide?: boolean contentStyle?: React.CSSProperties @@ -27,9 +26,7 @@ export const App: React.FC = ({ wide = false, ...props }) => { - + )} footer={( diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index f964996b..1dfc084a 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -2,20 +2,21 @@ import './styles.css' import cx from 'classnames' import { MenuItem } from './MenuItem' +import { IMenu } from 'src/types' export type MenuProps = { layout: 'desktop' | 'mobile' - items: any[] + items: IMenu[] } export const Menu: React.FC = props => ( {props.items.map((item, index) => ( - {item.text} + {item.name} ))} diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 31c639f0..25780b76 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -1,25 +1,27 @@ -import * as React from 'react' import { MenuToggle } from '../MenuToggle' -import { useScreenType } from '../../hooks/useScreenType' +import { useScreenType } from 'src/hooks/useScreenType' import { Menu } from '../Menu' import { Overlay } from '../Overlay' +import { useState, useCallback, useContext } from 'react' +import { ConfigContext } from 'src/context/ConfigContext' export interface INavigationProps { - items: any[] + style?: React.CSSProperties } export const Navigation: React.FC = props => { const isMobile = useScreenType(['phone', 'tablet']) - const [open, setOpen] = React.useState(false) - const onClick = React.useCallback( + const [open, setOpen] = useState(false) + const onClick = useCallback( () => { setOpen(!open) }, [open] ) + const { menu } = useContext(ConfigContext) return ( -