menu moved to config and context

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<IAppProps> = ({ wide = false, ...props }) => {
             <Wrapper
                 header={(
                     <Header>
-                        <Navigation
-                            items={props.menu.items}
-                        />
+                        <Navigation />
                     </Header>
                 )}
                 footer={(

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<MenuProps> = props => (
     <menu className={cx('menu', props.layout)}>
         {props.items.map((item, index) => (
             <MenuItem key={index}
-                href={item.url}
+                href={item.href}
                 layout={props.layout}
             >
-                {item.text}
+                {item.name}
             </MenuItem>
         ))}
     </menu>

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<INavigationProps> = 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 (
-        <nav>
+        <nav style={props.style}>
             <style jsx>{`
                 nav {
                     display: flex;
@@ -44,7 +46,7 @@ export const Navigation: React.FC<INavigationProps> = props => {
             ) : (
                     <Menu
                         layout={'desktop'}
-                        items={props.items}
+                        items={menu}
                     />
                 )}
 
@@ -58,7 +60,7 @@ export const Navigation: React.FC<INavigationProps> = props => {
                 }}>
                     <Menu
                         layout={'mobile'}
-                        items={props.items}
+                        items={menu}
                     />
                 </div>
             </Overlay>