Added Toggle UI component

app/web/config/tailwind.config.js

@@ -98,6 +98,9 @@ module.exports = {
       minHeight: {
         md: '28rem',
       },
+      outline: {
+        gray: ['2px solid #3B3E4B', '8px'],
+      },
       skew: {
         '-20': '-20deg',
       },

app/web/src/components/IdeSideBar/sidebarConfig.tsx

@@ -3,6 +3,8 @@ import { SvgNames } from 'src/components/Svg/Svg'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { createRemoveUpdate, updateTree } from 'react-mosaic-component'
 import type { MosaicPath } from 'react-mosaic-component'
+import Toggle from 'src/components/Toggle'
+
 interface SidebarConfigType {
   name: string
   icon: SvgNames
@@ -151,41 +153,44 @@ const settingsConfig: settingsConfig[] = [
       }, [state.layout])
       return (
         <div className="p-2">
-          <li
-            className="grid items-center my-2"
-            style={{ gridTemplateColumns: 'auto 4rem' }}
-          >
-            <div className="text-sm">Visible</div>
-            <input
-              type="checkbox"
-              onChange={(newValue) => {
-                if (consolePath) {
-                  const newTree = updateTree(state.layout, [
-                    createRemoveUpdate(state.layout, consolePath),
-                  ])
-                  thunkDispatch({ type: 'setLayout', payload: newTree })
-                } else {
-                  // Split 'Viewer' panel to add console back in
-                  const viewerPath = getPathById(state.layout, 'Viewer')
-                  const newTree = { ...state.layout }
-                  let temp = newTree
-                  viewerPath.forEach((name) => {
-                    if (newTree[name] === 'Viewer') {
-                      newTree[name] = {
-                        direction: 'column',
-                        first: 'Viewer',
-                        second: 'Console',
-                        splitPercentage: 70,
+          <li className="list-none select-none">
+            <label
+              className="grid items-center my-2 cursor-pointer"
+              style={{ gridTemplateColumns: '1fr auto' }}
+            >
+              <span>Visible</span>
+              <Toggle
+                offLabel="Hide"
+                onLabel="Show"
+                onChange={(newValue) => {
+                  if (consolePath) {
+                    const newTree = updateTree(state.layout, [
+                      createRemoveUpdate(state.layout, consolePath),
+                    ])
+                    thunkDispatch({ type: 'setLayout', payload: newTree })
+                  } else {
+                    // Split 'Viewer' panel to add console back in
+                    const viewerPath = getPathById(state.layout, 'Viewer')
+                    const newTree = { ...state.layout }
+                    let temp = newTree
+                    viewerPath.forEach((name) => {
+                      if (newTree[name] === 'Viewer') {
+                        newTree[name] = {
+                          direction: 'column',
+                          first: 'Viewer',
+                          second: 'Console',
+                          splitPercentage: 70,
+                        }
+                        return
                       }
-                      return
-                    }
-                    temp = { ...newTree[name] }
-                  })
-                  thunkDispatch({ type: 'setLayout', payload: newTree })
-                }
-              }}
-              checked={!!consolePath}
-            />
+                      temp = { ...newTree[name] }
+                    })
+                    thunkDispatch({ type: 'setLayout', payload: newTree })
+                  }
+                }}
+                checked={!!consolePath}
+              />
+            </label>
           </li>
         </div>
       )

app/web/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,33 @@
+const Toggle = ({ offLabel = 'off', onLabel = 'on', checked, onChange }) => {
+  return (
+    <div className="flex items-center text-sm cursor-pointer font-light">
+      <span className={!checked && 'text-ch-gray-500'}>{offLabel}</span>
+      <div
+        className={
+          'mx-2 w-7 h-4 p-1 rounded-full border border-ch-gray-300 relative ' +
+          (checked && 'border-ch-gray-500')
+        }
+      >
+        <div
+          className="w-2.5 h-2.5 rounded-full bg-ch-pink-300 absolute transition-transform duration-75"
+          style={{
+            left: '50%',
+            top: '50%',
+            transform: checked
+              ? 'translate(-100%, -50%)'
+              : 'translate(0%, -50%)',
+          }}
+        ></div>
+      </div>
+      <span className={checked && 'text-ch-gray-500'}>{onLabel}</span>
+      <input
+        className="sr-only"
+        type="checkbox"
+        onChange={onChange}
+        checked={checked}
+      />
+    </div>
+  )
+}
+
+export default Toggle