Sidebar bugs fixed (#106)

* responsive pages

* removed comments

* fixed bugs regarding css

* responsive dashboard

* sidebar bugs fixed

frontend/components/Dashboard/Dashboard.jsx

@@ -15,39 +15,13 @@ function toggleSidebar1(e) {
   sidebar.classList.toggle('toggle_sidebar')
 }
 
+function changePageContent(e){
+    // change contents of the page according to the option selected by user.
+
+    toggleSidebar1(e);
+}
+
 function Sidebar1() {
-    return (<div className="sidebar">
-        <ul>
-            <div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
-            <div className="profile">
-                <div className="profile-image"><img
-                    src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
-                </div>
-                <p className="name">Hayat</p>
-                <p className="profession">Product Designer</p>
-            </div>
-            <div className="creatButton">
-                <button className={""}>Create Link</button>
-            </div>
-            <li className="nav-buttons">
-                <div className="nav-item">
-                    <button>
-                        <Link href="./dashboard">Overview</Link>
-                    </button>
-                </div>
-                <div className="nav-item">
-                    <button>
-                        <Link href="./myLinks">My Links</Link>
-                    </button>
-                </div>
-                <div className="nav-item">
-                    <button>
-                        Extras
-                    </button>
-                </div>
-            </li>
-        </ul>
-    </div>)
   return (
     <div className="sidebar">
       <CloseIcon className="close_icon" onClick={toggleSidebar1} />
@@ -64,23 +38,22 @@ function Sidebar1() {
           <p className="profession">Product Designer</p>
         </div>
         <div className="creatButton">
-          <button className={''}>Create Link</button>
+          <button>Create Link</button>
         </div>
         <li className="nav-buttons">
           <div className="nav-item">
-            <button>Overview</button>
+            <button onClick={changePageContent}>Overview</button>
           </div>
           <div className="nav-item">
-            <button>My Links</button>
+            <button onClick={changePageContent}>My Links</button>
           </div>
           <div className="nav-item">
-            <button>Extras</button>
+            <button onClick={changePageContent}>Extras</button>
           </div>
         </li>
       </ul>
     </div>
   )
-main
 }
 
 function Sidebar2() {
@@ -201,6 +174,7 @@ function Graph() {
           </div>
           <div className="title">Total Views</div>
         </div>
+
       </div>
     </div>
   )

frontend/components/Dashboard/Dashboard.style.js

@@ -2,17 +2,18 @@ import styled from 'styled-components'
 
 export default styled.div`
   display: flex;
-  position: relative;
   height: 100vh;
   @media (max-width: 1100px) {
     display: block;
   }
+
   /* this shows sidebar when menu icon is clicked */
   .toggle_sidebar {
     @media (max-width: 1100px) {
       left: 0px !important;
     }
   }
+
   .sidebar {
     flex-shrink: 0;
     padding-top: 60px;
@@ -21,15 +22,18 @@ export default styled.div`
     height: 100%;
     color: white !important;
     transition: all 0.25s;
+    
     @media (max-width: 1100px) {
       left: -300px;
       position: absolute;
       z-index: 100;
     }
+    
     /* for small screens */
     @media (max-width: 300px) {
       width: 100vw;
     }
+    
     .brand-name {
       margin-top: 40px;
       padding-left: 20px;
@@ -77,9 +81,11 @@ export default styled.div`
         border-radius: 5px;
       }
     }
+
     .close_icon {
       display: none;
       font-size: 2rem;
+
       @media (max-width: 1100px) {
         display: inline-block;
         position: relative;
@@ -110,11 +116,13 @@ export default styled.div`
       }
     }
   }
+
   .main {
     padding-top: 90px;
     flex: 1;
     display: flex;
     flex-direction: column;
+
     .row2 {
       flex: 1;
       display: flex;
@@ -122,12 +130,15 @@ export default styled.div`
       align-items: center;
       padding: 20px 40px;
       justify-content: space-evenly;
+
       @media (max-width: 1100px) {
         margin: 30px 0;
       }
+
       @media (max-width: 800px) {
         flex-direction: column;
       }
+
       .graph {
         border-radius: 10px;
         border: 3px solid #e1e1e1;
@@ -135,9 +146,11 @@ export default styled.div`
         padding: 15px;
         width: 60%;
         max-width: 700px;
+
         @media (max-width: 1100px) {
           height: 500px;
         }
+
         @media (max-width: 800px) {
           width: clamp(200px, 500px, 90vw);
         }
@@ -149,10 +162,12 @@ export default styled.div`
         padding: 15px;
         width: 30%;
         min-width: 250px;
+
         @media (max-width: 800px) {
           margin: 20px 0;
           width: clamp(200px, 500px, 90vw);
         }
+
         .version {
           display: flex;
           margin-bottom: 10px;
@@ -180,16 +195,19 @@ export default styled.div`
       }
     }
   }
+
   .sidebar2 {
     text-align: center;
     margin-top: 10px;
     position: relative;
+    
     .hamburger_icon {
       position: absolute;
       top: 0;
       left: 1rem;
       display: none;
       font-size: 3rem;
+
       @media (max-width: 1100px) {
         display: block;
       }
@@ -204,11 +222,13 @@ export default styled.div`
       align-items: center;
       justify-content: space-evenly;
       overflow-x: auto;
+      
       @media (max-width: 800px) {
         flex-direction: column;
       }
     }
   }
+  
   .column {
     flex: 30%;
     height: 250px;
@@ -217,4 +237,4 @@ export default styled.div`
     margin-bottom: 10px;
     list-style-type: none;
   }
-`
+`

frontend/components/HomeSection/HomeSection.jsx

@@ -123,6 +123,7 @@ function HomeSection(props) {
           </div>
         </motion.span>
         <motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>
+
           <input
             className={styles.search}
             placeholder="Enter the url to be minified......"
@@ -143,6 +144,7 @@ function HomeSection(props) {
             MINIFY
           </Button>
         </motion.div>
+
         <div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
           <motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
             Need more advanced features? |{' '}

frontend/styles/HomeSection.module.css

@@ -55,7 +55,7 @@
     width: 90vw;
     font-size: 1.2rem;
   }
-
+  
   .showUrl {
     width: 90vw;
   }
@@ -73,4 +73,4 @@
     width: 90vw;
     font-size: 1rem;
   }
-}
+}

frontend/yarn.lock

@@ -100,6 +100,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+
 "@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
   version "7.17.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
@@ -174,6 +175,7 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+
 "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
@@ -520,6 +522,7 @@
   dependencies:
     "@types/react" "*"
 
+
 "@types/react@*", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
   version "17.0.38"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz"
@@ -534,6 +537,7 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+
 "@types/warning@^3.0.0":
   version "3.0.0"
   resolved "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz"
@@ -598,6 +602,7 @@ babel-plugin-macros@^2.6.1:
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.16.0"
     "@babel/helper-module-imports" "^7.16.0"
+
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.11"
 
@@ -1056,6 +1061,7 @@ next@12.0.9:
     "@next/swc-win32-ia32-msvc" "12.0.9"
     "@next/swc-win32-x64-msvc" "12.0.9"
 
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz"