App.Header refactoring

src/components/App/Header.tsx

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

src/components/App/index.tsx

@@ -4,8 +4,8 @@ import { Footer } from '../Footer'
 import Comments from '../Comments'
 import { useReducedMotion } from 'src/hooks/useReducedMotion'
 import { Wrapper } from '../Wrapper'
-
-const Header = dynamic(() => import('./Header'), {
+import { Header } from './Header'
+const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
     ssr: false,
 })
 
@@ -22,15 +22,11 @@ export const App: React.FC<IAppProps> = props => {
     return (
         <Wrapper
             header={(
-                <header>
-                    <div className="navigation">
-                        <div className="navigation__body">
-                            <Header
-                                menuItems={props.menu.items}
-                            />
-                        </div>
-                    </div>
-                </header>
+                <Header>
+                    <Navigation
+                        items={props.menu.items}
+                    />
+                </Header>
             )}
             footer={(
                 <Footer

src/style/components/navigation.scss

@@ -1,10 +0,0 @@
-.navigation {
-    width: 100%;
-    background-color: white;
-}
-
-.navigation__body {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}

src/style/style.scss

@@ -3,7 +3,6 @@
 @import "components/document";
 @import "components/document-row";
 @import "components/documents-container";
-@import "components/navigation";
 @import "components/schedule-table";
 @import "components/footer-links";
 @import "components/Article";