import React from "react";
import { connect } from "react-redux";
import { Layout } from "antd";
import Logo from "./Logo";
import Menu from "./Menu";
const packageInfo = require('../../../../package.json');
const { Sider } = Layout;

const LayoutSider = (props) => {
  const { sidebarCollapsed, sidebarLogo } = props;
  return (
    <div style={{ position:'relative'}}>
      <Sider
        collapsible
        collapsed={sidebarCollapsed}
        trigger={null}
        style={{ zIndex: "10",height:'100%' }}
      >
        {sidebarLogo ? <Logo /> : null}
        <Menu />
        <div style={{ display:'flex',position:'absolute',justifyContent:'flex-start',paddingLeft:'25px',
                      zIndex: "10",color:'rgba(255, 255, 255, 0.65)',width:'100%',height:'40px',alignItems:'center',fontSize:'14px'
        }}>{`当前版本 v${packageInfo.version}`}</div>
      </Sider>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    ...state.app,
    ...state.settings,
  };
};
export default connect(mapStateToProps)(LayoutSider);
