FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize submenu in ToolsFramework

Browse Source
This commit is contained in:
Fat Snake
2023-10-13 15:34:22 +08:00
parent 91d5480780
commit dc667faa0b
4 changed files with 187 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/pages/ToolsFramework.tsx
View File

@@ -6,125 +6,159 @@ import { toolsJsonObjects } from '@/router/tools.tsx'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
const ToolsFramework: React.FC = () => {
const [submenuTop, setSubmenuTop] = useState(0)
const [submenuLeft, setSubmenuLeft] = useState(0)
const showSubmenu = (e: React.MouseEvent) => {
const parentElement = e.currentTarget.parentElement
if (parentElement && parentElement.childElementCount === 2) {
const parentClientRect = parentElement.getBoundingClientRect()
if (parentClientRect.top <= screen.height / 2) {
setSubmenuTop(parentClientRect.top)
} else {
setSubmenuTop(
parentClientRect.top -
(parentElement.lastElementChild?.clientHeight ?? 0) +
e.currentTarget.clientHeight
)
}
setSubmenuLeft(parentClientRect.right)
}
}
return (
<>
<FitFullScreen className={'flex-horizontal'}>
<div className={'left-panel'}>
<div className={'title'}>氮工具</div>
<div style={{ marginTop: '0' }} className={'separate'} />
<HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}>
<div className={'content'}>
<ul>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={''}
end
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
<div className={'icon-box'}>
<Icon
className={'icon'}
component={toolsJsonObjects[0].icon}
/>
</div>
<span className={'text'}>
{toolsJsonObjects[0].name}
</span>
</NavLink>
</div>
</li>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={'all'}
className={({ isActive, isPending }) =>
isPending ? ' pending' : isActive ? ' active' : ''
}
>
<div className={'icon-box'}>
<Icon
className={'icon'}
component={toolsJsonObjects[1].icon}
/>
</div>
<span className={'text'}>
{toolsJsonObjects[1].name}
</span>
</NavLink>
</div>
</li>
<li>
<div className={'separate'} />
</li>
{toolsJsonObjects.map((tool) => {
return tool.menu &&
tool.id !== 'tools' &&
tool.id !== 'tools-all' ? (
<li className={'item'} key={tool.id}>
<div className={'menu-bt'}>
<NavLink
to={tool.path}
className={({ isActive, isPending }) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
<div className={'content'}>
<ul>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={''}
end
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
<div className={'icon-box'}>
<Icon
className={'icon'}
component={toolsJsonObjects[0].icon}
/>
</div>
<span className={'text'}>{toolsJsonObjects[0].name}</span>
</NavLink>
</div>
</li>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={'all'}
className={({ isActive, isPending }) =>
isPending ? ' pending' : isActive ? ' active' : ''
}
>
<div className={'icon-box'}>
<Icon
className={'icon'}
component={toolsJsonObjects[1].icon}
/>
</div>
<span className={'text'}>{toolsJsonObjects[1].name}</span>
</NavLink>
</div>
</li>
<li>
<div className={'separate'} />
</li>
</ul>
<div className={'toolsMenu'}>
<HideScrollbar
isShowVerticalScrollbar={true}
isShowHorizontalScrollbar={true}
scrollbarWidth={2}
>
<ul>
{toolsJsonObjects.map((tool) => {
return tool.menu &&
tool.id !== 'tools' &&
tool.id !== 'tools-all' ? (
<li className={'item'} key={tool.id}>
<div
className={'menu-bt'}
onMouseEnter={showSubmenu}
>
<div className={'icon-box'}>
{tool.icon ? (
<Icon
className={'icon'}
component={tool.icon}
/>
) : undefined}
</div>
<span className={'text'}>{tool.name}</span>
</NavLink>
</div>
{tool.children ? (
<ul className={'submenu'}>
<div className={'content'}>
{tool.children.map((subTool) => {
return subTool.menu ? (
<li
className={'item'}
key={subTool.id}
>
<NavLink
to={`${tool.path}/${subTool.path}`}
className={({
isActive,
isPending
}) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
<NavLink
to={tool.path}
className={({ isActive, isPending }) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
>
<div className={'icon-box'}>
{tool.icon ? (
<Icon
className={'icon'}
component={tool.icon}
/>
) : undefined}
</div>
<span className={'text'}>{tool.name}</span>
</NavLink>
</div>
{tool.children ? (
<ul
className={'submenu'}
style={{
top: submenuTop,
left: submenuLeft
}}
>
<div className={'content'}>
{tool.children.map((subTool) => {
return subTool.menu ? (
<li
className={'item'}
key={subTool.id}
>
<span className={'text'}>
{subTool.name}
</span>
</NavLink>
</li>
) : undefined
})}
</div>
</ul>
) : undefined}
</li>
) : undefined
})}
</ul>
<NavLink
to={`${tool.path}/${subTool.path}`}
className={({
isActive,
isPending
}) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
>
<span
className={'text'}
>
{subTool.name}
</span>
</NavLink>
</li>
) : undefined
})}
</div>
</ul>
) : undefined}
</li>
) : undefined
})}
</ul>
</HideScrollbar>
</div>
</HideScrollbar>
</div>
<div className={'title'}>氮工具</div>
</div>
<div className={'right-panel'}></div>