import React, { useMemo } from 'react';
import { Layout, Spin } from 'antd';
import { getPropertyValue } from '@/utils/css';
import Menus from './Menus';

const { Sider } = Layout;


export default (props) => {
  const { theme, location, menus } = props;

  const width = useMemo(() => {
    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0;
  }, []);


  return (
    <Sider className='layout-sidebar' theme={theme} defaultCollapsed collapsible width={width}>
      <Menus theme={theme} items={menus} location={location} />
    </Sider>
  );
}