diff --git a/pages/next.jsx b/pages/next.jsx index c5ac892b..ff2ed9f2 100644 --- a/pages/next.jsx +++ b/pages/next.jsx @@ -1,5 +1,6 @@ import React from 'react' import Head from 'next/head' + import { App } from '../src/components/App' import { Page } from '../src/components/Page' import menuModel from '../src/models/menu' @@ -13,19 +14,18 @@ const Index = (props) => ( menu={buildMenu(props.pageUrl, menuModel)} showAuthor={true} menuPadding={true} + layout={'thin'} > {props.title} -
- - {props.content} - -
+ + {props.content} + ) diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 9f5f8a2d..6993b4e9 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,7 +1,10 @@ import * as React from 'react' import dynamic from 'next/dynamic' +import cx from 'classnames' + import { Footer } from '../Footer' import Comments from '../Comments' +import { useReducedMotion } from '../../hooks/useReducedMotion' const Header = dynamic(() => import('./Header'), { ssr: false, @@ -9,31 +12,46 @@ const Header = dynamic(() => import('./Header'), { import '../../style/style.scss' -export const App = ({ children, menu, showAuthor, menuPadding }) => ( -
-
-
-
-
+export interface IAppProps { + menu: any + showAuthor: boolean + menuPadding: boolean + layout?: 'full' | 'wide' | 'thin' +} + +export const App: React.FC = props => { + const layout = props.layout ? props.layout : 'full' + const motionDisabled = useReducedMotion() + + return ( +
+
+
+
+
+
-
-
+
-
-
- {children} -
+
+
+ {props.children} +
- -
+ +
-
-) +