Open settings on sidebar user profile click

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/popup-window/PopupWindow.scss

@@ -70,9 +70,6 @@
 
   & .context-menu__item > button {
     border-radius: var(--bo-radius);
-    & .text {
-      color: var(--tc-surface-normal);
-    }
     & .ic-raw {
       @include dir.side(margin, 0, var(--sp-tight));
     }

src/app/organisms/navigation/SideBar.jsx

@@ -4,7 +4,6 @@ import './SideBar.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
-import logout from '../../../client/action/logout';
 import {
   selectTab, openInviteList, openSearch, openSettings,
 } from '../../../client/action/navigation';
@@ -13,14 +12,11 @@ import { abbreviateNumber } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
-import ContextMenu, { MenuItem, MenuHeader, MenuBorder } from '../../atoms/context-menu/ContextMenu';
 
 import HomeIC from '../../../../public/res/ic/outlined/home.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
-import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
-import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 
 function ProfileAvatarMenu() {
   const mx = initMatrix.matrixClient;
@@ -48,31 +44,12 @@ function ProfileAvatarMenu() {
   }, []);
 
   return (
-    <ContextMenu
+    <SidebarAvatar
-      content={(hideMenu) => (
+      onClick={openSettings}
-        <>
+      tooltip={profile.displayName}
-          <MenuHeader>{mx.getUserId()}</MenuHeader>
+      imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
-          {/* <MenuItem iconSrc={UserIC} onClick={() => ''}>Profile</MenuItem> */}
+      bgColor={colorMXID(mx.getUserId())}
-          {/* <MenuItem iconSrc={BellIC} onClick={() => ''}>Notification settings</MenuItem> */}
+      text={profile.displayName}
-          <MenuItem
-            iconSrc={SettingsIC}
-            onClick={() => { hideMenu(); openSettings(); }}
-          >
-            Settings
-          </MenuItem>
-          <MenuBorder />
-          <MenuItem iconSrc={PowerIC} variant="danger" onClick={logout}>Logout</MenuItem>
-        </>
-      )}
-      render={(toggleMenu) => (
-        <SidebarAvatar
-          onClick={toggleMenu}
-          tooltip={profile.displayName}
-          imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
-          bgColor={colorMXID(mx.getUserId())}
-          text={profile.displayName}
-        />
-      )}
     />
   );
 }

src/app/organisms/settings/Settings.jsx

@@ -6,6 +6,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
+import logout from '../../../client/action/logout';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
@@ -24,6 +25,7 @@ import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+import PowerIC from '../../../../public/res/ic/outlined/power.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
@@ -177,6 +179,10 @@ function Settings({ isOpen, onRequestClose }) {
   }];
   const [selectedSection, setSelectedSection] = useState(settingSections[0]);
 
+  const handleLogout = () => {
+    if (confirm('Confirm logout')) logout();
+  };
+
   return (
     <PopupWindow
       className="settings-window"
@@ -184,18 +190,29 @@ function Settings({ isOpen, onRequestClose }) {
       onRequestClose={onRequestClose}
       title="Settings"
       contentTitle={selectedSection.name}
-      drawer={
+      drawer={(
-        settingSections.map((section) => (
+        <>
+          {
+            settingSections.map((section) => (
+              <PWContentSelector
+                key={section.name}
+                selected={selectedSection.name === section.name}
+                onClick={() => setSelectedSection(section)}
+                iconSrc={section.iconSrc}
+              >
+                {section.name}
+              </PWContentSelector>
+            ))
+          }
           <PWContentSelector
-            key={section.name}
+            variant="danger"
-            selected={selectedSection.name === section.name}
+            onClick={handleLogout}
-            onClick={() => setSelectedSection(section)}
+            iconSrc={PowerIC}
-            iconSrc={section.iconSrc}
           >
-            {section.name}
+            Logout
           </PWContentSelector>
-        ))
+        </>
-      }
+      )}
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
     >
       {selectedSection.render()}

src/app/organisms/settings/Settings.scss

@@ -1,6 +1,16 @@
+@use '../../partials/flex';
 @use '../../partials/dir';
 
 .settings-window {
+  & .pw__drawer__content {
+    @extend .cp-fx__column;
+    min-height: 100%;
+    padding-bottom: var(--sp-extra-tight);
+
+    & > .pw-content-selector:last-child {
+      margin-top: auto;
+    }
+  }
   & .pw__content-container {
     min-height: 100%;
   }