Init

Preview: http://dashboards.webkom.co/react/airframe

app/layout/components/DefaultNavbar.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+    Navbar,
+    Nav,
+    NavItem,
+    SidebarTrigger
+} from './../../components';
+
+import { NavbarActivityFeed } from './NavbarActivityFeed';
+import { NavbarMessages } from './NavbarMessages';
+import { NavbarUser } from './NavbarUser';
+import { LogoThemed } from './../../routes/components/LogoThemed/LogoThemed';
+
+export const DefaultNavbar = () => (
+    <Navbar light expand="xs" fluid>
+        <Nav navbar>
+            <NavItem className="mr-3">
+                <SidebarTrigger/>
+            </NavItem>
+            <NavItem className="navbar-brand d-lg-none">
+                <Link to="/">
+                    <LogoThemed />
+                </Link>
+            </NavItem>
+            <NavItem className="d-none d-md-block">
+                <span className="navbar-text">
+                    <Link to="/">
+                        <i className="fa fa-home"></i>
+                    </Link>
+                </span>
+                <span className="navbar-text px-2">
+                    <i className="fa fa-angle-right"></i>
+                </span>
+                <span className="navbar-text">
+                    <Link to="/">Start</Link>
+                </span>
+                <span className="navbar-text px-2">
+                    <i className="fa fa-angle-right"></i>
+                </span>
+                <span className="navbar-text">
+                    Page Link
+                </span>
+            </NavItem>
+        </Nav>
+        <Nav navbar className="ml-auto">
+            <NavbarActivityFeed />
+            <NavbarMessages className="ml-2" />
+            <NavbarUser className="ml-2" />
+        </Nav>
+    </Navbar>
+);

app/layout/components/DefaultSidebar.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+    Sidebar,
+    SidebarTrigger,
+} from './../../components';
+
+import { SidebarMiddleNav } from './SidebarMiddleNav';
+
+import { SidebarTopA } from '../../routes/components/Sidebar/SidebarTopA'
+import { SidebarBottomA } from '../../routes/components/Sidebar/SidebarBottomA'
+import { LogoThemed } from '../../routes/components/LogoThemed/LogoThemed';
+
+export const DefaultSidebar = () => (
+    <Sidebar>
+        { /* START SIDEBAR-OVERLAY: Close (x) */ }
+        <Sidebar.Close>
+            <SidebarTrigger tag={ 'a' } href="javascript:;">
+                <i className="fa fa-times-circle fa-fw"></i>
+            </SidebarTrigger>
+        </Sidebar.Close>
+        { /* START SIDEBAR-OVERLAY: Close (x) */ }
+        
+        { /* START SIDEBAR: Only for Desktop */ }
+        <Sidebar.HideSlim>
+            <Sidebar.Section>
+                <Link to="/" className="sidebar__brand">
+                    <LogoThemed checkBackground />
+                </Link>
+            </Sidebar.Section>
+        </Sidebar.HideSlim>
+        { /* END SIDEBAR: Only for Desktop */ }
+
+        { /* START SIDEBAR: Only for Mobile */ }
+        <Sidebar.MobileFluid>
+            <SidebarTopA />
+            
+            <Sidebar.Section fluid cover>
+                { /* SIDEBAR: Menu */ }
+                <SidebarMiddleNav />
+            </Sidebar.Section>
+
+            <SidebarBottomA />
+        </Sidebar.MobileFluid>
+        { /* END SIDEBAR: Only for Mobile */ }
+    </Sidebar>
+);

