Finish sidebar in ToolsFramework
This commit is contained in:
@@ -11,14 +11,41 @@ body {
|
||||
width: clamp(180px, 20vw, 240px);
|
||||
background-color: constants.$origin-color;
|
||||
user-select: none;
|
||||
transition: all .3s;
|
||||
white-space: nowrap;
|
||||
|
||||
.title {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.6em;
|
||||
padding: 10px;
|
||||
padding: 10px 14px;
|
||||
color: constants.$main-color;
|
||||
|
||||
.icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: constants.$SIZE_ICON_SM;
|
||||
border-radius: 8px;
|
||||
span {
|
||||
transform: rotateZ(180deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: constants.$background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
letter-spacing: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -42,26 +69,29 @@ body {
|
||||
.menu-bt {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
|
||||
.icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: constants.$SIZE_ICON_SM;
|
||||
cursor: pointer;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
.icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
padding: 8px 16px;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -147,6 +177,28 @@ body {
|
||||
};
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
width: 68px;
|
||||
|
||||
.title {
|
||||
.icon-box {
|
||||
span {
|
||||
transform: rotateZ(360deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bt {
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
|
||||
1
src/assets/svg/expand.svg
Normal file
1
src/assets/svg/expand.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 1028 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M8.533333 192c0-25.6 17.066667-42.666667 34.133334-42.666667h490.666666c21.333333 0 34.133333 17.066667 34.133334 42.666667 0 21.333333-17.066667 42.666667-34.133334 42.666667h-490.666666c-21.333333 0-34.133333-21.333333-34.133334-42.666667z m550.4 213.333333c0 25.6-21.333333 42.666667-46.933333 42.666667h-465.066667c-25.6 0-46.933333-17.066667-46.933333-42.666667 0-21.333333 21.333333-42.666667 46.933333-42.666666h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666666z m-507.733333 256c-25.6 0-46.933333-17.066667-46.933333-42.666666s21.333333-42.666667 46.933333-42.666667h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666667 0 21.333333-21.333333 42.666667-46.933333 42.666666h-465.066667z m507.733333 170.666667c0 25.6-21.333333 42.666667-51.2 42.666667h-452.266666c-29.866667 0-51.2-17.066667-51.2-42.666667s21.333333-42.666667 51.2-42.666667h452.266666c29.866667 0 51.2 17.066667 51.2 42.666667z m140.8-85.333333l221.866667-238.933334-221.866667-238.933333c-17.066667-17.066667-17.066667-51.2 0-68.266667 17.066667-17.066667 46.933333-17.066667 64 0l251.733334 273.066667c17.066667 17.066667 17.066667 51.2 0 68.266667l-251.733334 273.066666c-17.066667 17.066667-46.933333 17.066667-64 0-17.066667-17.066667-17.066667-46.933333 0-68.266666z" /></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -3,11 +3,20 @@ import FitFullScreen from '@/components/common/FitFullScreen'
|
||||
import '@/assets/css/pages/tools-framework.scss'
|
||||
import Icon from '@ant-design/icons'
|
||||
import { toolsJsonObjects } from '@/router/tools.tsx'
|
||||
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
|
||||
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
|
||||
|
||||
const ToolsFramework: React.FC = () => {
|
||||
const hideScrollbarRef = useRef<HideScrollbarElement>(null)
|
||||
const [submenuTop, setSubmenuTop] = useState(0)
|
||||
const [submenuLeft, setSubmenuLeft] = useState(0)
|
||||
const [hideSidebar, setHideSidebar] = useState(false)
|
||||
|
||||
const switchSidebar = () => {
|
||||
setHideSidebar(!hideSidebar)
|
||||
setTimeout(() => {
|
||||
hideScrollbarRef.current?.refreshLayout()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const showSubmenu = (e: React.MouseEvent) => {
|
||||
const parentElement = e.currentTarget.parentElement
|
||||
@@ -29,8 +38,13 @@ const ToolsFramework: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<FitFullScreen className={'flex-horizontal'}>
|
||||
<div className={'left-panel'}>
|
||||
<div className={'title'}>氮工具</div>
|
||||
<div className={`left-panel${hideSidebar ? ' hide' : ''}`}>
|
||||
<div className={'title'}>
|
||||
<span className={'icon-box'} onClick={switchSidebar}>
|
||||
<Icon component={IconFatwebExpand} />
|
||||
</span>
|
||||
<span className={'text'}>氮工具</span>
|
||||
</div>
|
||||
<div style={{ marginTop: '0' }} className={'separate'} />
|
||||
<div className={'content'}>
|
||||
<ul>
|
||||
@@ -44,10 +58,12 @@ const ToolsFramework: React.FC = () => {
|
||||
}
|
||||
>
|
||||
<div className={'icon-box'}>
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={toolsJsonObjects[0].icon}
|
||||
/>
|
||||
{toolsJsonObjects[0].icon ? (
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={toolsJsonObjects[0].icon}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
<span className={'text'}>{toolsJsonObjects[0].name}</span>
|
||||
</NavLink>
|
||||
@@ -62,10 +78,12 @@ const ToolsFramework: React.FC = () => {
|
||||
}
|
||||
>
|
||||
<div className={'icon-box'}>
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={toolsJsonObjects[1].icon}
|
||||
/>
|
||||
{toolsJsonObjects[1].icon ? (
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={toolsJsonObjects[1].icon}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
<span className={'text'}>{toolsJsonObjects[1].name}</span>
|
||||
</NavLink>
|
||||
@@ -78,8 +96,8 @@ const ToolsFramework: React.FC = () => {
|
||||
<div className={'toolsMenu'}>
|
||||
<HideScrollbar
|
||||
isShowVerticalScrollbar={true}
|
||||
isShowHorizontalScrollbar={true}
|
||||
scrollbarWidth={2}
|
||||
ref={hideScrollbarRef}
|
||||
>
|
||||
<ul>
|
||||
{toolsJsonObjects.map((tool) => {
|
||||
|
||||
@@ -7,6 +7,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
|
||||
path: '',
|
||||
id: 'tools',
|
||||
component: React.lazy(() => import('@/pages/tools')),
|
||||
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
|
||||
name: '主页',
|
||||
menu: true,
|
||||
auth: false
|
||||
|
||||
Reference in New Issue
Block a user