improve layouts

packages/app/.config.js

@@ -14,6 +14,7 @@ const aliases = {
     components: path.join(__dirname, "src/components"),
     models: path.join(__dirname, "src/models"),
     utils: path.join(__dirname, "src/utils"),
+    layouts: path.join(__dirname, "src/layouts"),
 }
 
 module.exports = (config = {}) => {

packages/app/src/components/index.js

@@ -1,3 +1,5 @@
+import * as Layout from "./Layout"
+
 // COMPLEX COMPONENTS
 export { default as FormGenerator } from "./FormGenerator"
 export { default as Settings } from "./Settings"
@@ -42,3 +44,5 @@ export { default as FollowersList } from "./FollowersList"
 export * as AdminTools from "./AdminTools"
 export * as AboutApp from "./AboutApp"
 export * as Window from "./RenderWindow"
+
+export { Layout }

packages/app/src/components/layout/index.js

@@ -0,0 +1,5 @@
+export { default as BottomBar } from "./bottomBar"
+export { default as Header } from "./header"
+export { default as Drawer } from "./drawer"
+export { default as Sidebar } from "./sidebar"
+export { default as Sidedrawer } from "./sidedrawer"

packages/app/src/layout.jsx

@@ -1,46 +1,12 @@
 import React from "react"
-import classnames from "classnames"
 import * as antd from "antd"
 import progressBar from "nprogress"
 
-import Sidebar from "./sidebar"
-import Drawer from "./drawer"
-import Sidedrawer from "./sidedrawer"
-import BottomBar from "./bottomBar"
-
 import config from "config"
 
 import routes from "schemas/routes"
 
-const LayoutRenders = {
+import Layouts from "layouts"
-	mobile: (props) => {
-		return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}>
-			<antd.Layout className="content_layout">
-				<antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
-					<div id="transitionLayer" className="fade-transverse-active">
-						{React.cloneElement(props.children, props)}
-					</div>
-				</antd.Layout.Content>
-			</antd.Layout>
-			<BottomBar user={props.user} />
-			<Drawer />
-		</antd.Layout>
-	},
-	default: (props) => {
-		return <antd.Layout className="app_layout" style={{ height: "100%" }}>
-			<Drawer />
-			<Sidebar user={props.user} />
-			<Sidedrawer />
-			<antd.Layout className="content_layout">
-				<antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
-					<div id="transitionLayer" className="fade-transverse-active">
-						{React.cloneElement(props.children, props)}
-					</div>
-				</antd.Layout.Content>
-			</antd.Layout>
-		</antd.Layout>
-	}
-}
 
 export default class Layout extends React.Component {
 	progressBar = progressBar.configure({ parent: "html", showSpinner: false })
@@ -163,7 +129,11 @@ export default class Layout extends React.Component {
 			...this.state,
 		}
 
-		const Layout = LayoutRenders[layoutType]
+		const Layout = Layouts[layoutType]
+
+		if (!Layout) {
+			return app.eventBus.emit("runtime.crash", new Error(`Layout type [${layoutType}] not found`))
+		}
 
 		return <Layout {...layoutComponentProps}>
 			{this.state.renderLock ? InitializationComponent : this.props.children}

packages/app/src/layouts/default/index.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import classnames from "classnames"
+import * as antd from "antd"
+
+import { Sidebar, Drawer, Sidedrawer } from "components/layout"
+
+export default (props) => {
+    return <antd.Layout className="app_layout" style={{ height: "100%" }}>
+        <Drawer />
+        <Sidebar user={props.user} />
+        <Sidedrawer />
+        <antd.Layout className="content_layout">
+            <antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
+                <div id="transitionLayer" className="fade-transverse-active">
+                    {React.cloneElement(props.children, props)}
+                </div>
+            </antd.Layout.Content>
+        </antd.Layout>
+    </antd.Layout>
+}

packages/app/src/layouts/index.js

@@ -0,0 +1,9 @@
+import Default from "./default"
+import Mobile from "./mobile"
+import Login from "./login"
+
+export default {
+    default: Default,
+    mobile: Mobile,
+    login: Login,
+}

packages/app/src/layouts/login/index.jsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+export default (props) => {
+    return <div>
+        {props.children}
+    </div>
+}

packages/app/src/layouts/mobile/index.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import classnames from "classnames"
+import * as antd from "antd"
+
+import { Drawer, BottomBar } from "components/layout"
+
+export default (props) => {
+    return <antd.Layout className={classnames("app_layout", ["mobile"])} style={{ height: "100%" }}>
+        <antd.Layout className="content_layout">
+            <antd.Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
+                <div id="transitionLayer" className="fade-transverse-active">
+                    {React.cloneElement(props.children, props)}
+                </div>
+            </antd.Layout.Content>
+        </antd.Layout>
+        <BottomBar user={props.user} />
+        <Drawer />
+    </antd.Layout>
+}