app/layout/components/NavbarActivityFeed.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import faker from 'faker/locale/en_US';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+
+import {
+    UncontrolledDropdown,
+    DropdownToggle,
+    IconWithBadge,
+    Badge,
+    ExtendedDropdown,
+    ListGroup,
+    ListGroupItem,
+    Media
+} from './../../components';
+
+/*eslint-disable */
+const activityFeedIcons = [
+    <span className="fa-stack fa-lg fa-fw d-flex mr-3">
+        <i className="fa fa-circle fa-fw fa-stack-2x text-success"></i>
+        <i className="fa fa-check fa-stack-1x fa-fw text-white"></i>
+    </span>,
+    <span className="fa-stack fa-lg fa-fw d-flex mr-3">
+        <i className="fa fa-circle fa-fw fa-stack-2x text-danger"></i>
+        <i className="fa fa-close fa-stack-1x fa-fw text-white"></i>
+    </span>,
+    <span className="fa-stack fa-lg fa-fw d-flex mr-3">
+        <i className="fa fa-circle fa-fw fa-stack-2x text-warning"></i>
+        <i className="fa fa-exclamation fa-stack-1x fa-fw text-white"></i>
+    </span>,
+    <span className="fa-stack fa-lg fa-fw d-flex mr-3">
+        <i className="fa fa-circle fa-fw fa-stack-2x text-primary"></i>
+        <i className="fa fa-info fa-stack-1x fa-fw text-white"></i>
+    </span>
+];
+/*eslint-enable */
+
+const NavbarActivityFeed = (props) => (
+    <UncontrolledDropdown nav inNavbar { ...props }>
+        <DropdownToggle nav>
+            <IconWithBadge
+                badge={ <Badge pill color="primary">6</Badge> }
+            >
+                <i className="fa fa-bell-o fa-fw" />
+            </IconWithBadge>
+        </DropdownToggle>
+        <ExtendedDropdown right>
+            <ExtendedDropdown.Section className="d-flex justify-content-between align-items-center">
+                <h6 className="mb-0">Activity Feed</h6>
+                <Badge pill>4</Badge>
+            </ExtendedDropdown.Section>
+
+            <ExtendedDropdown.Section list>
+                <ListGroup>
+                {
+                    _.times(7, (index) => (
+                        <ListGroupItem key={ index } action>
+                            <Media>
+                                <Media left>
+                                    { activityFeedIcons[index%4] }
+                                </Media>
+                                <Media body>
+                                    <span className="h6">
+                                        { faker.name.firstName() } { faker.name.lastName() }
+                                    </span> changed Description to &quot;{ faker.random.words() }&quot;
+                                    <p className="mt-2 mb-1">
+                                        { faker.lorem.sentence() }
+                                    </p>
+                                    <div className="small mt-2">
+                                        { faker.date.past().toString() }
+                                    </div>
+                                </Media>
+                            </Media>
+                        </ListGroupItem>
+                    ))
+                }
+                </ListGroup>
+            </ExtendedDropdown.Section>
+
+            <ExtendedDropdown.Section className="text-center" tag={ Link} to="/apps/widgets">
+                See All Notifications
+                <i className="fa fa-angle-right fa-fw ml-2" />
+            </ExtendedDropdown.Section>
+        </ExtendedDropdown>
+    </UncontrolledDropdown>
+);
+NavbarActivityFeed.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object
+};
+
+export { NavbarActivityFeed };

app/layout/components/NavbarMessages.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+
+import {
+    Avatar,
+    UncontrolledDropdown,
+    DropdownToggle,
+    IconWithBadge,
+    Badge,
+    ExtendedDropdown,
+    ListGroup,
+    ListGroupItem,
+    Media,
+    InputGroup,
+    Input,
+    InputGroupAddon,
+    Button
+} from './../../components';
+
+const messagesColors = [
+    "text-success",
+    "text-danger",
+    "text-warning"
+];
+
+const NavbarMessages = (props) => (
+    <UncontrolledDropdown nav inNavbar { ...props }>
+        <DropdownToggle nav>
+            <IconWithBadge
+                badge={ <Badge pill color="secondary">6</Badge> }
+            >
+                <i className="fa fa-envelope-o fa-fw" />
+            </IconWithBadge>
+        </DropdownToggle>
+        <ExtendedDropdown right>
+            <ExtendedDropdown.Section className="d-flex justify-content-between align-items-center">
+                <h6 className="mb-0">Messages</h6>
+                <ExtendedDropdown.Link to="/apps/new-email">
+                    <i className="fa fa-pencil" />
+                </ExtendedDropdown.Link>
+            </ExtendedDropdown.Section>
+            <ExtendedDropdown.Section>
+                <InputGroup>
+                    <Input placeholder="Search Messages..." />
+                    <InputGroupAddon addonType="append">
+                        <Button color="secondary" outline>
+                            <i className="fa fa-search" />
+                        </Button>
+                    </InputGroupAddon>
+                </InputGroup>
+            </ExtendedDropdown.Section>
+
+            <ExtendedDropdown.Section list>
+                <ListGroup>
+                {
+                    _.times(3, (index) => (
+                        <ListGroupItem tag={ ExtendedDropdown.Link } to="/apps/email-details" key={ index } action>
+                            <Media>
+                                <Media left>
+                                    <Avatar.Image
+                                        src={ faker.image.avatar() }
+                                        className='mr-4'
+                                    />
+                                </Media>
+                                <Media body>
+                                    <span className="d-flex justify-content-start">
+                                        <i
+                                            className={`fa fa-circle small ${messagesColors[index]} mr-2 d-flex align-items-center`}
+                                        />
+                                        <span className="h6 pb-0 mb-0 d-flex align-items-center">
+                                            { faker.name.firstName() } { faker.name.lastName() }
+                                        </span>
+                                        
+                                        <span className="ml-1 small">(23)</span>
+                                        <span className="ml-auto small">Now</span>
+                                    </span>
+                                    <p className="mt-2 mb-1">
+                                        { faker.lorem.sentences() }
+                                    </p>
+                                </Media>
+                            </Media>
+                        </ListGroupItem>
+                    ))
+                }
+                </ListGroup>
+            </ExtendedDropdown.Section>
+
+            <ExtendedDropdown.Section className="text-center" tag={ ExtendedDropdown.Link } to="/apps/inbox">
+                View All
+                <i className="fa fa-angle-right fa-fw ml-2" />
+            </ExtendedDropdown.Section>
+        </ExtendedDropdown>
+    </UncontrolledDropdown>
+);
+NavbarMessages.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object
+};
+
+export { NavbarMessages };

