Responsive design for Donut

package.json

@@ -43,8 +43,8 @@
     "react-mde": "^10.2.1",
     "react-moment": "^0.9.7",
     "react-redux": "^7.2.0",
-    "react-responsive": "^8.0.3",
     "react-router-dom": "^5.1.2",
+    "react-router-hash-link": "^2.2.2",
     "react-scripts": "^3.4.0",
     "react-shapes": "^0.1.0",
     "react-share": "^4.2.1",

src/user/Activity/Activity.js

@@ -16,6 +16,7 @@ import OrgAuth from '../dashboard/Community/components/OrgAuth';
 import OrgMaintenance from '../dashboard/Community/components/OrgMaintenance';
 import Users from './Users';
 import ActivityTimeline from './ActivityTimeline';
+import { Accordion, Button } from 'react-bootstrap'; 
 
 class Activity extends Component {
   constructor(props) {
@@ -29,7 +30,8 @@ class Activity extends Component {
         authentication: false,
         maintenance: false,
         activity: true,
-        details: true
+        details: true,
+        sidebarOpen: false
       },
     };
   }
@@ -49,41 +51,58 @@ class Activity extends Component {
 
   render() {
     const { view } = this.state
-
+    const toggleSidebar = () => {
+      this.setState((prevState) => {
+        return {
+          sidebarOpen: !prevState.sidebarOpen
+        }
+      })
+    }
     return (
-      <div className="overall_container">
-        <div className="main_navigation">
-          <Navigation orgSettings={this.state.org} user={this.props.user} />
-        </div>
-        <div className="org_settings_view">
-          <div className="main_section">
-            <div className="left_nav">
-              <p className="header_text">Community Settings</p>
-              <LeftNav
-                data={{
-                  option: this.state.option,
-                  changeOption: this.changeOption.bind(this),
-                }}
-              />
-            </div>
-            <div className="right_section">
-              {view === "profile" ? <OrgProfile /> : null}
-              {view === "permission" ? <OrgPermission /> : null}
-              {view === "settings" ? <OrgSettings /> : null}
-              {view === "authentication" ? <OrgAuth /> : null}
-              {view === "maintenance" ? <OrgMaintenance /> : null}
-              {view === "activity" ? (
-                <Users
-                  handleOption={{ changeOption: this.changeOption.bind(this) }}
-                />
-              ) : null}
-              {view === "details" ? (
-                <ActivityTimeline />
-              ) : null}
+      <>
+        <Navigation orgSettings={this.state.org} user={this.props.user} />
+            <div className="main_section">
+              <div className="left_nav">
+                <p className="header_text">Community Settings</p>
+                <div className="left_nav_container">
+                  <LeftNav
+                      data={{
+                        option: this.state.option,
+                        changeOption: this.changeOption.bind(this),
+                      }}
+                    />
+                </div>
+                <Accordion className="activity_accordion">
+                    <Accordion.Toggle onClick={() => toggleSidebar()} variant="outline-secondary" size="sm" as={Button} eventKey="0">
+                      {this.state.sidebarOpen?"Close Menu":"Setting Menu"}
+                    </Accordion.Toggle>
+                    <Accordion.Collapse eventKey="0">
+                      <LeftNav
+                        data={{
+                          option: this.state.option,
+                          changeOption: this.changeOption.bind(this),
+                        }}
+                      />
+                    </Accordion.Collapse>
+                </Accordion>
+              </div>
+              <div className="right_section">
+                {view === "profile" ? <OrgProfile /> : null}
+                {view === "permission" ? <OrgPermission /> : null}
+                {view === "settings" ? <OrgSettings /> : null}
+                {view === "authentication" ? <OrgAuth /> : null}
+                {view === "maintenance" ? <OrgMaintenance /> : null}
+                {view === "activity" ? (
+                  <Users
+                    handleOption={{ changeOption: this.changeOption.bind(this) }}
+                  />
+                ) : null}
+                {view === "details" ? (
+                  <ActivityTimeline />
+                ) : null}
+              </div>
             </div>
-          </div>
-        </div>
-      </div>
+      </>
     );
   }
 }
