settings: improve menu rendering especially in collapsed mode

Author: novoselt

src/packages/frontend/account/account-page.tsx

@@ -89,6 +89,20 @@ import { UpgradesPage } from "./upgrades/upgrades-page";
 
 export const ACCOUNT_SETTINGS_ICON_NAME: IconName = "settings";
 
+const ACCOUNT_MENU_INLINE_CSS = `
+.account-menu-inline-collapsed .ant-menu-item,
+.account-menu-inline-collapsed .ant-menu-submenu-title {
+  padding-inline: 0px;
+  text-align: center;
+}
+.account-menu-inline-collapsed .ant-menu-submenu-title {
+  padding-right: 20px;
+}
+.account-menu-inline-collapsed .ant-menu-submenu-arrow {
+  right: 5px;
+}
+`;
+
 // Type for valid menu keys
 type MenuKey =
   | "settings"
@@ -494,25 +508,26 @@ export const AccountPage: React.FC = () => {
     });
   }
 
+  function visibleLabel(label) {
+    return hidden ? <span>{label.props.children[0]}</span> : label;
+  }
+
   // Process tabs to handle nested children for sub-tabs
   const children = {};
   const titles = {}; // Always store full labels for renderTitle()
   for (const tab of tabs) {
     if (tab.type == "divider") {
       continue;
     }
+    const originalLabel = tab.label;
+    titles[tab.key] = originalLabel;
+    tab.label = visibleLabel(originalLabel);
+
     if (Array.isArray(tab.children)) {
       // Handle nested submenus generically (preferences, billing, etc.)
       const subTabs = tab.children;
       tab.children = subTabs.map((subTab) => {
-        // When collapsed, show only the icon; otherwise show full label.
-        const label = hidden ? (
-          <span style={{ paddingLeft: "5px" }}>
-            {subTab.label.props.children[0]}
-          </span>
-        ) : (
-          subTab.label
-        );
+        const label = visibleLabel(subTab.label);
         return {
           key: subTab.key,
           label,
@@ -524,34 +539,8 @@ export const AccountPage: React.FC = () => {
         children[subTab.key] = subTab.children;
         titles[subTab.key] = subTab.label; // Always store original full label
       }
-    } else if (tab.key === "settings" || tab.key === "profile") {
-      // Handle settings and profile as top-level pages
-      // Store original full label for renderTitle()
-      const originalLabel = tab.label;
-      // Extract just the icon (first child) from the span when hidden
-      tab.label = hidden ? (
-        <span style={{ paddingLeft: "5px" }}>
-          {tab.label.props.children[0]}
-        </span>
-      ) : (
-        tab.label
-      );
-      children[tab.key] = tab.children;
-      titles[tab.key] = originalLabel; // Store original label
-      delete tab.children;
     } else {
-      // Store original full label for renderTitle()
-      const originalLabel = tab.label;
-      // Extract just the icon (first child) from the span when hidden
-      tab.label = hidden ? (
-        <span style={{ paddingLeft: "5px" }}>
-          {tab.label.props.children[0]}
-        </span>
-      ) : (
-        tab.label
-      );
       children[tab.key] = tab.children;
-      titles[tab.key] = originalLabel; // Store original label
       delete tab.children;
     }
   }
@@ -612,6 +601,7 @@ export const AccountPage: React.FC = () => {
           }}
         >
           <Menu
+            className={hidden ? "account-menu-inline-collapsed" : undefined}
             openKeys={openKeys}
             onOpenChange={handleOpenChange}
             mode="inline"
@@ -624,7 +614,7 @@ export const AccountPage: React.FC = () => {
             }
             inlineIndent={hidden ? 0 : 24}
             style={{
-              width: hidden ? 50 : 200,
+              width: hidden ? 50 : 220,
               background: "#00000005",
               flex: "1 1 auto",
               overflowY: "auto",
@@ -677,6 +667,7 @@ export const AccountPage: React.FC = () => {
 
   return (
     <div className="smc-vfill">
+      <style>{ACCOUNT_MENU_INLINE_CSS}</style>
       {is_logged_in && !get_api_key ? (
         render_logged_in_view()
       ) : (