app/layout/components/NavbarUser.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import {
+    NavItem,
+    NavLink
+} from './../../components';
+
+const NavbarUser = (props) => (
+    <NavItem { ...props }>
+        <NavLink tag={ Link } to="/pages/login">
+            <i className="fa fa-power-off"></i>
+        </NavLink>
+    </NavItem>
+);
+NavbarUser.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object
+};
+
+export { NavbarUser };

app/layout/components/SidebarANavbar.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+    Navbar,
+    Nav,
+    NavItem,
+    SidebarTrigger
+} from './../../components';
+
+import { NavbarActivityFeed } from './NavbarActivityFeed';
+import { NavbarMessages } from './NavbarMessages';
+import { NavbarUser } from './NavbarUser';
+
+export const SidebarANavbar = () => (
+    <Navbar light expand="xs" fluid>
+        <Nav navbar>
+            <NavItem className="mr-3">
+                <SidebarTrigger/>
+            </NavItem>
+            <NavItem className="navbar-brand h5 mb-0 d-lg-none">
+                <Link to="/">
+                    react.bs4
+                </Link>
+            </NavItem>
+        </Nav>
+        <Nav navbar className="ml-auto">
+            <NavbarActivityFeed />
+            <NavbarMessages className="ml-2" />
+            <NavbarUser className="ml-2" />
+        </Nav>
+    </Navbar>
+);

app/layout/components/SidebarASidebar.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {
+    Sidebar,
+    SidebarTrigger
+} from './../../components';
+
+import { SidebarMiddleNav } from './SidebarMiddleNav';
+
+import { SidebarTopB } from '../../routes/components/Sidebar/SidebarTopB'
+import { SidebarBottomB } from '../../routes/components/Sidebar/SidebarBottomB'
+
+export const SidebarASidebar = () => (
+    <Sidebar>
+        { /* START SIDEBAR-OVERLAY: Close (x) */ }
+        <Sidebar.Close>
+            <SidebarTrigger tag={ 'a' } href="javascript:;">
+                <i className="fa fa-times-circle fa-fw"></i>
+            </SidebarTrigger>
+        </Sidebar.Close>
+        { /* END SIDEBAR-OVERLAY: Close (x) */ }
+
+        { /* START SIDEBAR: Fixed Section */ }
+        <Sidebar.Section>
+            <SidebarTopB />
+        </Sidebar.Section>
+        { /* END SIDEBAR: Fixed Section */ }
+
+        { /* START SIDEBAR: Mobile Scroll Wrapper */ }
+        <Sidebar.MobileFluid>
+            { /* START SIDEBAR: Everywhere */ }
+            <Sidebar.Section fluid cover>
+                { /* SIDEBAR: Menu */ }
+                <SidebarMiddleNav />
+            </Sidebar.Section>
+            { /* END SIDEBAR: Everywhere */ }
+            <SidebarBottomB />
+        </Sidebar.MobileFluid>
+        { /* END SIDEBAR: Mobile Scroll Wrapper */ }
+
+    </Sidebar>
+);

app/layout/components/SidebarMiddleNav.js

