Sidebar Enhancements

src/components/main-app/ol-init.js

@@ -5,7 +5,7 @@ import { URL_SHAPE, URL_TILES, URL_COLORS, URL_OPACITY } from 'config';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { usePrevious } from 'react-use';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCompass } from '@fortawesome/free-solid-svg-icons';
+import { faCompass, faBars } from '@fortawesome/free-solid-svg-icons';
 import { handleLocationButton } from 'utils';
 import { setSource } from '../../api/map-data';
 
@@ -56,6 +56,16 @@ export default function OlInit() {
               <FontAwesomeIcon icon={faCompass} />
             </button>
           </div>
+          <div className="ol-control max-btn-container">
+            <button
+              className="maximize-btn"
+              onClick={() => {
+                document.querySelector('.sidebar').style.display = 'block';
+              }}
+            >
+              <FontAwesomeIcon icon={faBars} />
+            </button>
+          </div>
         </div>
       </div>
     </>

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

@@ -1,20 +1,30 @@
-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 { Collapse } from 'utils';
 
 export default function AlphaInput() {
   const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   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)}
+      <Collapse
+        title="Alpha Value (0-1)"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
       />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <input
+          type="number"
+          value={opacity}
+          className="input-text"
+          placeholder="Alpha Input"
+          onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
+        />
+      )}
     </>
   );
 }

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 { Collapse } from 'utils';
 
 const popover = {
   position: 'absolute',
@@ -29,6 +30,7 @@ export default function ColorsInput() {
   const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
   const [itemColorStatus, setItemColorStatus] = useState(null);
   const colorsArray = getColorsArray(colors);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   const changeItemColor = color => {
     setItemColorStatus({ color: color.hex, key: itemColorStatus.key });
@@ -47,54 +49,68 @@ 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>
+        <Collapse
+          title="Colors Palette"
+          toggleCollapse={toggleCollapse}
+          setToggleCollapse={setToggleCollapse}
+        />{' '}
+        {toggleCollapse ? (
+          true
+        ) : (
+          <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 }
-              }
-            >
+      {toggleCollapse ? (
+        true
+      ) : (
+        <>
+          <div className="color-input">
+            {colorsArray.map((color, key) => (
+              <>
+                <div
+                  className="color-input-item"
+                  style={
+                    itemColorStatus && itemColorStatus.key === key
+                      ? { background: color, borderColor: 'black' }
+                      : { background: color }
+                  }
+                >
+                  <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>
+          {itemColorStatus ? (
+            <div style={popover}>
               <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>
+                style={cover}
+                onClick={() => {
+                  setItemColorStatus(false);
+                }}
+              />
+              <ChromePicker
+                color={itemColorStatus.color}
+                onChange={changeItemColor}
+              />
             </div>
-          </>
-        ))}
-      </div>
-      {itemColorStatus ? (
-        <div style={popover}>
-          <div
-            style={cover}
-            onClick={() => {
-              setItemColorStatus(false);
-            }}
-          />
-          <ChromePicker
-            color={itemColorStatus.color}
-            onChange={changeItemColor}
-          />
-        </div>
-      ) : null}
+          ) : null}
+        </>
+      )}
     </>
   );
 }

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

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import JSONPretty from 'react-json-pretty';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import * as JSONPrettyMon from 'react-json-pretty/dist/acai';
+import { Collapse } from 'utils';
+
+export default function ColorsOutput({ text, setColorFormat }) {
+  const [toggleCollapse, setToggleCollapse] = useState(true);
+
+  const handleColorFormatChange = event => {
+    setColorFormat(event.target.value);
+  };
+
+  return (
+    <>
+      <Collapse
+        title="Colors Output Box"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
+      />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <>
+          <div className="color-output-btns">
+            <select
+              id="color-format"
+              defaultValue="rgba"
+              onChange={event => handleColorFormatChange(event)}
+            >
+              <option value="hex">HEX</option>
+              <option value="rgba">RGBA</option>
+              <option value="hsla">HSLA</option>
+            </select>
+            <CopyToClipboard text={text}>
+              <button className="copy-btn">Copy</button>
+            </CopyToClipboard>
+          </div>
+          <JSONPretty
+            id="json-pretty"
+            data={text}
+            theme={JSONPrettyMon}
+          ></JSONPretty>
+        </>
+      )}
+    </>
+  );
+}

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 ColorsOutput } from './colors-output';

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

