user account settings using media queries

Author: lazycipher

src/user/dashboard/settings/SettingContent.js

@@ -104,19 +104,17 @@ class SettingContent extends Component {
     return (
       <div className="settings__right__container">
         <div className="settings__left__nav">
-          <Desktop>
+          <div className="settings__left__nav__container">
             <SettingSidebar />
-          </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">
-                  <SettingSidebar />
-                </Accordion.Collapse>
-            </Accordion>
-          </Mobile>
+          </div>
+          <Accordion className="settings__left__nav__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">
+                <SettingSidebar />
+              </Accordion.Collapse>
+          </Accordion>
         </div>
         <div className="settings__right__content">
           <div className="settings__header">

src/user/dashboard/settings/styles/SettingSidebar.scss

@@ -3,6 +3,12 @@
  .settings__left__nav {
   margin-top: 38px;
   margin-left: 10px;
+  .settings__left__nav__container {
+    display: block;
+  }
+  .settings__left__nav__accordion {
+    display: none;
+  }
  }
  .settings__right__content {
   width: 80vw;
@@ -48,6 +54,12 @@
      flex: 1;
      margin: 0;
      padding: 0;
+     .settings__left__nav__container {
+      display: none;
+    }
+    .settings__left__nav__accordion {
+      display: block;
+    }
    }
    .settings__right__content {
     flex: 3;