62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { Container, Col, Row } from '@openedx/paragon';
|
|
|
|
import WidgetFooter from 'containers/WidgetContainers/WidgetFooter';
|
|
import hooks from './hooks';
|
|
|
|
export const columnConfig = {
|
|
courseList: {
|
|
withSidebar: {
|
|
lg: { span: 12, offset: 0 },
|
|
xl: { span: 8, offset: 0 },
|
|
},
|
|
noSidebar: {
|
|
lg: { span: 12, offset: 0 },
|
|
xl: { span: 12, offset: 0 },
|
|
},
|
|
},
|
|
sidebar: {
|
|
lg: { span: 12, offset: 0 },
|
|
xl: { span: 4, offset: 0 },
|
|
},
|
|
};
|
|
|
|
export const DashboardLayout = ({ children, sidebar: Sidebar }) => {
|
|
const {
|
|
isCollapsed,
|
|
sidebarShowing,
|
|
setSidebarShowing,
|
|
} = hooks.useDashboardLayoutData();
|
|
|
|
const courseListColumnProps = sidebarShowing
|
|
? columnConfig.courseList.withSidebar
|
|
: columnConfig.courseList.noSidebar;
|
|
|
|
return (
|
|
<Container fluid size="xl">
|
|
<Row>
|
|
<Col {...courseListColumnProps} className="course-list-column">
|
|
{children}
|
|
</Col>
|
|
<Col {...columnConfig.sidebar} className="sidebar-column">
|
|
{!isCollapsed && (<h2 className="course-list-title"> </h2>)}
|
|
<Sidebar setSidebarShowing={setSidebarShowing} />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col>
|
|
<WidgetFooter />
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
);
|
|
};
|
|
DashboardLayout.propTypes = {
|
|
children: PropTypes.node.isRequired,
|
|
sidebar: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default DashboardLayout;
|