feat(PortalsProvider): add PortalsProvider

- will be used with ReactDOM.createPortal to render components to elements that are outside their tree hierarchy

components/core/Application.js

@@ -49,6 +49,7 @@ import SidebarEditTags from "~/components/sidebars/SidebarEditTags";
 import ApplicationHeader from "~/components/core/ApplicationHeader";
 import ApplicationLayout from "~/components/core/ApplicationLayout";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+import PortalsProvider from "~/components/core/PortalsProvider";
 import CTATransition from "~/components/core/CTATransition";
 
 import { GlobalModal } from "~/components/system/components/GlobalModal";
@@ -496,6 +497,7 @@ export default class ApplicationPage extends React.Component {
     // }
     return (
       <React.Fragment>
+        <PortalsProvider>
           <ApplicationLayout
             sidebarName={this.state.sidebar}
             page={page}
@@ -503,6 +505,7 @@ export default class ApplicationPage extends React.Component {
             header={headerElement}
             sidebar={sidebarElement}
             onDismissSidebar={this._handleDismissSidebar}
+            fileLoading={this.state.fileLoading}
             isMobile={this.state.isMobile}
             isMac={this.props.isMac}
             viewer={this.state.viewer}
@@ -521,6 +524,7 @@ export default class ApplicationPage extends React.Component {
               scene
             )}
           </ApplicationLayout>
+        </PortalsProvider>
         <GlobalModal />
         <SearchModal
           viewer={this.state.viewer}

components/core/PortalsProvider.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+/**
+ * NOTE(amine): Component used to assign Portals in client side
+ */
+
+const LayoutContext = React.createContext({});
+
+export default function PortalsProvider({ children }) {
+  const filterNavbar = React.useState();
+  const contextValue = React.useMemo(() => ({ filterNavbar }), [filterNavbar]);
+
+  return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>;
+}
+
+export const usePortals = () => React.useContext(LayoutContext);