@@ -94,4 +113,4 @@ const mapStateToProps = (state) => ({
   post: state.post
 })
 
-export default connect(mapStateToProps, { getEventById, getPostById })(withRouter(Activity));
+export default connect(mapStateToProps, { getEventById, getPostById })(withRouter(Activity));

src/user/Activity/ActivityTimeline.js

@@ -89,7 +89,7 @@ export default function ActivityTimeline() {
               showSizeChanger
               onShowSizeChange={onShowSizeChange}
               defaultCurrent={1}
-              total={500}
+              total={activity.length || 0}
               onChange={handlePagination}
             />
           </div>

src/user/Activity/Users.js

@@ -81,7 +81,7 @@ class Users extends Component {
               showSizeChanger
               onShowSizeChange={this.onShowSizeChange}
               defaultCurrent={1}
-              total={500}
+              total={users.length || 0}
               onChange={this.handlePagination}
             />
           </div>
@@ -96,4 +96,4 @@ const mapStateToProps = (state) => ({
   insight: state.insight
 })
 
-export default connect(mapStateToProps, { getMembers })(withRouter(Users));
+export default connect(mapStateToProps, { getMembers })(withRouter(Users));

src/user/Activity/activity.scss

@@ -1,24 +1,9 @@
-.overall_container{
-  display: flex;
-  .main_navigation {
-    left: -1px;
-    top: -1px;
-    height: 100vh;
-    border: 1px solid #CCCCCC;
-    box-sizing: border-box;
-  }
-  .user_activity_view {
-    margin-top: 35px;
-    margin-left: 15vw;
-     margin-left: auto;
-     margin-right: auto;
-    .main_section {
+ .main_section {
+      margin: 35px auto auto 15vw;
       display: flex;
       flex-direction: row;
       justify-items: center;
       flex-wrap: wrap;
-      margin-top: -1.3em;
-      margin-left: -2vw;
       .left_nav {
         max-width: 20%;
         height: 50%;
@@ -74,45 +59,67 @@
         }
       }
     }
-  }
-}
 // mobile 
+.activity_accordion {
+  display: none;
+}
+
 @media screen and (max-width: 768px) {
-  .overall_container{
-    .org_settings_view {
-     .main_section {
-       .left_nav {
-         .navigation {
-           .list-group {
-             .link {
-               display: none;
-             }
-             .header_text {
-               font-size: 10px;
-             }
-           }
-         }
-       }
-     }
+.main_section {
+  width: 100%;
+  margin: 0;
+  padding: 2.5vh 2.5vw;
+  flex-direction: column;
+  .left_nav {
+    width: 100%;
+    max-width: 100%;
+    margin: 10px auto;
+    .activity_accordion {
+      display: block;
+    }
+    .left_nav_container {
+      display: none;
+    }
+    .navigation {
+      .list-group {
+        .link {
+          display: none;
+        }
+        .header_text {
+          font-size: 10px;
+        }
+      }
     }
   }
 }
+}
 
 // tablet 
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .overall_container {
-    .org_settings_view {
-      .main_section {
-        .left_nav {
-          .navigation {
-            .list-group {
-              .link {
-                font-size: 5px;
-              }
-            }
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+
+  .main_section {
+    width: 100%;
+    margin: 0;
+    padding: 2.5vh 2.5vw;
+    flex-direction: column;
+    .left_nav {
+      width: 100%;
+      max-width: 100%;
+      margin: 10px auto;
+      .activity_accordion {
+        display: block;
+      }
+      .left_nav_container {
+        display: none;
+      }
+      .navigation {
+        .list-group {
+          .link {
+            font-size: 5px;
           }
         }
       }
     }
   }
-}
+}
+