Sidebar Improvements + Mobile Responsive

README.md

@@ -28,7 +28,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
     - [X] Alpha color (0 - transparent)
     - [ ] Copy color in different format - HEX, RGBA, HSLA (JSON)
     - [ ] Download color format for ASE, GIMP/Inscape color scheme
-- [ ] Mobile version 
+- [X] Mobile version 
 - [ ] Search bar to search places 
 - [ ] Go to current location
 

src/components/main-app/reusable/index.js

@@ -0,0 +1 @@
+export { default as ToggleSidebarData } from './toggle-sidebar-data';

src/components/main-app/reusable/toggle-sidebar-data.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function ToggleSidebarData({
+  heading,
+  showData,
+  toggleData,
+  extraData,
+}) {
+  return (
+    <div className="color-row">
+      <p>{heading}</p>
+      {showData ? extraData : null}
+      {showData ? (
+        <a
+          href="#hideData"
+          className="fa fa-lg fa-arrow-up iconButton"
+          onClick={toggleData}
+        >
+          {' '}
+        </a>
+      ) : (
+        <a
+          href="#showData"
+          className="fa fa-lg fa-arrow-down iconButton"
+          onClick={toggleData}
+        >
+          {' '}
+        </a>
+      )}
+    </div>
+  );
+}

src/components/main-app/sidebar-wrapper/alpha-input.js

