From 4c4193fa090c15c9dd4f25df8c83713bc54971df Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Thu, 3 Dec 2020 22:31:11 -0500
Subject: [PATCH] Progress on DMs responsiveness

Progress on DMs responsiveness
---
 .../messages/components/chat_settings_sidebar.js     |  9 ++++++++-
 app/javascript/gabsocial/layouts/messages_layout.js  | 12 +++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/javascript/gabsocial/features/messages/components/chat_settings_sidebar.js b/app/javascript/gabsocial/features/messages/components/chat_settings_sidebar.js
index bf1995ef..70e24934 100644
--- a/app/javascript/gabsocial/features/messages/components/chat_settings_sidebar.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_settings_sidebar.js
@@ -7,12 +7,15 @@ import List from '../../../components/list'
 class ChatSettingsSidebar extends React.PureComponent {
 
   render() {
+    const { isXS } = this.props
+
     return (
       <ResponsiveClassesComponent
         classNames={[_s.d, _s.w340PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
         classNamesSmall={[_s.d, _s.w300PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
+        classNamesXS={[_s.d, _s.w100PC,  _s.bgPrimary].join(' ')}
       >
-        <ChatSettingsHeader />
+        { !isXS && <ChatSettingsHeader /> }
         <List
           items={[
             {
@@ -39,4 +42,8 @@ class ChatSettingsSidebar extends React.PureComponent {
 
 }
 
+ChatSettingsSidebar.propTypes = {
+  isXS: PropTypes.bool,
+}
+
 export default ChatSettingsSidebar
\ No newline at end of file
diff --git a/app/javascript/gabsocial/layouts/messages_layout.js b/app/javascript/gabsocial/layouts/messages_layout.js
index 7bd0c73b..58fd3ea9 100644
--- a/app/javascript/gabsocial/layouts/messages_layout.js
+++ b/app/javascript/gabsocial/layouts/messages_layout.js
@@ -62,7 +62,7 @@ class MessagesLayout extends React.PureComponent {
     const isXS = width <= BREAKPOINT_EXTRA_SMALL
 
     if (isXS) {
-      if (!selectedChatConversationId) {
+      if (!selectedChatConversationId && !isSettings) {
         return (
           <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
             <DefaultNavigationBar
@@ -71,6 +71,10 @@ class MessagesLayout extends React.PureComponent {
                 {
                   icon: 'add',
                   to: '/messages/new',
+                },
+                {
+                  icon: 'cog',
+                  to: '/messages/settings',
                 }
               ]}
               title={title}
@@ -79,7 +83,7 @@ class MessagesLayout extends React.PureComponent {
               <div className={[_s.d, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
                 {
                   (isSettings || currentConversationIsRequest) &&
-                  <ChatSettingsSidebar />
+                  <ChatSettingsSidebar isXS />
                 }
                 {
                   !isSettings && !currentConversationIsRequest &&
@@ -90,7 +94,7 @@ class MessagesLayout extends React.PureComponent {
             </main> 
           </div>
         )
-      } else {
+      } else if (selectedChatConversationId && !isSettings) {
         return (
           <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
             <ChatNavigationBar chatConversationId={selectedChatConversationId} />
@@ -101,6 +105,8 @@ class MessagesLayout extends React.PureComponent {
             { !currentConversationIsRequest && <ChatMessageComposeForm chatConversationId={selectedChatConversationId} isXS={isXS} /> }
           </div>
         )
+      } else {
+        //settings
       }
     }