diff --git a/web-react/src/views/main/_layout/header/index.jsx b/web-react/src/views/main/_layout/header/index.jsx
index 6452b78..d51fe0e 100644
--- a/web-react/src/views/main/_layout/header/index.jsx
+++ b/web-react/src/views/main/_layout/header/index.jsx
@@ -3,14 +3,41 @@ import { Layout, Badge } from 'antd'
 import { AntIcon, Container } from 'components'
 import Logo from '../logo'
 import User from './user'
+import store from 'store'
+
+const { getState, subscribe, dispatch } = store
 
 export default class index extends Component {
+
+    state = {
+        ...getState('layout')
+    }
+
+    constructor(props) {
+        super(props)
+
+        this.unsubscribe = subscribe('layout', (state) => {
+            this.setState(state)
+        })
+    }
+
+    componentWillUnmount() {
+        this.unsubscribe()
+    }
+
+    onCollapsed() {
+        dispatch({
+            type: 'TOGGLE_COLLAPSED',
+            siderCollapsed: !this.state.siderCollapsed
+        })
+    }
+
     render() {
         return (
             <Layout.Header>
                 <Container mode="fluid">
                     <div className="header-actions">
-                        <span className="header-action mr-md">
+                        <span className="header-action mr-md" onClick={() => this.onCollapsed()}>
                             <AntIcon type="menu" />
                         </span>
                         <Logo />
diff --git a/web-react/src/views/main/_layout/sider/index.jsx b/web-react/src/views/main/_layout/sider/index.jsx
index 65b26a1..ce01f66 100644
--- a/web-react/src/views/main/_layout/sider/index.jsx
+++ b/web-react/src/views/main/_layout/sider/index.jsx
@@ -3,9 +3,12 @@ import { Layout } from 'antd'
 import Swiper, { Mousewheel, Scrollbar } from 'swiper'
 import 'swiper/swiper-bundle.css'
 import Menu from './menu'
+import store from 'store'
 
 Swiper.use([Mousewheel, Scrollbar])
 
+const { getState, subscribe } = store
+
 let timer,
     swiper
 
@@ -31,7 +34,17 @@ const UpdateSwiper = () => {
 
 export default class index extends Component {
 
-    state = {}
+    state = {
+        ...getState('layout')
+    }
+
+    constructor(props) {
+        super(props)
+
+        this.unsubscribe = subscribe('layout', (state) => {
+            this.setState(state)
+        })
+    }
 
     componentDidMount() {
         swiper = new Swiper('#layout--swiper-container', siderSwiperOptions)
@@ -41,6 +54,10 @@ export default class index extends Component {
         })
     }
 
+    componentWillUnmount() {
+        this.unsubscribe()
+    }
+
     updateSwiper() {
         UpdateSwiper()
     }
@@ -52,7 +69,11 @@ export default class index extends Component {
 
     render() {
         return (
-            <Layout.Sider className="yo-layout-sider" width="200" collapsed={false}>
+            <Layout.Sider
+                className="yo-layout-sider"
+                width="200"
+                collapsed={this.state.siderCollapsed || false}
+            >
                 <div className="yo-sider-nav">
                     <div className="swiper-container" id="layout--swiper-container">
                         <div className="swiper-wrapper">