From a66205c7d32c1ebf31df24ddc49c8fd0387c95fc Mon Sep 17 00:00:00 2001
From: Mohamed AZOUAOUI <azouaoui.med@gmail.com>
Date: Mon, 1 Jun 2020 14:25:29 +0100
Subject: [PATCH] update & improve demo

---
 demo/src/Aside.js        |  3 ++-
 demo/src/Main.js         | 53 ++++++++++++++++++++++++++++------------
 demo/src/styles/App.scss | 19 +++++++++++---
 3 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/demo/src/Aside.js b/demo/src/Aside.js
index ca03a7b..e6e7030 100644
--- a/demo/src/Aside.js
+++ b/demo/src/Aside.js
@@ -15,7 +15,7 @@ import sidebarBg from './assets/bg1.jpg';
 const Aside = ({ image, collapsed, rtl }) => {
   const intl = useIntl();
   return (
-    <aside>
+    <aside className={`${collapsed ? 'collapsed' : ''}`}>
       <ProSidebar image={image ? sidebarBg : false} rtl={rtl} collapsed={collapsed}>
         <SidebarHeader>
           <div
@@ -85,6 +85,7 @@ const Aside = ({ image, collapsed, rtl }) => {
               href="https://github.com/azouaoui-med/react-pro-sidebar"
               target="_blank"
               className="sidebar-btn"
+              rel="noopener noreferrer"
             >
               <FaGithub />
               <span> {intl.formatMessage({ id: 'viewSource' })}</span>
diff --git a/demo/src/Main.js b/demo/src/Main.js
index e916818..b469222 100644
--- a/demo/src/Main.js
+++ b/demo/src/Main.js
@@ -24,20 +24,28 @@ const Main = ({
           <img width={80} src={reactLogo} alt="react logo" /> {intl.formatMessage({ id: 'title' })}
         </h1>
         <p>{intl.formatMessage({ id: 'description' })}</p>
-        <iframe
-          src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=react-pro-sidebar&type=star&count=true&size=small"
-          frameBorder="0"
-          scrolling="0"
-          width="85px"
-          height="30px"
-        ></iframe>
-        <iframe
-          src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=react-pro-sidebar&type=fork&count=true&size=small"
-          frameBorder="0"
-          scrolling="0"
-          width="100px"
-          height="30px"
-        ></iframe>
+        <div className="social-bagdes">
+          <a
+            href="https://github.com/azouaoui-med/react-pro-sidebar"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              alt="GitHub stars"
+              src="https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social"
+            />
+          </a>
+          <a
+            href="https://github.com/azouaoui-med/react-pro-sidebar"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              alt="GitHub forks"
+              src="https://img.shields.io/github/forks/azouaoui-med/react-pro-sidebar?style=social"
+            />
+          </a>
+        </div>
       </header>
       <div className="block ">
         <Switch
@@ -76,10 +84,25 @@ const Main = ({
       <footer>
         <small>
           © 2020 made with <FaHeart style={{ color: 'red' }} /> by -{' '}
-          <a rel="noopener noreferrer" target="_blank" href="https://azouaoui.netlify.com">
+          <a target="_blank" rel="noopener noreferrer" href="https://azouaoui.netlify.com">
             Mohamed Azouaoui
           </a>
         </small>
+        <br />
+        <div className="social-bagdes">
+          <a href="https://github.com/azouaoui-med" target="_blank" rel="noopener noreferrer">
+            <img
+              alt="GitHub followers"
+              src="https://img.shields.io/github/followers/azouaoui-med?label=github&style=social"
+            />
+          </a>
+          <a href="https://twitter.com/azouaoui_med" target="_blank" rel="noopener noreferrer">
+            <img
+              alt="Twitter Follow"
+              src="https://img.shields.io/twitter/follow/azouaoui_med?label=twitter&style=social"
+            />
+          </a>
+        </div>
       </footer>
     </main>
   );
diff --git a/demo/src/styles/App.scss b/demo/src/styles/App.scss
index 5434515..1760506 100644
--- a/demo/src/styles/App.scss
+++ b/demo/src/styles/App.scss
@@ -8,7 +8,7 @@ $highlight-color: #d8d8d8;
 $icon-bg-color: rgba(255, 255, 255, 0.05);
 $icon-size: 35px;
 
-@import '../node_modules/react-pro-sidebar/dist/scss/styles.scss';
+@import '~react-pro-sidebar/dist/scss/styles.scss';
 body {
   margin: 0;
   height: 100vh;
@@ -118,6 +118,12 @@ body {
       }
     }
   }
+  .social-bagdes {
+    margin-top: 10px;
+    img {
+      margin: 5px;
+    }
+  }
 
   .block {
     display: flex;
@@ -168,8 +174,12 @@ body {
     aside {
       position: absolute;
       z-index: 1111;
-      left: -270px;
+      left: -$sidebar-width;
+      // left: -270px;
       transition: left 0.3s;
+      &.collapsed {
+        left: -$sidebar-collapsed-width;
+      }
     }
     &.toggled {
       .overlay {
@@ -186,8 +196,11 @@ body {
       }
       aside {
         left: auto;
-        right: -270px;
+        right: -$sidebar-width;
         transition: right 0.3s;
+        &.collapsed {
+          right: -$sidebar-collapsed-width;
+        }
       }
       &.toggled {
         aside {