Init

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

app/components/Sidebar/Sidebar.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import OuterClick from './../OuterClick';
+import { withPageConfig } from './../Layout';
+import { SidebarContent } from './SidebarContent';
+
+const Sidebar = (props) => (
+    <React.Fragment>
+        { /* Enable OuterClick only in sidebar overlay mode */}
+        <OuterClick
+            active={
+                !props.pageConfig.sidebarCollapsed && (
+                    props.pageConfig.screenSize === 'xs' ||
+                    props.pageConfig.screenSize === 'sm' ||
+                    props.pageConfig.screenSize === 'md'
+                )
+            }
+            onClickOutside={ () => props.pageConfig.toggleSidebar() }
+        >
+            <SidebarContent { ...props } />
+        </OuterClick>
+    </React.Fragment>
+);
+
+Sidebar.propTypes = {
+    children: PropTypes.node,
+    slim: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    animationsDisabled: PropTypes.bool,
+    pageConfig: PropTypes.object
+};
+
+const cfgSidebar = withPageConfig(Sidebar);
+
+export {
+    cfgSidebar as Sidebar
+};

app/components/Sidebar/SidebarClose.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SidebarClose = (props) => (
+    <div className="sidebar__close">
+        { props.children }
+    </div>
+);
+SidebarClose.propTypes = {
+    children: PropTypes.node
+};
+
+export { SidebarClose };

app/components/Sidebar/SidebarContent.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Common from './../../common';
+
+export class SidebarContent extends React.Component {
+    static propTypes = {
+        children: PropTypes.node,
+        slim: PropTypes.bool,
+        collapsed: PropTypes.bool,
+        animationsDisabled: PropTypes.bool,
+        pageConfig: PropTypes.object
+    }
+
+    sidebarRef = React.createRef();
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            entryAnimationFinished: false,
+        };
+    }
+
+    componentDidMount() {
+        this.sidebarEntryAnimate = new Common.SidebarEntryAnimate();
+        this.slimSidebarAnimate = new Common.SlimSidebarAnimate();
+        this.slimMenuAnimate = new Common.SlimMenuAnimate();
+
+        this.sidebarEntryAnimate.assignParentElement(this.sidebarRef.current);
+        this.slimSidebarAnimate.assignParentElement(this.sidebarRef.current);
+        this.slimMenuAnimate.assignSidebarElement(this.sidebarRef.current);
+
+        this.sidebarEntryAnimate.executeAnimation()
+            .then(() => {
+                this.setState({ entryAnimationFinished: true });
+            });
+    }
+
+    componentWillUnmount() {
+        this.sidebarEntryAnimate.destroy();
+        this.slimSidebarAnimate.destroy();
+        this.slimMenuAnimate.destroy();
+    }
+
+    render() {
+        const {
+            animationsDisabled,
+            collapsed,
+            pageConfig,
+            slim,
+            children,
+        } = this.props;
+
+        const sidebarClass = classNames('sidebar', 'sidebar--animations-enabled', {
+            'sidebar--slim': slim || pageConfig.sidebarSlim,
+            'sidebar--collapsed': collapsed || pageConfig.sidebarCollapsed,
+            'sidebar--animations-disabled': animationsDisabled || pageConfig.animationsDisabled,
+            'sidebar--animate-entry-complete': this.state.entryAnimationFinished,
+        });
+
+        return (
+            <div className={ sidebarClass } ref={ this.sidebarRef }>
+                { children }
+            </div>
+        );
+    }
+}

app/components/Sidebar/SidebarHideSlim.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const SidebarHideSlim = ({ children }) => {
+    return React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+            className: classNames(
+                child.props.className,
+                'sidebar__hide-slim'
+            )  
+        })
+    );
+};
+
+SidebarHideSlim.propTypes = {
+    children: PropTypes.node,
+};

app/components/Sidebar/SidebarMobileFluid.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const SidebarMobileFluid = (props) => {
+    const wrapClass = classNames("sidebar__mobile-fluid", props.className);
+
+    return (
+        <div className={ wrapClass }>
+            { props.children }
+        </div>
+    );
+};
+
+SidebarMobileFluid.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export {
+    SidebarMobileFluid
+};

app/components/Sidebar/SidebarSection.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const SidebarSection = (props) => {
+    const sectionClass = classNames("sidebar__section", {
+        'sidebar__section--fluid': props.fluid,
+        'sidebar__section--cover': props.cover
+    }, props.className);
+
+    return (
+        <div className={ sectionClass }>
+            { props.children }
+        </div>
+    );
+};
+
+SidebarSection.propTypes = {
+    children: PropTypes.node,
+    fluid: PropTypes.bool,
+    cover: PropTypes.bool,
+    className: PropTypes.string
+};
+
+export {
+    SidebarSection
+};

app/components/Sidebar/SidebarShowSlim.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const SidebarShowSlim = ({ children }) => {
+    return React.Children.map(children, (child) =>
+        React.cloneElement(child, {
+            className: classNames(
+                child.props.className,
+                'sidebar__show-slim'
+            )  
+        })
+    );
+};
+
+SidebarShowSlim.propTypes = {
+    children: PropTypes.node,
+};

app/components/Sidebar/index.js

@@ -0,0 +1,14 @@
+import { Sidebar } from './Sidebar';
+import { SidebarSection } from './SidebarSection';
+import { SidebarClose } from './SidebarClose';
+import { SidebarMobileFluid } from './SidebarMobileFluid';
+import { SidebarShowSlim } from './SidebarShowSlim';
+import { SidebarHideSlim } from './SidebarHideSlim';
+
+Sidebar.Section = SidebarSection;
+Sidebar.Close = SidebarClose;
+Sidebar.MobileFluid = SidebarMobileFluid;
+Sidebar.ShowSlim = SidebarShowSlim;
+Sidebar.HideSlim = SidebarHideSlim;
+
+export default Sidebar;