修改导航

src/components/app/App.jsx

@@ -19,6 +19,9 @@ class App extends Component {
     super();
     this.state = {
       current: 'schema',
+        menuLevel1:"cloud-function",
+        menuLevel2:"schema",
+        sideBar:"trial-case",
       userID: '',
       hasLogin: false,
       user: {
@@ -39,6 +42,13 @@ class App extends Component {
     });
   };
 
+    switchMenu = (menuName,e) => {
+      console.log('menuName',menuName,'e',e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
   login = (id) => {
     const GET_USER = gql`
         query USER($id: ID!) {
@@ -100,13 +110,14 @@ class App extends Component {
             <Menu
                 theme="dark"
                 mode="horizontal"
-                defaultSelectedKeys={['1']}
+                defaultSelectedKeys={['Cloud Function']}
                 style={{ lineHeight: '64px' }}
+                onClick={(e)=>this.switchMenu('menuLevel1',e)}
             >
-              <Menu.Item key="1">cloud function</Menu.Item>
-              <Menu.Item key="2">data storage</Menu.Item>
-              <Menu.Item key="3">data analysis</Menu.Item>
-              <Menu.Item key="4">monitor notification</Menu.Item>
+              <Menu.Item key="cloud-function">Cloud Function</Menu.Item>
+              <Menu.Item key="data-storage">Data Storage</Menu.Item>
+              <Menu.Item key="data-analysis">Data Analysis</Menu.Item>
+              <Menu.Item key="monitor-notification">Monitor Notification</Menu.Item>
             </Menu>
             <div className='login'>
                 {
@@ -145,27 +156,70 @@ class App extends Component {
                   mode="inline"
                   defaultSelectedKeys={['1']}
                   defaultOpenKeys={['sub1']}
+                  onClick={(e)=>this.switchMenu('sideBar',e)}
+                  selectedKeys={[this.state.sideBar]}
                   style={{  borderRight: 0,overflow: 'auto',
                       height: '100vh',
                       left: '0',
                       width: '200px',
                       position: 'fixed'}}
               >
-                <SubMenu
-                    key="sub1"
-                    title={<span><Icon type="appstore" theme="twoTone" /><span>trial case</span></span>}
-                >
+                <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone" /><span>Trial Case</span></span>}>
                   <Menu.Item key="1">e-commerce</Menu.Item>
                   <Menu.Item key="2">keep accounts</Menu.Item>
                   <Menu.Item key="3">appointment</Menu.Item>
                 </SubMenu>
-                <SubMenu key="sub2" title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
-                  <Menu.Item key="4">option5</Menu.Item>
-                  <Menu.Item key="5">option6</Menu.Item>
-                  <Menu.Item key="6">option7</Menu.Item>
-                  <Menu.Item key="7">option8</Menu.Item>
-                </SubMenu>
-                <SubMenu key="sub3" title={<span><Icon type="user" theme="outlined" /><span>My create</span></span>}>
+                  {(() => {
+                      switch (this.state.menuLevel1) {
+                          case 'cloud-function':
+                              return (
+                                  <SubMenu
+                                      key="cloud-function"
+                                      title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
+                                    <Menu.Item key="wechat-service">wechat-service</Menu.Item>
+                                    <Menu.Item key="graphql-service">graphql-service</Menu.Item>
+                                    <Menu.Item key="quantization-service">quantization-service</Menu.Item>
+                                  </SubMenu>
+                                  );
+                          case 'data-storage':
+                              return (
+                                  <SubMenu
+                                      key="data-storage"
+                                      title={<span><Icon type="database" theme="twoTone" /><span>Data Storage</span></span>}>
+                                    <Menu.Item key="snbl-mongo">snbl-mongo</Menu.Item>
+                                  </SubMenu>
+                              );
+                          case 'data-analysis':
+                              return (
+                                  <SubMenu
+                                      key="data-analysis"
+                                      title={<span><Icon type="fund" theme="twoTone" /><span>data Analysis</span></span>}>
+                                    <Menu.Item key="metabase">metabase</Menu.Item>
+                                  </SubMenu>
+                              );
+                          case 'monitor-notification':
+                              return (
+                                  <SubMenu
+                                      key="monitor-notification"
+                                      title={<span><Icon type="alert" theme="twoTone" /><span>Monitor Notification</span></span>}>
+                                    <Menu.Item key="monitor">monitor</Menu.Item>
+                                    <Menu.Item key="graphql-events">graphql-events</Menu.Item>
+                                    <Menu.Item key="stock-signal">stock-signal</Menu.Item>
+                                  </SubMenu>
+                              );
+                          default:
+                              return (
+                                  <SubMenu
+                                      key="cloud-function"
+                                      title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
+                                    <Menu.Item key="wechat-service">wechat-service</Menu.Item>
+                                    <Menu.Item key="graphql-service">graphql-service</Menu.Item>
+                                    <Menu.Item key="quantization-service">quantization-service</Menu.Item>
+                                  </SubMenu>
+                              );
+                      }
+                  })()}
+                <SubMenu key="my-create" title={<span><Icon type="user" theme="outlined" /><span>My Create</span></span>}>
                   <Menu.Item key="8">option9</Menu.Item>
                   <Menu.Item key="9">option10</Menu.Item>
                   <Menu.Item key="10">option11</Menu.Item>