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,13 +153,15 @@ const settingsConfig: settingsConfig[] = [
       }, [state.layout])
       return (
         <div className="p-2">
-          <li
-            className="grid items-center my-2"
-            style={{ gridTemplateColumns: 'auto 4rem' }}
+          <li className="list-none select-none">
+            <label
+              className="grid items-center my-2 cursor-pointer"
+              style={{ gridTemplateColumns: '1fr auto' }}
             >
-            <div className="text-sm">Visible</div>
-            <input
-              type="checkbox"
+              <span>Visible</span>
+              <Toggle
+                offLabel="Hide"
+                onLabel="Show"
                 onChange={(newValue) => {
                   if (consolePath) {
                     const newTree = updateTree(state.layout, [
@@ -186,6 +190,7 @@ const settingsConfig: settingsConfig[] = [
                 }}
                 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