added extra menu items

packages/app/src/pages/settings/index.jsx

@@ -1,10 +1,11 @@
-
 import React from "react"
 import * as antd from "antd"
 import { SliderPicker } from "react-color"
 import { Translation } from "react-i18next"
 import classnames from "classnames"
 
+import AuthModel from "models/auth"
+
 import { Icons, createIconRender } from "components/Icons"
 
 import getSettingsList from "schemas/settings"
@@ -15,6 +16,27 @@ const SettingsList = await getSettingsList()
 
 import "./index.less"
 
+const extraMenuItems = [
+    {
+        id: "logout",
+        label: "Logout",
+        icon: "MdOutlineLogout",
+        danger: true
+    }
+]
+
+const menuEvents = {
+    "logout": () => {
+        antd.Modal.confirm({
+            title: "Logout",
+            content: "Are you sure you want to logout?",
+            onOk: () => {
+                AuthModel.logout()
+            },
+        })
+    }
+}
+
 const ItemTypes = {
     Button: antd.Button,
     Switch: antd.Switch,
@@ -430,6 +452,15 @@ const generateMenuItems = () => {
         groups[tab.group].push(tab)
     })
 
+    if (typeof groups["bottom"] === undefined) {
+        groups["bottom"] = []
+    }
+
+    // add extra menu items
+    extraMenuItems.forEach((item) => {
+        groups["bottom"].push(item)
+    })
+
     let groupsKeys = Object.keys(groups)
 
     //  make "bottom" group last
@@ -466,6 +497,8 @@ const generateMenuItems = () => {
                     {createIconRender(item.icon ?? "Settings")}
                     {item.label}
                 </>,
+                type: "item",
+                danger: item.danger,
             }
         })
 
@@ -498,6 +531,10 @@ export default () => {
     const [menuItems, setMenuItems] = React.useState([])
 
     const onChangeTab = (event) => {
+        if (typeof menuEvents[event.key] === "function") {
+            return menuEvents[event.key]()
+        }
+
         setActiveKey(event.key)
     }
 

packages/app/src/pages/settings/index.less

@@ -18,6 +18,16 @@
         width: 30%;
 
         padding: 0 30px;
+
+        .ant-menu-item-danger {
+            .ant-menu-title-content {
+                svg {
+                    color: #ff4d4f;
+                }
+
+                color: #ff4d4f;
+            }
+        }
     }
 
     .settings_content {