Skip to content

X
xiaomai-cloud-class-web
Commit c075c9c0 by zhangleyuan
Options

feat:调整左侧栏的样式

parent 08b6b5ad
Showing with 18 additions and 15 deletions
src/modules/root/Main.jsx
import React , { useContext, useEffect ,useState}from 'react' import React , { useContext, useEffect ,useState}from 'react'
import './Main.less'; import './Main.less';
import { MainRoutes } from '@/routes'; import { MainRoutes } from '@/routes';
function Main(){
const [menuType,setMenuType] = useState(1); function Main(props){
const {menuType} = props
return ( return (
<div <div
className={menuType ? `right-container has-nav` : `right-container has-nav right-container-vertical`} className={menuType ? `right-container has-nav` : `right-container has-nav right-container-vertical`}
......
src/modules/root/Menu.tsx
...@@ -38,12 +38,12 @@ function Aside(props: any) { ...@@ -38,12 +38,12 @@ function Aside(props: any) {
} }
return ( return (
<div <div
id="left-container" id="left-container"
className={ className={
menuType menuType
? "left-container" ? "left-container"
: "left-container left-container-vertical" : "left-container left-container-vertical"
} }
> >
<div className="left"> <div className="left">
<div className="nav"> <div className="nav">
...@@ -54,10 +54,9 @@ function Aside(props: any) { ...@@ -54,10 +54,9 @@ function Aside(props: any) {
selectedKeys={selectKey} selectedKeys={selectKey}
openKeys={openKeys} openKeys={openKeys}
onOpenChange={onOpenChange} onOpenChange={onOpenChange}
mode="inline"
theme="dark" theme="dark"
inlineCollapsed={false} inlineCollapsed={false}
mode={menuType ? "inline" : "vertical"}
> >
{ {
menuList.map((item: any, index: any) => { menuList.map((item: any, index: any) => {
...@@ -67,7 +66,10 @@ function Aside(props: any) { ...@@ -67,7 +66,10 @@ function Aside(props: any) {
if (item.children) { if (item.children) {
return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div > return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div >
<span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> <span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
<span>{item.groupName}</span></div>}> {menuType &&
<span>{item.groupName}</span>
}</div>
}>
{ {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) { if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
...@@ -76,7 +78,6 @@ function Aside(props: any) { ...@@ -76,7 +78,6 @@ function Aside(props: any) {
return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index}> return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index}>
<span className="listType"></span> <span className="listType"></span>
<span className="name">{_item.groupName}</span> <span className="name">{_item.groupName}</span>
</Menu.Item> </Menu.Item>
}) })
...@@ -84,10 +85,11 @@ function Aside(props: any) { ...@@ -84,10 +85,11 @@ function Aside(props: any) {
</SubMenu> </SubMenu>
} else { } else {
return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item"> return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item">
<span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> <span style={{ marginRight: 6 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span>
<span>{item.groupName}</span> {menuType &&
<span>{item.groupName}</span>
}
</Menu.Item> </Menu.Item>
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment