community setting using media queries

Author: lazycipher

src/user/dashboard/Community/CommunitySetting.js

@@ -54,29 +54,27 @@ class CommunitySetting 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>
+            </div>
+            <Accordion className="community_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_content">
             {view === "profile" ? <OrgProfile /> : null}

src/user/dashboard/Community/community.scss

@@ -29,7 +29,9 @@
 }
 
 
-
+.community_accordion {
+  display: none;
+}
 
 .main_navigation::-webkit-scrollbar {
   display: none;
@@ -45,6 +47,12 @@
       width: 100%;
       max-width: 100%;
       margin: 10px auto;
+      .community_accordion {
+        display: block;
+      }
+      .left_nav_container {
+        display: none;
+      }
     }
     .right_section_content {
       width: 100%;