@@ -0,0 +1,192 @@
+import React from 'react';
+
+import { SidebarMenu } from './../../components';
+
+export const SidebarMiddleNav = () => (
+    <SidebarMenu>
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-home"></i>}
+            title="Dashboards"
+        >
+            <SidebarMenu.Item title="Analytics" to='/dashboards/analytics' exact />
+            <SidebarMenu.Item title="Projects" to='/dashboards/projects' exact />
+            <SidebarMenu.Item title="System" to='/dashboards/system' exact />
+            <SidebarMenu.Item title="Monitor" to='/dashboards/monitor' exact />
+            <SidebarMenu.Item title="Financial" to='/dashboards/financial' exact />
+            <SidebarMenu.Item title="Stock" to='/dashboards/stock' exact />
+            <SidebarMenu.Item title="Reports" to='/dashboards/reports' exact />
+        </SidebarMenu.Item>
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-th"></i>}
+            title="Widgets"
+            to='/widgets'
+        />
+        { /* -------- Cards ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-clone"></i>}
+            title="Cards"
+        >
+            <SidebarMenu.Item title="Cards" to='/cards/cards' exact />
+            <SidebarMenu.Item title="Cards Headers" to='/cards/cardsheaders' exact />
+        </SidebarMenu.Item>
+        { /* -------- Layouts ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-columns"></i>}
+            title="Layouts"
+        >
+            <SidebarMenu.Item title="Navbar" to='/layouts/navbar' exact />
+            <SidebarMenu.Item title="Sidebar" to='/layouts/sidebar' exact />
+            <SidebarMenu.Item title="Sidebar A" to='/layouts/sidebar-a' exact />
+            <SidebarMenu.Item title="Sidebar With Navbar" to="/layouts/sidebar-with-navbar" exact />
+            <SidebarMenu.Item title="Drag &amp; Drop" to='/layouts/dnd-layout' exact />
+        </SidebarMenu.Item>
+        { /* -------- Interface ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-toggle-on"></i>}
+            title="Interface"
+        >
+            <SidebarMenu.Item title="Colors" to='/interface/colors' />
+            <SidebarMenu.Item title="Typography" to='/interface/typography' />
+            <SidebarMenu.Item title="Buttons" to='/interface/buttons' />
+            <SidebarMenu.Item title="Paginations" to='/interface/paginations' />
+            <SidebarMenu.Item title="Images" to='/interface/images' />
+            <SidebarMenu.Item title="Avatars" to='/interface/avatars' />
+            <SidebarMenu.Item title="Progress Bars" to='/interface/progress-bars' />
+            <SidebarMenu.Item title="Badges &amp; Labels" to='/interface/badges-and-labels' />
+            <SidebarMenu.Item title="Media Objects" to='/interface/media-objects' />
+            <SidebarMenu.Item title="List Groups" to='/interface/list-groups' />
+            <SidebarMenu.Item title="Alerts" to='/interface/alerts' />
+            <SidebarMenu.Item title="Accordions" to='/interface/accordions' />
+            <SidebarMenu.Item title="Tabs Pills" to='/interface/tabs-pills' />
+            <SidebarMenu.Item title="Tooltips &amp; Popovers" to='/interface/tooltips-and-popovers' />
+            <SidebarMenu.Item title="Dropdowns" to='/interface/dropdowns' />
+            <SidebarMenu.Item title="Modals" to='/interface/modals' />
+            <SidebarMenu.Item title="Breadcrumbs" to='/interface/breadcrumbs' />
+            <SidebarMenu.Item title="Navbars" to='/interface/navbars' />
+            <SidebarMenu.Item title="Notifications" to='/interface/notifications' />
+            <SidebarMenu.Item title="Crop Image" to='/interface/crop-image' />
+            <SidebarMenu.Item title="Drag &amp; Drop Elements" to='/interface/drag-and-drop-elements' />
+            <SidebarMenu.Item title="Calendar" to='/interface/calendar' />
+        </SidebarMenu.Item>
+        { /* -------- Graphs ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-pie-chart"></i>}
+            title="Graphs"
+        >
+            <SidebarMenu.Item title="ReCharts" to='/graphs/re-charts' />
+        </SidebarMenu.Item>
+        { /* -------- Forms ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-check-square-o"></i>}
+            title="Forms"
+        >
+            <SidebarMenu.Item title="Forms" to='/forms/forms' />
+            <SidebarMenu.Item title="Forms Layouts" to='/forms/forms-layouts' />
+            <SidebarMenu.Item title="Input Groups" to='/forms/input-groups' />
+            <SidebarMenu.Item title="Wizard" to='/forms/wizard' />
+            <SidebarMenu.Item title="Text Mask" to='/forms/text-mask' />
+            <SidebarMenu.Item title="Typeahead" to='/forms/typeahead' />
+            <SidebarMenu.Item title="Toggles" to='/forms/toggles' />
+            <SidebarMenu.Item title="Editor" to='/forms/editor' />
+            <SidebarMenu.Item title="Date Picker" to='/forms/date-picker' />
+            <SidebarMenu.Item title="Dropzone" to='/forms/dropzone' />
+            <SidebarMenu.Item title="Sliders" to='/forms/sliders' />
+        </SidebarMenu.Item>
+        { /* -------- Tables ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-trello"></i>}
+            title="Tables"
+        >
+            <SidebarMenu.Item title="Tables" to='/tables/tables' />
+            <SidebarMenu.Item title="Extended Tables" to='/tables/extended-table' />
+            <SidebarMenu.Item title="AgGrid" to='/tables/ag-grid' />
+        </SidebarMenu.Item>
+        { /* -------- Apps ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-mouse-pointer"></i>}
+            title="Apps"
+        >
+            <SidebarMenu.Item title="Projects">
+                <SidebarMenu.Item title="Projects List" to="/apps/projects/list" />
+                <SidebarMenu.Item title="Projects Grid" to="/apps/projects/grid" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Tasks">
+                <SidebarMenu.Item title="Tasks List" to="/apps/tasks/list" />
+                <SidebarMenu.Item title="Tasks Grid" to="/apps/tasks/grid" />
+                <SidebarMenu.Item title="Tasks Kanban" to="/apps/tasks-kanban" />
+                <SidebarMenu.Item title="Tasks Details" to="/apps/task-details" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Files">
+                <SidebarMenu.Item title="Files List" to="/apps/files/list" />
+                <SidebarMenu.Item title="Files Grid" to="/apps/files/grid" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Search Results">
+                <SidebarMenu.Item title="Search Results" to="/apps/search-results" />
+                <SidebarMenu.Item title="Images Results" to="/apps/images-results" />
+                <SidebarMenu.Item title="Videos Results" to="/apps/videos-results" />
+                <SidebarMenu.Item title="Users Results" to="/apps/users-results" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Users">
+                <SidebarMenu.Item title="Users List" to="/apps/users/list" />
+                <SidebarMenu.Item title="Users Grid" to="/apps/users/grid" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Gallery">
+                <SidebarMenu.Item title="Gallery Grid" to="/apps/gallery-grid" />
+                <SidebarMenu.Item title="Gallery Table" to="/apps/gallery-table" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Mailbox">
+                <SidebarMenu.Item title="Inbox" to="/apps/inbox" />
+                <SidebarMenu.Item title="New Email" to="/apps/new-email" />
+                <SidebarMenu.Item title="Email Details" to="/apps/email-details" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Profile">
+                <SidebarMenu.Item title="Profile Details" to="/apps/profile-details" />
+                <SidebarMenu.Item title="Profile Edit" to="/apps/profile-edit" />
+                <SidebarMenu.Item title="Account Edit" to="/apps/account-edit" />
+                <SidebarMenu.Item title="Billing Edit" to="/apps/billing-edit" />
+                <SidebarMenu.Item title="Settings Edit" to="/apps/settings-edit" />
+                <SidebarMenu.Item title="Sessions Edit" to="/apps/sessions-edit" />
+            </SidebarMenu.Item>
+            <SidebarMenu.Item title="Clients" to="/apps/clients" exact />
+            <SidebarMenu.Item title="Chat" to="/apps/chat" exact />
+        </SidebarMenu.Item>
+        { /* -------- Pages ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-copy"></i>}
+            title="Pages"
+        >
+            <SidebarMenu.Item title="Register" to="/pages/register" />
+            <SidebarMenu.Item title="Login" to="/pages/login" />
+            <SidebarMenu.Item title="Forgot Password" to="/pages/forgot-password" />
+            <SidebarMenu.Item title="Lock Screen" to="/pages/lock-screen" />
+            <SidebarMenu.Item title="Error 404" to="/pages/error-404" />
+            <SidebarMenu.Item title="Confirmation" to="/pages/confirmation" />
+            <SidebarMenu.Item title="Success" to="/pages/success" />
+            <SidebarMenu.Item title="Danger" to="/pages/danger" />
+            <SidebarMenu.Item title="Coming Soon" to="/pages/coming-soon" />
+            <SidebarMenu.Item title="Timeline" to="/pages/timeline" />
+        </SidebarMenu.Item>
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-star-o"></i>}
+            title="Icons"
+            to='/icons'
+        />
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-bookmark-o"></i>}
+            title="Docs"
+            href='https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react'
+        />
+        { /* -------- Versions ---------*/ }
+        <SidebarMenu.Item
+            icon={<i className="fa fa-fw fa-folder-open-o"></i>}
+            title="Versions"
+        >
+            <SidebarMenu.Item title="NextJS (React)" href='http://airframe.nextjs.webkom.co/' />
+            <SidebarMenu.Item title="React" href='http://dashboards.webkom.co/react/airframe' />
+            <SidebarMenu.Item title="jQuery" to="http://dashboards.webkom.co/jquery/airframe/" />
+            <SidebarMenu.Item title="Vue" to="http://dashboards.webkom.co/vue/airframe" />
+            <SidebarMenu.Item title="Angular" to="http://dashboards.webkom.co/angular/airframe" />
+            <SidebarMenu.Item title=".NET MVC" to="http://dashboards.webkom.co/net-mvc/airframe" />
+        </SidebarMenu.Item>
+    </SidebarMenu >
+);

