h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Sorted out using <details> element, got ancestor clicks closing out to their level

Browse Source
This commit is contained in:
Frank Johnson
2021-09-12 17:13:30 -04:00
parent 69c83d33b1
commit 2ec3a0b202
9 changed files with 313 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/web/src/components/IdeSideBar/IdeSideBar.tsx
View File

@@ -1,22 +1,30 @@
import { useState } from 'react'
import Svg from 'src/components/Svg/Svg'
import { sidebarTopConfig, sidebarBottomConfig, sidebarCombinedConfig } from './sidebarConfig'
import {
sidebarTopConfig,
sidebarBottomConfig,
sidebarCombinedConfig,
} from './sidebarConfig'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
function TabToggle({ item, className = "", active, onChange, onClick }) {
function TabToggle({ item, className = '', active, onChange, onClick }) {
return (
<label
className={`tabToggle${item.disabled ? ' disabled' : ''}${active ? ' active' : ''} ${className}`}>
<input name="sidebar-tabs"
type="radio"
disabled={item.disabled}
value={ item.name }
onChange={ onChange }
onClick={ onClick }
className="visually-hidden"
/>
<Svg name={item.icon} className="w-8 mx-auto"/>
</label>
<label
className={`tabToggle${item.disabled ? ' disabled' : ''}${
active ? ' active' : ''
} ${className}`}
>
<input
name="sidebar-tabs"
type="radio"
disabled={item.disabled}
value={item.name}
onChange={onChange}
onClick={onClick}
className="visually-hidden"
/>
<Svg name={item.icon} className="w-8 mx-auto" />
</label>
)
}
@@ -24,44 +32,52 @@ const IdeSideBar = () => {
const { state, thunkDispatch } = useIdeContext()
function onTabClick(name) {
return function() {
thunkDispatch({type: 'settingsButtonClicked', payload: [name]})
return function () {
thunkDispatch({ type: 'settingsButtonClicked', payload: [name] })
}
}
const selectedTab = React.useMemo(() => sidebarCombinedConfig.find(item => item.name === state.sideTray[0]), [state.sideTray])
const selectedTab = React.useMemo(
() => sidebarCombinedConfig.find((item) => item.name === state.sideTray[0]),
[state.sideTray]
)
return (
<section className="flex h-full bg-ch-gray-900 border border-red-500">
<section className="flex h-full bg-ch-gray-900">
<fieldset className="h-full flex flex-col justify-between bg-ch-gray-700">
<div>
{ sidebarTopConfig.map((topItem, i) => (
{sidebarTopConfig.map((topItem, i) => (
<TabToggle
item={topItem}
active={ state.sideTray[0] === topItem.name }
onChange={ () => onTabClick(topItem.name) }
onClick={ onTabClick(topItem.name) }
key={ 'tab-' + i }
active={state.sideTray[0] === topItem.name}
onChange={() => onTabClick(topItem.name)}
onClick={onTabClick(topItem.name)}
key={'tab-' + i}
/>
))}
</div>
<div>
{ sidebarBottomConfig.map((bottomItem, i) => (
{sidebarBottomConfig.map((bottomItem, i) => (
<TabToggle
item={bottomItem}
active={ state.sideTray[0] === bottomItem.name }
onChange={ () => onTabClick(bottomItem.name) }
onClick={ onTabClick(bottomItem.name) }
key={ 'tab-' + (sidebarTopConfig.length+i) }
/>
item={bottomItem}
active={state.sideTray[0] === bottomItem.name}
onChange={() => onTabClick(bottomItem.name)}
onClick={onTabClick(bottomItem.name)}
key={'tab-' + (sidebarTopConfig.length + i)}
/>
))}
</div>
</fieldset>
{ selectedTab?.panel && (
<div className="w-56 bg-ch-gray-900 text-ch-gray-300 border border-ch-pink-800 border-opacity-30" style={{ height: 'calc(100% - 6px)', margin: '3px'}}>
<h2 className="flex items-center h-9 px-4 bg-ch-pink-800 bg-opacity-30">{ selectedTab.name }</h2>
{ selectedTab.panel }
{selectedTab?.panel && (
<div
className="w-56 bg-ch-gray-900 text-ch-gray-300 border border-ch-pink-800 border-opacity-30"
style={{ height: 'calc(100% - 6px)', margin: '3px' }}
>
<h2 className="flex items-center h-9 px-4 bg-ch-pink-800 bg-opacity-30">
{selectedTab.name}
</h2>
{selectedTab.panel}
</div>
) }
)}
</section>
)
}