From a350001484316370f2fbef97d10251d29046c90d Mon Sep 17 00:00:00 2001
From: Nikita Karpukhin <nikita.karpukhin@scout24.com>
Date: Mon, 31 Oct 2022 15:29:37 +0100
Subject: [PATCH] Updated README.md

Signed-off-by: Nikita Karpukhin <nikita.karpukhin@scout24.com>
---
 plugins/user-settings/README.md | 40 +++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/plugins/user-settings/README.md b/plugins/user-settings/README.md
index ce07d76257..0912e34b0a 100644
--- a/plugins/user-settings/README.md
+++ b/plugins/user-settings/README.md
@@ -93,3 +93,43 @@ make sure you use a similar component structure as the other tabs.
 You can take a look at
 [the example extra tab](https://github.com/backstage/backstage/blob/master/packages/app/src/components/advancedSettings/AdvancedSettings.tsx)
 we have created in Backstage's demo app.
+
+To change the layout altogether, create a custom page in `packages/app/src/components/user-settings/SettingsPage.tsx`:
+```typescript jsx
+import React from 'react';
+import {
+  SettingsLayout,
+  UserSettingsGeneral,
+} from '@backstage/plugin-user-settings';
+import { AdvancedSettings } from './advancedSettings';
+
+export const SettingsPage = () => {
+  return (
+    <SettingsLayout>
+      <SettingsLayout.Route path="general" title="General">
+        <UserSettingsGeneral />
+      </SettingsLayout.Route>
+      <SettingsLayout.Route path="advanced" title="Advanced">
+        <AdvancedSettings />
+      </SettingsLayout.Route>
+    </SettingsLayout>
+  );
+};
+
+export const settingsPage = <SettingsPage />;
+```
+
+Now register the new settings page in `packages/app/src/App.tsx`:
+
+```typescript jsx
++ import { settingsPage } from './components/settings/settingsPage';
+
+const routes = (
+  <FlatRoutes>
+-    <Route path="/settings" element={<UserSettingsPage />} />
++    <Route path="/settings" element={<UserSettingsPage />}>
++      {settingsPage}
++    </Route>
+  </FlatRoutes>
+);
+```