73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { useState } from 'react'
|
|
import Svg from 'src/components/Svg/Svg'
|
|
import { sidebarTopConfig, sidebarBottomConfig, sidebarCombinedConfig } from './sidebarConfig'
|
|
|
|
function TabToggle({ item, className = "", active, onChange, onClick }) {
|
|
return (
|
|
<label
|
|
key={'tab-'+item.name}
|
|
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>
|
|
)
|
|
}
|
|
|
|
const IdeSideBar = () => {
|
|
const [selectedTab, setSelectedTab] = useState("")
|
|
const [lastOpen, setLastOpen] = useState("")
|
|
|
|
function onTabClick(name) {
|
|
return function() {
|
|
if (selectedTab === name) {
|
|
setLastOpen(selectedTab)
|
|
setSelectedTab("")
|
|
} else if (selectedTab === "" && lastOpen === name) {
|
|
setSelectedTab(name)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<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) => (
|
|
<TabToggle
|
|
item={topItem}
|
|
active={ selectedTab === topItem.name }
|
|
onChange={ () => setSelectedTab(topItem.name) }
|
|
onClick={ onTabClick(topItem.name) }
|
|
/>
|
|
))}
|
|
</div>
|
|
<div>
|
|
{ sidebarBottomConfig.map((bottomItem, i) => (
|
|
<TabToggle
|
|
item={bottomItem}
|
|
active={ selectedTab === bottomItem.name }
|
|
onChange={ () => setSelectedTab(bottomItem.name) }
|
|
onClick={ onTabClick(bottomItem.name) }
|
|
/>
|
|
))}
|
|
</div>
|
|
</fieldset>
|
|
{ sidebarCombinedConfig.find(item => item.name === selectedTab)?.panel && (
|
|
<div className="w-56 bg-ch-gray-800 text-ch-gray-300" style={{ height: 'calc(100% - 6px)', margin: '3px'}}>
|
|
<h2 className="py-2 px-4 bg-ch-gray-760 mb-2">{ selectedTab }</h2>
|
|
{ sidebarCombinedConfig.find(item => item.name === selectedTab).panel }
|
|
</div>
|
|
) }
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default IdeSideBar
|