text: import React, { Component } from 'react';
  import { Redirect, Route, Switch } from 'react-router-dom';
  import { Container } from 'reactstrap';
  
  import {
    AppBreadcrumb,
    AppFooter,
    AppHeader,
    AppSidebar,
    AppSidebarFooter,
    AppSidebarForm,
    AppSidebarHeader,
    AppSidebarMinimizer,
    AppSidebarNav,
  } from '@coreui/react';
  // sidebar nav config
  import navigation from '../../_nav';
  // routes config
  import routes from '../../routes';
  import CmsFooter from './CmsFooter';
  import CmsHeader from './CmsHeader';
  
  class CmsLayout extends Component {
    render() {
      return (
        <div className="app">
          <AppHeader fixed>
            <CmsHeader {...this.props}/>
          </AppHeader>
          <div className="app-body">
            <AppSidebar fixed display="lg">
              <AppSidebarHeader/>
              <AppSidebarForm />
              <AppSidebarNav navConfig={navigation} {...this.props} />
              <AppSidebarFooter />
              <AppSidebarMinimizer />
            </AppSidebar>
            <main className="main">
              <AppBreadcrumb appRoutes={routes}/>
              <Container fluid>
                <Switch>
                  {routes.map((route, idx) => {
                      return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                          <route.component {...props} {...this.props}/>
                        )} />)
                        : (null);
                    },
                  )}
                  <Redirect from="/" to="/tasks" />
                </Switch>
              </Container>
            </main>
          </div>
          <AppFooter>
            <CmsFooter />
          </AppFooter>
        </div>
      );
    }
  }
  
  export default CmsLayout;
  