Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
app/routes/Layouts/DragAndDropLayout/DragAndDropLayout.js Executable file
View File

@@ -0,0 +1,200 @@
import React from 'react';
import v4 from 'uuid/v4';
import _ from 'lodash';
import faker from 'faker/locale/en_US';
import {
Container,
FloatGrid as Grid,
Button,
Card,
CardHeader,
CardBody,
UncontrolledDropdown,
DropdownMenu,
DropdownToggle,
DropdownItem
} from './../../../components';
import { applyColumn } from './../../../components/FloatGrid';
import {
HeaderMain
} from './../../components/HeaderMain';
export class DragAndDropLayout extends React.Component {
constructor(props) {
super(props);
this._lastLayout = this._generateLayout();
this.state = {
layouts: this._lastLayout,
compactType: 'vertical',
fluid: false,
texts: this._generateTexts(this._lastLayout)
}
this.generateLayoutHandler = this.generateLayoutHandler.bind(this);
this.resetLayoutHandler = this.resetLayoutHandler.bind(this);
}
generateLayoutHandler() {
this._lastLayout = this._generateLayout();
this.setState({
layouts: this._lastLayout,
texts: this._generateTexts(this._lastLayout)
});
}
resetLayoutHandler() {
this.setState({
layouts: this._lastLayout
});
}
selectCompactType(compactType) {
this.setState({ compactType });
}
selectFluid(fluid) {
this.setState({ fluid });
}
render() {
const { compactType, fluid, texts } = this.state;
return (
<React.Fragment>
<Container fluid={ fluid }>
<HeaderMain title="Drag &amp; Drop Layout" className="mb-5 mt-4" />
<p>
<strong>React-Grid Layout</strong> is a grid layout system much like Packery or Gridster for React. Unlike those systems, it is responsive and supports breakpoints. These breakpoints can be provided in the same way as in Reactstrap&apos;s Grid system.
</p>
<div className="d-flex align-items-center pb-4">
<Button color="primary" onClick={ this.generateLayoutHandler }>
Generate New Layout
</Button>
<UncontrolledDropdown className="ml-2">
<DropdownToggle outline>
Change Compaction Type:&nbsp;
<strong>
{ !compactType && "No Compactions" }
{ compactType === "vertical" && "Vertical" }
{ compactType === "horizontal" && "Horizontal" }
</strong>
<i className="fa fa-angle-down ml-2" />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
active={!compactType}
onClick={() => this.selectCompactType(null)}
>
No Compactions
</DropdownItem>
<DropdownItem
active={compactType === "vertical"}
onClick={() => this.selectCompactType("vertical")}
>
Vertical
</DropdownItem>
<DropdownItem
active={compactType === "horizontal"}
onClick={() => this.selectCompactType("horizontal")}
>
Horizontal
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown className="ml-2">
<DropdownToggle outline>
Layout:&nbsp;
<strong>
{ !fluid && "Container" }
{ fluid && "Fluid" }
</strong>
<i className="fa fa-angle-down ml-2" />
</DropdownToggle>
<DropdownMenu right >
<DropdownItem
active={!fluid}
onClick={() => this.selectFluid(false)}
>
Container
</DropdownItem>
<DropdownItem
active={fluid}
onClick={() => this.selectFluid(true)}
>
Fluid
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Button color="link" className="ml-2" onClick={ this.resetLayoutHandler }>
<i className="fa fa-times-circle text-danger fa-fw mr-1" />Reset
</Button>
</div>
</Container>
<Grid
className="mt-4"
fluid={ this.state.fluid }
compactType={ compactType }
>
<Grid.Row
onLayoutChange={ layouts => this.setState({ layouts }) }
columnSizes={ this.state.layouts }
rowHeight={ 55 }
>
{
_.chain(this.state.layouts)
.keys()
.map((layoutKey) => (
<Grid.Col {...applyColumn(layoutKey, this.state.layouts)} key={ layoutKey }>
<Card>
<CardHeader className="bb-0 pt-3 pb-0 bg-none" tag="h6">
<i className="fa fa-ellipsis-v mr-2"></i> { texts[layoutKey].title }
</CardHeader>
<CardBody style={{ overflow: "hidden" }} className="pt-3">
{ texts[layoutKey].desc }
</CardBody>
</Card>
</Grid.Col>
))
.value()
}
</Grid.Row>
</Grid>
</React.Fragment>
);
}
_generateLayout = (rowsCount = 3) => {
const TOTAL_ROWS = 12;
const HEIGHT = 5;
let output = {};
for (let i = 0; i < rowsCount; i++) {
let availableRow = TOTAL_ROWS;
while (availableRow > 0) {
const newCol = availableRow < TOTAL_ROWS ? availableRow :
_.random(3, 9);
availableRow -= newCol;
output = {
...output,
[v4()]: { md: newCol, h: HEIGHT }
}
}
}
return output;
}
_generateTexts = (layouts) =>
_.mapValues(layouts, () => ({
title: faker.commerce.productName(),
desc: faker.lorem.paragraph()
}))
}

