use sidebar settings on desktop mode

packages/app/src/App.jsx

@@ -333,20 +333,20 @@ class App extends React.Component {
 			return window.app.ModalController.open((props) => <Creator {...props} />)
 		},
 		openSettings: (goTo) => {
-			const controller = window.isMobile ? app.DrawerController : app.SidedrawerController
+			if (window.isMobile) {
-
+				return app.DrawerController.open("Settings", Settings, {
-			if (!controller) {
+					props: {
-				console.error("No controller found")
+						width: "fit-content",
-				return false
+						goTo,
+					},
+					allowMultiples: false,
+					escClosable: true,
+				})
 			}
 
-			controller.open("Settings", Settings, {
+			return app.SidebarController.setCustomRender(Settings, {
-				props: {
+				title: "Settings",
-					width: "fit-content",
+				icon: "Settings"
-					goTo,
-				},
-				allowMultiples: false,
-				escClosable: true,
 			})
 		},
 		openNavigationMenu: () => window.app.DrawerController.open("navigation", Navigation),
@@ -464,11 +464,11 @@ class App extends React.Component {
 		}, () => {
 			App.publicMethods.openCreator()
 		})
-		
+
 		app.eventBus.emit("app.initialization.start")
-		
+
 		await this.initialization()
-		
+
 		app.eventBus.emit("app.initialization.finish")
 
 		Utils.handleOpenDevTools()

packages/app/src/components/Settings/index.jsx

@@ -426,13 +426,18 @@ export default class SettingsMenu extends React.PureComponent {
 	}
 
 	render() {
-		return <div className="settings_wrapper">
+		return <div className={
+			classnames("settings_wrapper", {
+				["mobile"]: window.isMobile,
+			})
+		}>
 			<div className="settings">
 				<antd.Tabs
 					activeKey={this.state.activeKey}
-					centered
-					destroyInactiveTabPane
 					onTabClick={this.handlePageTransition}
+					tabPosition={window.isMobile ? "top" : "left"}
+					centered={window.isMobile}
+					destroyInactiveTabPane
 				>
 					{this.generateSettingsTabs()}
 				</antd.Tabs>

packages/app/src/components/Settings/index.less

@@ -1,6 +1,4 @@
 .settings_wrapper {
-	min-width: 30vw;
-
 	.settings {
 		display: flex;
 		flex-direction: column;
@@ -9,6 +7,20 @@
 			margin-bottom: 25px;
 		}
 
+		&.mobile {
+			.ant-tabs-nav-list {
+				width: 100%;
+				justify-content: space-evenly;
+			}
+		}
+
+		.ant-tabs-nav-list {
+			.ant-tabs-tab {
+				padding: 5px 0 !important;
+				margin-right: 10px !important;
+			}
+		}
+
 		.group {
 			display: flex;
 			flex-direction: column;
@@ -133,10 +145,5 @@
 				}
 			}
 		}
-
-		.ant-tabs-nav-list {
-			width: 100%;
-			justify-content: space-evenly;
-		}
 	}
 }