Merge pull request #4542 from thornbill/nav-components

Refactor backdrop and header to separate components

src/App.tsx

@@ -1,6 +1,8 @@
 import { History } from '@remix-run/router';
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import AppHeader from './components/AppHeader';
+import Backdrop from './components/Backdrop';
 import { HistoryRouter } from './components/HistoryRouter';
 import { ApiProvider } from './hooks/useApi';
 import { AppRoutes, ExperimentalAppRoutes } from './routes';
@@ -8,31 +10,16 @@ import { AppRoutes, ExperimentalAppRoutes } from './routes';
 const App = ({ history }: { history: History }) => {
     const layoutMode = localStorage.getItem('layout');
 
-    useEffect(() => {
-        Promise.all([
-            // Initialize the UI components after first render
-            import('./scripts/libraryMenu'),
-            import('./scripts/autoBackdrops')
-        ]);
-    }, []);
-
     return (
         <ApiProvider>
             <HistoryRouter history={history}>
-                <div className='backdropContainer' />
-                <div className='backgroundContainer' />
-
-                <div className='mainDrawer hide'>
-                    <div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
-                </div>
-                <div className='skinHeader focuscontainer-x' />
+                <Backdrop />
+                <AppHeader />
 
                 <div className='mainAnimatedPages skinBody' />
                 <div className='skinBody'>
                     {layoutMode === 'experimental' ? <ExperimentalAppRoutes /> : <AppRoutes /> }
                 </div>
-
-                <div className='mainDrawerHandle' />
             </HistoryRouter>
         </ApiProvider>
     );

src/components/AppHeader.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+
+const AppHeader = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/libraryMenu');
+    }, []);
+
+    return (
+        <>
+            <div className='mainDrawer hide'>
+                <div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
+            </div>
+            <div className='skinHeader focuscontainer-x' />
+            <div className='mainDrawerHandle' />
+        </>
+    );
+};
+
+export default AppHeader;

src/components/Backdrop.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+
+const Backdrop = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/autoBackdrops');
+    }, []);
+
+    return (
+        <>
+            <div className='backdropContainer' />
+            <div className='backgroundContainer' />
+        </>
+    );
+};
+
+export default Backdrop;