3
app/routes/Layouts/DragAndDropLayout/index.js Executable file
View File

@@ -0,0 +1,3 @@
import { DragAndDropLayout } from './DragAndDropLayout';
export default DragAndDropLayout;

123
app/routes/Layouts/NavbarOnly/NavbarOnly.js Executable file
View File

@@ -0,0 +1,123 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { withPageConfig } from
'./../../../components/Layout/withPageConfig';
import {
Container,
} from './../../../components';
class NavbarOnly extends React.Component {
static propTypes = {
pageConfig: PropTypes.object
};
componentDidMount() {
const { pageConfig } = this.props;
pageConfig.setElementsVisibility({
sidebarHidden: true
});
}
componentWillUnmount() {
const { pageConfig } = this.props;
pageConfig.setElementsVisibility({
sidebarHidden: false
});
}
render() {
return (
<Container>
<p className="mb-5 mt-3">
Welcome to the <b>&quot;Airframe&quot;</b> Admin Dashboard Theme based on <a href="https://getbootstrap.com" className="text-primary" target="_blank" rel="noopener noreferrer">Bootstrap 4.x</a> version for React called&nbsp;
<a href="https://reactstrap.github.io" className="text-primary" target="_blank" rel="noopener noreferrer">reactstrap</a> - easy to use React Bootstrap 4 components compatible with React 16+.
</p>
<section className="mb-5">
<h6>
Layouts for this framework:
</h6>
<ul className="pl-3">
<li>
<Link to="/layouts/navbar" className="text-primary">Navbar</Link>
</li>
<li>
<Link to="/layouts/sidebar" className="text-primary">Sidebar</Link>
</li>
<li>
<Link to="/layouts/sidebar-with-navbar" className="text-primary">Sidebar with Navbar</Link>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
This Starter has:
</h6>
<ul className="pl-3">
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react" className="text-primary" target="_blank" rel="noopener noreferrer">Documentation</a> - which describes how to configure this version.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/credits-react" className="text-primary" target="_blank" rel="noopener noreferrer">Credits</a> - technical details of which versions are used for this framework.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/roadmap-react" className="text-primary" target="_blank" rel="noopener noreferrer">Roadmap</a> - update for this technology for the coming months.
</li>
<li>
<b>Bugs</b> - do you see errors in this version? Please report vie email: <i>info@webkom.co</i>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Other versions for &quot;Airframe&quot;:
</h6>
<ul className="pl-3">
<li>
<a href="http://dashboards.webkom.co/jquery/airframe" className="text-primary">jQuery</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react/airframe" className="text-primary">React</a> - based on the newest <i>Reactstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react-next/airframe" className="text-primary">Next.js (React)</a> - based on the newest <i>Reactstrap</i> and <i>Next.js</i>
</li>
<li>
<a href="http://dashboards.webkom.co/angular/airframe" className="text-primary">Angular</a> - based on the newest <i>ng-bootstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/net-mvc/airframe" className="text-primary">.NET MVC</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/vue/airframe" className="text-primary">Vue.js</a> - based on the newest <i>BootstrapVue</i>
</li>
<li>
<b>Other Versions</b>, such as <i>Ruby on Rails, Ember, Laravel etc.</i>, please ask for the beta version via email: info@webkom.co
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Work Orders:
</h6>
<p>
Regarding configuration, changes under client&apos;s requirements.<br />
Pleace contact us through the <a href="http://wbkom.co/contact" className="text-primary" target="_blank" rel="noopener noreferrer">webkom.co/contact</a> website.
</p>
</section>
</Container>
);
}
}
const ExtendedNavbarOnly = withPageConfig(NavbarOnly);
export {
ExtendedNavbarOnly as NavbarOnly
};

