Added auto-hide feature.

README.md

@@ -34,7 +34,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
 - [X] Search bar to search places 
 - [X] Go to current location
 - [X] Dark Mode
-
+- [X] Auto Hide sidebar
 ## Installation
 clone repo and install using - 
 ```sh

src/app.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import 'sass/index.sass';
 import Router from './router';
+import 'sass/style.css';
 
 export default function App() {
   return (

src/components/main-app/sidebar.js

@@ -21,22 +21,45 @@ export default function Sidebar({ setTheme, theme }) {
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
   const [text, setText] = useState('');
   const [colorFormat, setColorFormat] = useState('rgba');
-
+   let i=1;
   useEffect(() => {
     const colorArray = getColorsArray(colors);
+    const sidebar=document.querySelector(".sidebar");
+    const open=document.getElementById("open");
+    const close=document.getElementById("close");
+    open.addEventListener("click",()=>{
+      if(sidebar.classList.contains("hide"))
+      sidebar.classList.remove("hide");
+    })
+    close.addEventListener("click",()=>{
+      sidebar.classList.add("hide");
+    })
+    sidebar.onmouseover=()=>{
+      i=0;
+    }
+    const timer=setInterval(()=>{
+      i++;
+      if(i>10&&!sidebar.classList.contains("hide"))
+      { 
+        sidebar.classList.add("hide");
+        i=0;
+      }
+    },1000);
+
     setText(
       JSON.stringify(copyColor(colorArray, opacity, colorFormat), undefined, 4)
     );
-  }, [colors, opacity, colorFormat]);
+  }, [colors, opacity, colorFormat,i]);
 
   const handleColorFormatChange = event => {
     setColorFormat(event.target.value);
   };
-
   return (
     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
       <GlobalStyles />
+      <div id="open"><i className="fa fa-cog"></i></div>
       <div className="sidebar">
+      <div id="close"><i className="fa fa-times"></i></div>
         <div className="sidebar-wrapper">
           <h1 className="logo">
             Raster<span>Playground</span>

src/sass/style.css

@@ -0,0 +1,23 @@
+#open,#close
+{
+    position: absolute;
+    color:#091B29;
+    padding:4px 10px;
+    background-color:white ;
+    font-size: 24px;
+    border-radius:50% ;
+    cursor: pointer;
+}
+.hide{
+    transform: translateX(-110%);
+    transition: all 8s ease-in-out;
+}
+#close{
+    top:25px;
+    left:280px;
+}
+#open
+{
+top:25px;
+left:25px;
+}