@@ -1,20 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { URL_OPACITY, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { ToggleSidebarData } from '../reusable';
 
 export default function AlphaInput() {
   const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   return (
     <>
-      <p>Alpha Value (0-1)</p>
-      <input
-        type="number"
-        value={opacity}
-        className="input-text"
-        placeholder="Alpha Input"
-        onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
+      <ToggleSidebarData
+        heading="Alpha Value (0-1)"
+        showData={showData}
+        toggleData={toggleData}
       />
+      {showData ? (
+        <input
+          type="number"
+          value={opacity}
+          className="input-text"
+          placeholder="Alpha Input"
+          onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
+        />
+      ) : null}
     </>
   );
 }

src/components/main-app/sidebar-wrapper/color-details.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { ToggleSidebarData } from '../reusable';
+
+export default function ColorDetails({ text }) {
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
+  return (
+    <>
+      <ToggleSidebarData
+        heading="Color Details"
+        showData={showData}
+        toggleData={toggleData}
+      />
+      {showData ? <div>{JSON.stringify(text)}</div> : null}
+    </>
+  );
+}

src/components/main-app/sidebar-wrapper/colors-input.js

@@ -4,6 +4,7 @@ import { URL_COLORS, URL_UPDATE_PUSH } from 'config';
 import { ReactComponent as CloseSVG } from 'assets/svg/close.svg';
 import { getColorsArray, getColorsString } from 'utils';
 import { ChromePicker } from 'react-color';
+import { ToggleSidebarData } from '../reusable';
 
 const popover = {
   position: 'absolute',
@@ -29,6 +30,11 @@ export default function ColorsInput() {
   const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
   const [itemColorStatus, setItemColorStatus] = useState(null);
   const colorsArray = getColorsArray(colors);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   const changeItemColor = color => {
     setItemColorStatus({ color: color.hex, key: itemColorStatus.key });
@@ -46,41 +52,48 @@ export default function ColorsInput() {
 
   return (
     <>
-      <div className="color-row">
-        <p>Colors Palette</p>{' '}
-        <a
-          href="#add"
-          onClick={() => addColor()}
-          class="iconButton fa fa-lg fa-plus"
-        >
-          {' '}
-        </a>
-      </div>
-      <div className="color-input">
-        {colorsArray.map((color, key) => (
-          <>
-            <div
-              className="color-input-item"
-              style={
-                itemColorStatus && itemColorStatus.key === key
-                  ? { background: color, borderColor: 'black' }
-                  : { background: color }
-              }
-            >
+      <ToggleSidebarData
+        heading="Colors Palette"
+        showData={showData}
+        toggleData={toggleData}
+        extraData={
+          <a
+            href="#add"
+            onClick={() => addColor()}
+            className="iconButton fa fa-lg fa-plus"
+            style={{ marginLeft: '45%' }}
+          >
+            {' '}
+          </a>
+        }
+      />
+      {showData ? (
+        <div className="color-input">
+          {colorsArray.map((color, key) => (
+            <div className="display-inline" key={key}>
               <div
-                className="color-input-item-close"
-                onClick={e => deleteColor(key, colorsArray, onChangeColor)}
+                className="color-input-item"
+                style={
+                  itemColorStatus && itemColorStatus.key === key
+                    ? { background: color, borderColor: 'black' }
+                    : { background: color }
+                }
               >
-                <CloseSVG />
+                <div
+                  className="color-input-item-close"
+                  onClick={e => deleteColor(key, colorsArray, onChangeColor)}
+                >
+                  <CloseSVG />
+                </div>
+                <div
+                  className="color-input-item-overlay"
+                  onClick={e => setItemColorStatus({ color, key })}
+                ></div>
               </div>
-              <div
-                className="color-input-item-overlay"
-                onClick={e => setItemColorStatus({ color, key })}
-              ></div>
             </div>
-          </>
-        ))}
-      </div>
+          ))}
+        </div>
+      ) : null}
       {itemColorStatus ? (
         <div style={popover}>
           <div

src/components/main-app/sidebar-wrapper/index.js

@@ -2,3 +2,4 @@ export { default as TilesInput } from './tiles-input';
 export { default as ShapeInput } from './shape-input';
 export { default as ColorsInput } from './colors-input';
 export { default as AlphaInput } from './alpha-input';
+export { default as ColorDetails } from './color-details';

src/components/main-app/sidebar-wrapper/shape-input.js

@@ -1,20 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { URL_SHAPE, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { ToggleSidebarData } from '../reusable';
 
 export default function ShapeInput() {
   const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   return (
     <>
-      <p>Shape URL (Only Topo JSON)</p>
-      <input
-        type="text"
-        value={shape}
-        className="input-text"
-        placeholder="Shape URL"
-        onChange={e => onChangeShape(e.target.value, URL_UPDATE_PUSH)}
+      <ToggleSidebarData
+        heading="Shape URL (Only Topo JSON)"
+        showData={showData}
+        toggleData={toggleData}
       />
+      {showData ? (
+        <input
+          type="text"
+          value={shape}
+          className="input-text"
+          placeholder="Shape URL"
+          onChange={e => onChangeShape(e.target.value, URL_UPDATE_PUSH)}
+        />
+      ) : null}
     </>
   );
 }

src/components/main-app/sidebar-wrapper/tiles-input.js

@@ -1,20 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { URL_TILES, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { ToggleSidebarData } from '../reusable';
 
 export default function TilesInput() {
   const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
+  const [showData, onShowData] = useState(false);
+
+  const toggleData = () => {
+    onShowData(!showData);
+  };
 
   return (
     <>
-      <p>Tiles URL (XYZ Format)</p>
-      <input
-        type="text"
-        value={tiles}
-        className="input-text"
-        placeholder="Tiles URL"
-        onChange={e => onChangeTiles(e.target.value, URL_UPDATE_PUSH)}
+      <ToggleSidebarData
+        heading="Tiles URL (XYZ Format)"
+        showData={showData}
+        toggleData={toggleData}
       />
+      {showData ? (
+        <input
+          type="text"
+          value={tiles}
+          className="input-text"
+          placeholder="Tiles URL"
+          onChange={e => onChangeTiles(e.target.value, URL_UPDATE_PUSH)}
+        />
+      ) : null}
     </>
   );
 }

src/components/main-app/sidebar.js

@@ -2,43 +2,77 @@ import { URL_COLORS, URL_OPACITY } from 'config';
 import React, { useEffect, useState } from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { copyColor, getColorsArray } from 'utils';
+import { ReactComponent as MenuIconSVG } from 'assets/svg/menu-icon.svg';
+import { AppConstants } from 'constants/index';
 import {
   TilesInput,
   ShapeInput,
   ColorsInput,
   AlphaInput,
+  ColorDetails,
 } from './sidebar-wrapper';
 
 export default function Sidebar() {
   const [colors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
   const [text, setText] = useState('');
+  const [showSidebarMobile, setShowSidebarMobile] = useState(false);
+
+  const tabs = (
+    <div>
+      <ShapeInput />
+      <br />
+      <br />
+      <TilesInput />
+      <br />
+      <br />
+      <ColorsInput />
+      <br />
+      <br />
+      <AlphaInput />
+      <br />
+      <br />
+      <ColorDetails text={text} />
+    </div>
+  );
 
   useEffect(() => {
     const colorArray = getColorsArray(colors);
     setText(copyColor(colorArray, opacity));
   }, [colors, opacity]);
 
   return (
-    <div className="sidebar">
-      <div className="sidebar-wrapper">
-        <h1 className="logo">
-          Raster<span>Playground</span>
-        </h1>
-        <hr />
-        <ShapeInput />
-        <br />
-        <br />
-        <TilesInput />
-        <br />
-        <br />
-        <ColorsInput />
-        <br />
-        <AlphaInput />
-        <br />
-        <br />
-        <div>{JSON.stringify(text)}</div>
-      </div>
+    <div>
+      {window.innerWidth > AppConstants.SCREEN_WIDTH_LIMIT ? (
+        <div className="sidebar">
+          <div className="sidebar-wrapper">
+            <h1 className="logo">
+              Raster<span>Playground</span>
+            </h1>
+            <hr />
+            {tabs}
+          </div>
+        </div>
+      ) : (
+        <div className="sidebar">
+          <div className="sidebar-wrapper">
+            <div
+              className="expand-sidebar-button"
+              onClick={() => {
+                setShowSidebarMobile(!showSidebarMobile);
+              }}
+            >
+              <MenuIconSVG />
+            </div>
+            <h1 className="logo">
+              Raster<span>Playground</span>
+            </h1>
+            <div className="sidebar-mobile">
+              {showSidebarMobile ? tabs : null}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/constants/app-constants.js

@@ -0,0 +1,5 @@
+let obj = {
+  SCREEN_WIDTH_LIMIT: 769,
+};
+
+export default obj;