100
app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js Executable file
View File

@@ -0,0 +1,100 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Button,
DropdownToggle,
Nav,
NavItem,
NavLink,
Avatar,
AvatarAddOn,
Navbar,
NavbarToggler,
UncontrolledDropdown,
ThemeConsumer,
} from './../../../../components';
import { randomAvatar } from './../../../../utilities';
import { NavbarActivityFeed } from
'./../../../../layout/components/NavbarActivityFeed';
import { NavbarMessages } from
'./../../../../layout/components/NavbarMessages';
import { NavbarUser } from
'./../../../../layout/components/NavbarUser';
import { DropdownProfile } from
'./../../../components/Dropdowns/DropdownProfile';
import { NavbarNavigation } from
'./../../../components/Navbars/NavbarNavigation';
import { LogoThemed } from
'./../../../components/LogoThemed/LogoThemed';
export const LayoutNavbar = () => (
<React.Fragment>
<Navbar light expand="lg" themed>
<Link to="/" className="navbar-brand mr-0 mr-sm-3">
<LogoThemed className="mb-1" checkBackground />
</Link>
<Nav pills>
<NavItem>
<NavLink tag={ NavbarToggler } id="navbar-navigation-toggler" className="b-0">
<i className="fa fa-fw fa-bars"></i>
</NavLink>
</NavItem>
</Nav>
{ /* Navigation with Collapse */ }
<NavbarNavigation pills />
{ /* END Navbar: Left Side */ }
{ /* START Navbar: Right Side */ }
<Nav className="ml-auto" pills>
<NavbarMessages />
<NavbarActivityFeed />
{ /* START Navbar: Dropdown */ }
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>
<Avatar.Image
size="sm"
src={ randomAvatar() }
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="white"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color="danger"
key="avatar-icon-fg"
/>
]}
/>
</DropdownToggle>
<DropdownProfile
right
/>
</UncontrolledDropdown>
{ /* END Navbar: Dropdown */ }
<NavbarUser className="d-none d-lg-block" />
</Nav>
{ /* END Navbar: Right Side */ }
</Navbar>
<Navbar light shadow expand="lg" className="py-3 bg-white">
<h1 className="mb-0 h4">
Navbar Only
</h1>
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } className="px-4 my-sm-0">
Download <i className="fa ml-1 fa-fw fa-download"></i>
</Button>
)
}
</ThemeConsumer>
</Navbar>
</React.Fragment>
);

6
app/routes/Layouts/NavbarOnly/index.js Executable file
View File

@@ -0,0 +1,6 @@
import { NavbarOnly } from './NavbarOnly';
import { LayoutNavbar } from './components/LayoutNavbar';
NavbarOnly.Navbar = LayoutNavbar;
export default NavbarOnly;

90
app/routes/Layouts/SidebarA/SidebarA.js Executable file
View File

