Refactor app layouts and common components

src/components/AppHeader.tsx

@@ -1,19 +1,29 @@
-import React, { useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 
-const AppHeader = () => {
+interface AppHeaderParams {
+    isHidden?: boolean
+}
+
+const AppHeader: FC<AppHeaderParams> = ({
+    isHidden = false
+}) => {
     useEffect(() => {
         // Initialize the UI components after first render
         import('../scripts/libraryMenu');
     }, []);
 
     return (
-        <>
+        /**
+         * NOTE: These components are not used with the new layouts, but legacy views interact with the elements
+         * directly so they need to be present in the DOM. We use display: none to hide them and prevent errors.
+         */
+        <div style={isHidden ? { display: 'none' } : undefined}>
             <div className='mainDrawer hide'>
                 <div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
             </div>
             <div className='skinHeader focuscontainer-x' />
             <div className='mainDrawerHandle' />
-        </>
+        </div>
     );
 };