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} collapsible width={width}>
      <Menus theme={theme} items={menus} location={location} />
    </Sider>
  )
}