From de63b5e778d6533e088da64f37c3a2600f7a69cf Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 18 Feb 2020 12:29:21 +0300
Subject: [PATCH] App.Header refactoring

---
 src/components/App/Header.tsx        | 26 ++++++++++++++++++++------
 src/components/App/index.tsx         | 18 +++++++-----------
 src/style/components/navigation.scss | 10 ----------
 src/style/style.scss                 |  1 -
 4 files changed, 27 insertions(+), 28 deletions(-)
 delete mode 100644 src/style/components/navigation.scss

diff --git a/src/components/App/Header.tsx b/src/components/App/Header.tsx
index 3dc82dc7..db9ce493 100644
--- a/src/components/App/Header.tsx
+++ b/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
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 3bcf5c8b..ba10f674 100644
--- a/src/components/App/index.tsx
+++ b/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
diff --git a/src/style/components/navigation.scss b/src/style/components/navigation.scss
deleted file mode 100644
index 89fca208..00000000
--- a/src/style/components/navigation.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.navigation {
-    width: 100%;
-    background-color: white;
-}
-
-.navigation__body {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
diff --git a/src/style/style.scss b/src/style/style.scss
index 199258b8..c849000d 100644
--- a/src/style/style.scss
+++ b/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";