app/layout/components/SidebarWithNavbarNavbar.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+    Navbar,
+    Nav,
+    NavItem,
+    NavLink,
+    NavbarToggler,
+    UncontrolledCollapse,
+    SidebarTrigger,
+    ThemeConsumer
+} from './../../components';
+
+import { NavbarActivityFeed } from './NavbarActivityFeed';
+import { NavbarMessages } from './NavbarMessages';
+import { NavbarUser } from './NavbarUser';
+import { LogoThemed } from './../../routes/components/LogoThemed/LogoThemed';
+
+export const SidebarWithNavbarNavbar = () => (
+    <ThemeConsumer>
+    {
+        ({ color }) => (
+            <React.Fragment>
+                { /*    First Navbar    */}
+                <Navbar
+                    light
+                    expand
+                    fluid
+                    className="bg-white pb-0 pb-lg-2"
+                >
+                    <Nav navbar>
+                        <NavItem>
+                            <SidebarTrigger/>
+                        </NavItem>
+                        <NavItem className="navbar-brand d-lg-none">
+                            <Link to="/">
+                                <LogoThemed />
+                            </Link>
+                        </NavItem>
+                    </Nav>
+
+                    <h1
+                        className="h5 mb-0 mr-auto ml-2 d-none d-lg-block"
+                    >
+                        Sidebar with Navbar
+                    </h1>
+
+                    <Nav navbar className="ml-auto">
+                        <NavbarActivityFeed />
+                        <NavbarMessages className="ml-2" />
+                        <NavbarUser className="ml-2" />
+                    </Nav>
+                </Navbar>
+                { /*    Second Navbar    */}
+                <Navbar
+                    shadow
+                    expand="lg"
+                    light
+                    color={ color }
+                    fluid
+                    className="pt-0 pt-lg-2"
+                >
+                    <h1 className="h5 mb-0 py-2 mr-auto d-lg-none">
+                        Sidebar with Navbar
+                    </h1>
+
+                    <UncontrolledCollapse navbar toggler="#navbar-navigation-toggler">
+                        <Nav accent navbar>
+                            <NavItem>
+                                <NavLink
+                                    active
+                                    tag={ Link }
+                                    to="/layouts/sidebar-with-navbar"
+                                >
+                                    Preview
+                                </NavLink>
+                            </NavItem>
+                            <NavItem>
+                                <NavLink href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react">
+                                    Docs
+                                </NavLink>
+                            </NavItem>
+                            <NavItem>
+                                <NavLink href="https://github.com/0wczar/react-dashboards">
+                                    Code
+                                </NavLink>
+                            </NavItem>
+                            <NavItem>
+                                <NavLink href="http://www.webkom.co/contact/">
+                                    Buy
+                                </NavLink>
+                            </NavItem>
+                        </Nav>
+                    </UncontrolledCollapse>
+
+                    <Nav navbar pills className="ml-auto">
+                        <NavItem>
+                            <NavLink tag={ NavbarToggler } id="navbar-navigation-toggler" className="b-0">
+                                <i className="fa fa-ellipsis-h fa-fw"></i>
+                            </NavLink>
+                        </NavItem>
+                    </Nav>
+                </Navbar>
+            </React.Fragment>
+        )
+    }
+    </ThemeConsumer>
+);