@@ -0,0 +1,90 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Container,
} from './../../../components';
export const SidebarA = () => (
<Container>
<h1 className="display-4 mb-4 mt-2">Sidebar A</h1>
<p className="mb-5">
Welcome to the <b>&quot;Airframe&quot;</b> Admin Dashboard Theme based on <a href="https://getbootstrap.com" target="_blank" rel="noopener noreferrer">Bootstrap 4.x</a> version for React called&nbsp;
<a href="https://reactstrap.github.io" target="_blank" rel="noopener noreferrer">reactstrap</a> - easy to use React Bootstrap 4 components compatible with React 16+.
</p>
<section className="mb-5">
<h6>
Layouts for this framework:
</h6>
<ul className="pl-3">
<li>
<Link to="/layouts/sidebar-a">Sidebar A</Link>
</li>
<li>
<Link to="/layouts/navbar-only">Navbar Only</Link>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
This Starter has:
</h6>
<ul className="pl-3">
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react" target="_blank" rel="noopener noreferrer">Documentation</a> - which describes how to configure this version.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/credits-react" target="_blank" rel="noopener noreferrer">Credits</a> - technical details of which versions are used for this framework.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/roadmap-react" target="_blank" rel="noopener noreferrer">Roadmap</a> - update for this technology for the coming months.
</li>
<li>
<b>Bugs</b> - do you see errors in this version? Please report vie email: <i>info@webkom.co</i>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Other versions for &quot;Airframe&quot;:
</h6>
<ul className="pl-3">
<li>
<a href="http://dashboards.webkom.co/jquery/airframe">jQuery</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react/airframe">React</a> - based on the newest <i>Reactstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react-next/airframe">Next.js (React)</a> - based on the newest <i>Reactstrap</i> and <i>Next.js</i>
</li>
<li>
<a href="http://dashboards.webkom.co/angular/airframe">Angular</a> - based on the newest <i>ng-bootstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/net-mvc/airframe">.NET MVC</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/vue/airframe">Vue.js</a> - based on the newest <i>BootstrapVue</i>
</li>
<li>
<b>Other Versions</b>, such as <i>Ruby on Rails, Ember, Laravel etc.</i>, please ask for the beta version via email: info@webkom.co
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Work Orders:
</h6>
<p>
Regarding configuration, changes under client&apos;s requirements.<br />
Pleace contact us through the <a href="http://wbkom.co/contact" target="_blank" rel="noopener noreferrer">webkom.co/contact</a> website.
</p>
</section>
</Container>
);

3
app/routes/Layouts/SidebarA/index.js Executable file
View File

@@ -0,0 +1,3 @@
import { SidebarA } from './SidebarA';
export default SidebarA;

93
app/routes/Layouts/SidebarDefault/SidebarDefault.js Executable file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Container,
} from './../../../components';
export const SidebarDefault = () => (
<Container>
<h1 className="display-4 mb-4 mt-2">Sidebar &amp; Navbar</h1>
<p className="mb-5">
Welcome to the <b>&quot;Airframe&quot;</b> Admin Dashboard Theme based on <a href="https://getbootstrap.com" className="text-primary" target="_blank" rel="noopener noreferrer">Bootstrap 4.x</a> version for React called&nbsp;
<a href="https://reactstrap.github.io" className="text-primary" target="_blank" rel="noopener noreferrer">reactstrap</a> - easy to use React Bootstrap 4 components compatible with React 16+.
</p>
<section className="mb-5">
<h6>
Layouts for this framework:
</h6>
<ul className="pl-3">
<li>
<Link to="/layouts/navbar" className="text-primary">Navbar</Link>
</li>
<li>
<Link to="/layouts/sidebar" className="text-primary">Sidebar</Link>
</li>
<li>
<Link to="/layouts/sidebar-with-navbar" className="text-primary">Sidebar with Navbar</Link>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
This Starter has:
</h6>
<ul className="pl-3">
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react" className="text-primary" target="_blank" rel="noopener noreferrer">Documentation</a> - which describes how to configure this version.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/credits-react" className="text-primary" target="_blank" rel="noopener noreferrer">Credits</a> - technical details of which versions are used for this framework.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/roadmap-react" className="text-primary" target="_blank" rel="noopener noreferrer">Roadmap</a> - update for this technology for the coming months.
</li>
<li>
<b>Bugs</b> - do you see errors in this version? Please report vie email: <i>info@webkom.co</i>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Other versions for &quot;Airframe&quot;:
</h6>
<ul className="pl-3">
<li>
<a href="http://dashboards.webkom.co/jquery/airframe" className="text-primary">jQuery</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react/airframe" className="text-primary">React</a> - based on the newest <i>Reactstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react-next/airframe" className="text-primary">Next.js (React)</a> - based on the newest <i>Reactstrap</i> and <i>Next.js</i>
</li>
<li>
<a href="http://dashboards.webkom.co/angular/airframe" className="text-primary">Angular</a> - based on the newest <i>ng-bootstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/net-mvc/airframe" className="text-primary">.NET MVC</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/vue/airframe" className="text-primary">Vue.js</a> - based on the newest <i>BootstrapVue</i>
</li>
<li>
<b>Other Versions</b>, such as <i>Ruby on Rails, Ember, Laravel etc.</i>, please ask for the beta version via email: info@webkom.co
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Work Orders:
</h6>
<p>
Regarding configuration, changes under client&apos;s requirements.<br />
Pleace contact us through the <a href="http://wbkom.co/contact" className="text-primary" target="_blank" rel="noopener noreferrer">webkom.co/contact</a> website.
</p>
</section>
</Container>
);

