added sub-sections in settings

public/res/ic/outlined/info.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
+		S16.4,20,12,20z"/>
+	<g>
+		<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 		"/>
+		<circle cx="12" cy="8" r="1"/>
+	</g>
+</g>
+</svg>

src/app/organisms/settings/Settings.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './Settings.scss';
 
@@ -9,20 +9,16 @@ import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 
+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 CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
-function Settings({ isOpen, onRequestClose }) {
+function AppearanceSection() {
   return (
-    <PopupWindow
-      className="settings-window"
-      isOpen={isOpen}
-      onRequestClose={onRequestClose}
-      title="Settings"
-      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
-    >
     <div className="settings-content">
       <SettingTile
         title="Theme"
@@ -39,13 +35,70 @@ function Settings({ isOpen, onRequestClose }) {
           />
         )}
       />
-        <div style={{ flex: '1' }} />
+    </div>
+  );
+}
+
+function SecuritySection() {
+  return <div className="settings-content" />;
+}
+
+function AboutSection() {
+  return (
+    <div className="settings-content">
       <Text className="settings__about" variant="b1">
         <a href="https://cinny.in/#about" target="_blank" rel="noreferrer">About</a>
       </Text>
       <Text className="settings__about">Version: 1.0.0</Text>
       <Text className="settings__about">{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text>
     </div>
+  );
+}
+
+function Settings({ isOpen, onRequestClose }) {
+  const settingSections = [{
+    name: 'Appearance',
+    iconSrc: SunIC,
+    render() {
+      return <AppearanceSection />;
+    },
+  }, {
+    name: 'Security & Privacy',
+    iconSrc: LockIC,
+    render() {
+      return <SecuritySection />;
+    },
+  }, {
+    name: 'Help & About',
+    iconSrc: InfoIC,
+    render() {
+      return <AboutSection />;
+    },
+  }];
+  const [selectedSection, setSelectedSection] = useState(settingSections[0]);
+
+  return (
+    <PopupWindow
+      className="settings-window"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      title="Settings"
+      contentTitle={selectedSection.name}
+      drawer={
+        settingSections.map((section) => (
+          <PWContentSelector
+            key={section.name}
+            selected={selectedSection.name === section.name}
+            onClick={() => setSelectedSection(section)}
+            iconSrc={section.iconSrc}
+          >
+            {section.name}
+          </PWContentSelector>
+        ))
+      }
+      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+    >
+      {selectedSection.render()}
     </PopupWindow>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -11,10 +11,6 @@
     margin-left: var(--sp-extra-tight);
     margin-right: var(--sp-normal);
   }
-
-  display: flex;
-  flex-direction: column;
-  height: 100%;
 }
 
 .settings__about {