activity using media queries

Author: lazycipher

src/user/Activity/Activity.js

@@ -65,29 +65,27 @@ class Activity extends Component {
             <div className="main_section">
               <div className="left_nav">
                 <p className="header_text">Community Settings</p>
-                <Desktop>
+                <div className="left_nav_container">
                   <LeftNav
-                    data={{
-                      option: this.state.option,
-                      changeOption: this.changeOption.bind(this),
-                    }}
-                  />
-                </Desktop>
-                <Mobile>
-                  <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>
-                </Mobile>
+                      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}

src/user/Activity/activity.scss

@@ -60,6 +60,10 @@
       }
     }
 // mobile 
+.activity_accordion {
+  display: none;
+}
+
 @media screen and (max-width: 768px) {
 .main_section {
   width: 100%;
@@ -70,6 +74,12 @@
     width: 100%;
     max-width: 100%;
     margin: 10px auto;
+    .activity_accordion {
+      display: block;
+    }
+    .left_nav_container {
+      display: none;
+    }
     .navigation {
       .list-group {
         .link {
@@ -96,6 +106,12 @@
       width: 100%;
       max-width: 100%;
       margin: 10px auto;
+      .activity_accordion {
+        display: block;
+      }
+      .left_nav_container {
+        display: none;
+      }
       .navigation {
         .list-group {
           .link {