3
app/routes/Layouts/SidebarDefault/index.js Executable file
View File

@@ -0,0 +1,3 @@
import { SidebarDefault } from './SidebarDefault';
export default SidebarDefault;

91
app/routes/Layouts/SidebarWithNavbar/SidebarWithNavbar.js Executable file
View File

@@ -0,0 +1,91 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Container,
} from './../../../components';
export const SidebarWithNavbar = () => (
<Container>
<p className="mb-4 mt-3">
Welcome to the <b>&quot;Airframe&quot;</b> Admin Dashboard Theme based on <a href="https://getbootstrap.com" className="text-primary" target="_blank" rel="noopener noreferrer">Bootstrap 4.x</a> version for React called&nbsp;
<a href="https://reactstrap.github.io" className="text-primary" target="_blank" rel="noopener noreferrer">reactstrap</a> - easy to use React Bootstrap 4 components compatible with React 16+.
</p>
<section className="mb-5">
<h6>
Layouts for this framework:
</h6>
<ul className="pl-3">
<li>
<Link to="/layouts/navbar" className="text-primary">Navbar</Link>
</li>
<li>
<Link to="/layouts/sidebar" className="text-primary">Sidebar</Link>
</li>
<li>
<Link to="/layouts/sidebar-with-navbar" className="text-primary">Sidebar with Navbar</Link>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
This Starter has:
</h6>
<ul className="pl-3">
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react" className="text-primary" target="_blank" rel="noopener noreferrer">Documentation</a> - which describes how to configure this version.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/credits-react" className="text-primary" target="_blank" rel="noopener noreferrer">Credits</a> - technical details of which versions are used for this framework.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/roadmap-react" className="text-primary" target="_blank" rel="noopener noreferrer">Roadmap</a> - update for this technology for the coming months.
</li>
<li>
<b>Bugs</b> - do you see errors in this version? Please report vie email: <i>info@webkom.co</i>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Other versions for &quot;Airframe&quot;:
</h6>
<ul className="pl-3">
<li>
<a href="http://dashboards.webkom.co/jquery/airframe" className="text-primary">jQuery</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react/airframe" className="text-primary">React</a> - based on the newest <i>Reactstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react-next/airframe" className="text-primary">Next.js (React)</a> - based on the newest <i>Reactstrap</i> and <i>Next.js</i>
</li>
<li>
<a href="http://dashboards.webkom.co/angular/airframe" className="text-primary">Angular</a> - based on the newest <i>ng-bootstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/net-mvc/airframe" className="text-primary">.NET MVC</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/vue/airframe" className="text-primary">Vue.js</a> - based on the newest <i>BootstrapVue</i>
</li>
<li>
<b>Other Versions</b>, such as <i>Ruby on Rails, Ember, Laravel etc.</i>, please ask for the beta version via email: info@webkom.co
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Work Orders:
</h6>
<p>
Regarding configuration, changes under client&apos;s requirements.<br />
Pleace contact us through the <a href="http://wbkom.co/contact" className="text-primary" target="_blank" rel="noopener noreferrer">webkom.co/contact</a> website.
</p>
</section>
</Container>
);

12
app/routes/Layouts/SidebarWithNavbar/index.js Executable file
View File

@@ -0,0 +1,12 @@
import { SidebarWithNavbar } from './SidebarWithNavbar';
import {
SidebarWithNavbarNavbar
} from './../../../layout/components/SidebarWithNavbarNavbar';
import {
DefaultSidebar
} from './../../../layout/components/DefaultSidebar';
SidebarWithNavbar.Navbar = SidebarWithNavbarNavbar;
SidebarWithNavbar.Sidebar = DefaultSidebar;
export default SidebarWithNavbar;