Merge pull request #96 from femioladeji/fix-responsiveness-issue

Fix responsiveness issue
femioladeji · Aug 18, 2020 · 88d3fdc · 88d3fdc
2 parents 56ff197 + b411718
commit 88d3fdc
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 17 deletions.
diff --git a/docs/app.css b/docs/app.css
@@ -40,9 +40,11 @@ h3 {
   width: 75%;
 }
 
-.each-fade h2 {
+.each-fade p {
   width: 25%;
+  font-size: 1em;
   display: flex;
+  text-align: center;
   justify-content: center;
   align-items: center;
   margin: 0;

diff --git a/docs/views/codeStrings.js b/docs/views/codeStrings.js
@@ -141,9 +141,11 @@ export const fadeEffectCSS = `
   width: 75%;
 }
 
-.each-fade h2 {
+.each-fade p {
   width: 25%;
+  font-size: 1em;
   display: flex;
+  text-align: center;
   justify-content: center;
   align-items: center;
   margin: 0;
@@ -386,15 +388,15 @@ const PauseHoverExample = () => {
         <Slide {...fadeProperties}>
           <div className="each-fade">
             <img src={images[0]} />
-            <h2>First Slide</h2>
+            <p>First Slide</p>
           </div>
           <div className="each-fade">
-            <h2>Second Slide</h2>
+            <p>Second Slide</p>
             <img src={images[1]} />
           </div>
           <div className="each-fade">
             <img src={images[2]} />
-            <h2>Third Slide</h2>
+            <p>Third Slide</p>
           </div>
         </Slide>
       </div>

diff --git a/docs/views/components/NavBar.js b/docs/views/components/NavBar.js
@@ -1,7 +1,14 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
 
 const Navbar = ({ toggleSidebar, isOpen }) => {
+  let location = useLocation();
+    useEffect(() => {
+      if (window.screen.width <= 768) {
+        toggleSidebar()
+      }
+    }, [location]);
+
   return (
     <div className="navbar">
       <div className="navbar-div">

diff --git a/docs/views/components/SideBar.js b/docs/views/components/SideBar.js
@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 const Sidebar = ({ isOpen }) => {
   const [dropDowns, setDropDowns] = useState(false);
 
-  const setMargin = isOpen ? "0" : "-50%";
+  const setMargin = isOpen ? "0" : "-60%";
 
   return (
     <div className="sidebar" style={{ marginLeft: setMargin }}>

diff --git a/docs/views/pages/Examples/Methods.js b/docs/views/pages/Examples/Methods.js
@@ -10,7 +10,7 @@ const MethodsExample = () => {
   const style = {
     textAlign: "center",
     background: "teal",
-    padding: "200px",
+    padding: "200px 0",
     fontSize: "30px"
   }
 

diff --git a/docs/views/pages/Examples/PauseHover.js b/docs/views/pages/Examples/PauseHover.js
@@ -28,15 +28,15 @@ const PauseOnHoverExample = () => {
         <Slide {...fadeProperties}>
           <div className="each-fade">
             <img src={fadeImages[0]} />
-            <h2>First Slide</h2>
+            <p>First Slide</p>
           </div>
           <div className="each-fade">
-            <h2>Second Slide</h2>
+            <p>Second Slide</p>
             <img src={fadeImages[1]} />
           </div>
           <div className="each-fade">
             <img src={fadeImages[2]} />
-            <h2>Third Slide</h2>
+            <p>Third Slide</p>
           </div>
         </Slide>
       </div>

diff --git a/docs/views/styles.css b/docs/views/styles.css
@@ -5,7 +5,7 @@ body {
 }
 
 .app-container {
-  margin-top: calc(80px + 20px);
+  margin-top: calc(80px);
   margin-left: 13%;
   background: #fff;
   padding: 10px 3%;
@@ -57,14 +57,15 @@ li:hover {
 .sidebar {
   display: block;
   position: fixed;
+  overflow-y: auto;
+  /* overflow-x: hidden; */
   top: 80px;
   left: 0;
   height: 100vh;
   width: 13%;
   margin-left: 0;
   z-index: 200;
   background: #f4f4f4;
-  padding-top: 20px;
 }
 
 .sidebar-items {
@@ -90,6 +91,7 @@ li:hover {
   font-size: 20px;
   cursor: pointer;
   width: 100%;
+  box-sizing: border-box;
   color: #000;
 }
 
@@ -226,10 +228,10 @@ tr:nth-child(odd) {
   }
 
   .sidebar {
-    width: 45%;
+    width: 60%;
     top: 80px;
-    margin-left: -50%;
-    height: 150vh;
+    margin-left: -60%;
+    height: calc(100vh - 80px);
     transition: 500ms;
   }
 

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -27,6 +27,7 @@
   height: 10px;
   border-color: #000;
   border-style: solid;
+  box-sizing: border-box;
   transform: rotate(45deg);
 }