added optional breadcrumbs; page layout refactoring; other chages

src/components/App/Header.tsx

@@ -1,22 +0,0 @@
-export const Header: React.FC = props => (
-    <header>
-        <style jsx>{`
-            .navigation {
-                width: 100%;
-                background-color: white;
-            }
-
-            .navigation__body {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-        `}</style>
-
-        <div className="navigation">
-            <div className="navigation__body">
-                {props.children}
-            </div>
-        </div>
-    </header>
-)

src/components/App/index.tsx

@@ -1,12 +1,13 @@
 import dynamic from 'next/dynamic'
-import cx from 'classnames'
 import Comments from '../Comments'
-import { useReducedMotion } from 'src/hooks/useReducedMotion'
 import { Wrapper } from '../Wrapper'
-import { Header } from './Header'
 import { ConfigContext } from 'src/context/ConfigContext'
 import config from 'src/config'
 import { Footer } from '../Footer'
+import { Content } from '../Content'
+import { Block } from '../Block'
+import { Breadcrumbs } from '../Breadcrumbs'
+import { IBreadcumbsPart } from 'src/types'
 
 const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
     ssr: false,
@@ -16,18 +17,31 @@ export interface IAppProps {
     showAuthor: boolean
     wide?: boolean
     contentStyle?: React.CSSProperties
+    breadcrumbs?: IBreadcumbsPart[]
 }
 
-export const App: React.FC<IAppProps> = ({ wide = false, ...props }) => {
-    const motionDisabled = useReducedMotion()
+export const App: React.FC<IAppProps> = props => {
+    const wide = props.wide ?? false
+    const blockStyle = {
+        alignItems: 'center'
+    }
 
     return (
         <ConfigContext.Provider value={config}>
             <Wrapper
                 header={(
-                    <Header>
+                    <header>
                         <Navigation />
-                    </Header>
+                        {!props.breadcrumbs ? null : (
+                            <Block direction={'vertical'} style={blockStyle}>
+                                <Content wide={wide}>
+                                    <Breadcrumbs
+                                        path={props.breadcrumbs}
+                                    />
+                                </Content>
+                            </Block>
+                        )}
+                    </header>
                 )}
                 footer={(
                     <Footer
@@ -35,15 +49,11 @@ export const App: React.FC<IAppProps> = ({ wide = false, ...props }) => {
                     />
                 )}
             >
-                <div
-                    className={cx('content', {
-                        'reduced-motion': motionDisabled,
-                        'content_wide': wide,
-                    })}
-                    style={props.contentStyle}
-                >
-                    {props.children}
-                </div>
+                <Block direction={'vertical'} style={blockStyle}>
+                    <Content wide={wide} style={props.contentStyle}>
+                        {props.children}
+                    </Content>
+                </Block>
 
                 {/* <Comments /> */}
             </Wrapper>