@@ -1,20 +1,30 @@
-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 { Collapse } from 'utils';
 
 export default function ShapeInput() {
   const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   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)}
+      <Collapse
+        title="Shape URL (Only Topo JSON)"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
       />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <input
+          type="text"
+          value={shape}
+          className="input-text"
+          placeholder="Shape URL"
+          onChange={e => onChangeShape(e.target.value, URL_UPDATE_PUSH)}
+        />
+      )}
     </>
   );
 }

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

@@ -1,20 +1,30 @@
-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 { Collapse } from 'utils';
 
 export default function TilesInput() {
   const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
+  const [toggleCollapse, setToggleCollapse] = useState(true);
 
   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)}
+      <Collapse
+        title="Tiles URL (XYZ Format)"
+        toggleCollapse={toggleCollapse}
+        setToggleCollapse={setToggleCollapse}
       />
+      {toggleCollapse ? (
+        true
+      ) : (
+        <input
+          type="text"
+          value={tiles}
+          className="input-text"
+          placeholder="Tiles URL"
+          onChange={e => onChangeTiles(e.target.value, URL_UPDATE_PUSH)}
+        />
+      )}
     </>
   );
 }

src/components/main-app/sidebar.js

@@ -6,15 +6,14 @@ import {
   TilesInput,
   ShapeInput,
   ColorsInput,
+  ColorsOutput,
   AlphaInput,
 } from './sidebar-wrapper';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyles } from './themes/global-styles';
 import { lightTheme, darkTheme } from './themes/themes';
-import '../../sass/index.sass';
-import JSONPretty from 'react-json-pretty';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import * as JSONPrettyMon from 'react-json-pretty/dist/acai';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
 
 export default function Sidebar({ setTheme, theme }) {
   const [colors] = useQueryParam(URL_COLORS, StringParam);
@@ -29,15 +28,19 @@ export default function Sidebar({ setTheme, theme }) {
     );
   }, [colors, opacity, colorFormat]);
 
-  const handleColorFormatChange = event => {
-    setColorFormat(event.target.value);
-  };
-
   return (
     <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
       <GlobalStyles />
       <div className="sidebar">
         <div className="sidebar-wrapper">
+          <button
+            className="minimize-btn"
+            onClick={() => {
+              document.querySelector('.sidebar').style.display = 'none';
+            }}
+          >
+            <FontAwesomeIcon size="xs" icon={faWindowMinimize} />
+          </button>
           <h1 className="logo">
             Raster<span>Playground</span>
           </h1>
@@ -65,27 +68,11 @@ export default function Sidebar({ setTheme, theme }) {
           <br />
           <ColorsInput />
           <br />
-          <AlphaInput />
           <br />
+          <AlphaInput />
           <br />
-          <select
-            id="color-format"
-            defaultValue="rgba"
-            onChange={event => handleColorFormatChange(event)}
-          >
-            <option value="hex">HEX</option>
-            <option value="rgba">RGBA</option>
-            <option value="hsla">HSLA</option>
-          </select>
-          <CopyToClipboard text={text}>
-            <button className="copy-btn">Copy</button>
-          </CopyToClipboard>
           <br />
-          <JSONPretty
-            id="json-pretty"
-            data={text}
-            theme={JSONPrettyMon}
-          ></JSONPretty>
+          <ColorsOutput text={text} setColorFormat={setColorFormat} />
         </div>
       </div>
     </ThemeProvider>