collapsible feature added

src/user/_sidebarCommon.scss

@@ -0,0 +1,84 @@
+.sidebar {
+  background: #f5f5f5;
+  flex-grow: 1;
+  border-right: solid 1px #dfe9f1;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow-y: scroll;
+  transition: 0.3s ease-in-out;
+  width: 0;
+  overflow-x: hidden;
+}
+.sidebar-open {
+  width: 13vw;
+  background: #f5f5f5;
+  flex-grow: 1;
+  border-right: solid 1px #dfe9f1;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  transition: 0.3s ease-in-out;
+}
+
+.sidebar-toggle {
+  position: sticky;
+  top: 10px;
+  left: 0;
+  bottom: 0;
+  transition: 0.3s ease-in-out;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  background: #007bff;
+  border-radius: 50%;
+  border: none;
+  padding: 5px;
+  &:focus {
+    outline: none;
+  }
+  div {
+    width: 1.5rem;
+    height: 0.25rem;
+    background: white;
+    border-radius: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .sidebar-toggle {
+    display: none;
+  }
+  .dashboard,
+  .profile,
+  .pinned-posts {
+    .news {
+      margin-left: 13vw;
+    }
+  }
+  .settings-content {
+    margin-left: 13vw;
+  }
+  .org_settings_view {
+    margin-left: 13vw;
+  }
+  .right_view {
+    margin-left: 13vw;
+  }
+  .integrations-content {
+    margin-left: 13vw;
+  }
+  .dashboard__content {
+    margin-left: 13vw;
+  }
+  .editor__content {
+    margin-left: 13vw;
+  }
+}

src/user/dashboard/Community/CommunitySetting.js

@@ -20,8 +20,9 @@ class CommunitySetting extends Component {
         settings: false,
         permission: false,
         authentication: false,
-        maintenance: false
-      }
+        maintenance: false,
+      },
+      sideBarOpen: true,
     };
   }
   componentDidMount() {
@@ -35,13 +36,32 @@ class CommunitySetting extends Component {
    this.setState({ option: { [name]: true }})
    this.setState({ view: name })
   }
+
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { view } = this.state;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="overall_container">
-        <div className="main_navigation">
+        <div className={sideBarClass}>
           <Navigation orgSettings={this.state.org} user={this.props.user} />
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="org_settings_view">
           <div className="main_section">
             <div className="left_nav">
@@ -60,7 +80,7 @@ class CommunitySetting extends Component {
               {view === "authentication" ? <OrgAuth /> : null}
               {view === "maintenance" ? <OrgMaintenance /> : null}
               {view === "activity" ? (
-                <Users 
+                <Users
                   handleOption={{ changeOption: this.changeOption.bind(this) }}
                 />) : null }
             </div>
@@ -77,4 +97,4 @@ const mapStateToProps = (state) => ({
   user: state.user,
   org: state.org
 })
-export default connect(mapStateToProps)(CommunitySetting);
+export default connect(mapStateToProps)(CommunitySetting);

src/user/dashboard/Community/community.scss

@@ -1,6 +1,8 @@
+@import "../../sidebarCommon";
+
 .overall_container {
   display: flex;
-  .main_navigation {
+  /*.main_navigation {
     background: #f5f5f5;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
@@ -9,9 +11,10 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   .org_settings_view {
-    margin-left: 13vw;
+    //margin-left: 13vw;
     margin-top: 35px;
     .main_section {
       display: flex;

src/user/dashboard/dashboard.js

@@ -8,7 +8,7 @@ import NewsFeed from "./news-feed/news-feed";
 import notifyUsersLoading from "../../placeholderLoading/notifyUsersLoading/notifyUsersLoading";
 import portfolioLoading from "../../placeholderLoading/portfolioLoading/portfolioLoading";
 import newsFeedLoading from "../../placeholderLoading/newsFeedLoading/newsFeedLoading";
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
 import { getAllEvents } from "../../actions/eventAction";
 import { getAllPosts } from "../../actions/postAction";
 import { getAllProjects } from "../../actions/projectAction";
@@ -22,7 +22,8 @@ class Dashboard extends Component {
       allPosts: [],
       allProjects: [],
       allEvents: [],
-      allMix: []
+      allMix: [],
+      sideBarOpen: true,
     };
   }
 
@@ -31,14 +32,14 @@ class Dashboard extends Component {
       this.props.getAllEvents();
     })
     setTimeout(() => {
-      this.props.getAllPosts()
+      this.props.getAllPosts();
     })
     setTimeout(() => {
-      this.props.getAllProjects()
-    })
+      this.props.getAllProjects();
+    });
     setTimeout(() => {
       this.setState({ isLoading: false });
-    }, 1000);
+    }, 1000)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -54,14 +55,31 @@ class Dashboard extends Component {
       console.log('updated dashboard ', this.state)
     })
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { allMix, allEvents, allProjects, allPosts } = this.state
-    return ( 
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
+    return (
       <div className="dashboard">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation dashboard={this.state.dashboard}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news">
           {this.state.isLoading ? (
             notifyUsersLoading()
@@ -81,7 +99,7 @@ class Dashboard extends Component {
   }
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   auth: state.auth,
   error: state.error,
@@ -90,4 +108,4 @@ const mapStateToProps = (state) => ({
   project: state.project
 })
 
-export default connect(mapStateToProps, { getAllEvents, getAllPosts, getAllProjects })(Dashboard);
+export default connect(mapStateToProps, { getAllEvents, getAllPosts, getAllProjects })(Dashboard);

src/user/dashboard/dashboard.scss

@@ -1,9 +1,11 @@
+@import "../sidebarCommon";
+
 .dashboard {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .navigation {
+  /*.navigation {
     background: #f5f5f5;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
@@ -12,9 +14,10 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   .news {
-    margin-left: 13vw;
+    //margin-left: 13vw;
     flex-grow: 4;
     .notify-user {
       display: flex;

src/user/dashboard/insights/Insight.js

@@ -12,7 +12,8 @@ class Insight extends Component {
     this.state = {
       insight: true,
       view: 'org',
-      userId: ''
+      userId: '',
+      sideBarOpen: true,
     };
   }
 
@@ -26,9 +27,13 @@ class Insight extends Component {
       console.log('State is ', this.state);
     })
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { view, userId } = this.state;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     let communityInfo = (
       <div className="right_view_container">
         <CommunityStats view={view} onTabChange={this.onTabChange.bind(this)} />
@@ -41,9 +46,22 @@ class Insight extends Component {
     );
     return (
       <div className="insight_main_container">
-        <div className="insight_left_nav">
+        <div className={sideBarClass}>
           <Navigation insight={this.state.insight} />
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="insight_content">
           {view === "org" ? communityInfo : memberInfo}
         </div>
@@ -52,7 +70,7 @@ class Insight extends Component {
   }
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   user: state.user
 })

src/user/dashboard/insights/insight.scss

@@ -1,17 +1,20 @@
+@import "../../sidebarCommon";
+
 .insight_main_container {
   display: flex;
-  .insight_left_nav {
+  /*.insight_left_nav {
     border-right: solid 1px #dfe9f1;
     position: fixed;
     top: 0px;
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
     background: #f5f5f5;
-  }
+  }*/
+
   .right_view_container {
     .right_view {
-      margin-left: 13vw;
+      //margin-left: 13vw;
       margin-top: 10px;
       .right_view_header {
         font-family: Qanelas;

src/user/dashboard/navigation/navigation.scss

@@ -1,5 +1,5 @@
 .main-navigation {
-  width: 13vw;
+  //width: 13vw;
   .list-group {
     background-color: #f5f5f5;
     .list-group-item {