define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./Sidebar.Basic.Example", "./Sidebar.Collapsed.Example"], function (require, exports, tslib_1, React, example_app_base_1, Sidebar_Basic_Example_1, Sidebar_Collapsed_Example_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var SidebarBasicExampleCode = require('!raw-loader!@fluentui/examples/src/experiments/Sidebar/Sidebar.Basic.Example.tsx');
    var SidebarCollpasibleExampleCode = require('!raw-loader!@fluentui/examples/src/experiments/Sidebar/Sidebar.Collapsed.Example.tsx');
    var exampleStyles = {
        example: {
            height: 500,
            paddingBottom: 0,
        },
    };
    var SidebarPage = /** @class */ (function (_super) {
        tslib_1.__extends(SidebarPage, _super);
        function SidebarPage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        SidebarPage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: "Sidebar", componentName: "SidebarExample", exampleCards: React.createElement("div", null,
                    React.createElement("div", { className: "sidebar-basic-example" },
                        React.createElement(example_app_base_1.ExampleCard, { title: "Sidebar Basic, not Collapsible", code: SidebarBasicExampleCode, styles: exampleStyles },
                            React.createElement(Sidebar_Basic_Example_1.SidebarBasicExample, null))),
                    React.createElement("div", { className: "sidebar-collapsed-example" },
                        React.createElement(example_app_base_1.ExampleCard, { title: "Sidebar Collapsible", code: SidebarCollpasibleExampleCode, styles: exampleStyles },
                            React.createElement(Sidebar_Collapsed_Example_1.SidebarCollapsibleExample, null)))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [require('!raw-loader!@uifabric/experiments/src/components/Sidebar/Sidebar.types.tsx')] }), overview: React.createElement("div", null,
                    React.createElement("p", null, "Sidebar navigation component. If the sidebar is collapsible, the collapse button is shown on the top."),
                    React.createElement("p", null, "The sidebar uses a list of items to render the vertical navigation. Items are rendered as Sidebar buttons by default. If an item has a buttonAs or onRender property, these properties will be used to render the item instead. If not, but a defaultButton property is specified on the sidebar, the default button will be used for button rendering. Items should have an icon and a label if they are used in a collapsible sidebar."),
                    React.createElement("p", null, "Custom styling for the sidebar is done by passing in a ISidebarStyles object. And example of this can be seen in the basic example below.")), isHeaderVisible: this.props.isHeaderVisible }));
        };
        return SidebarPage;
    }(React.PureComponent));
    exports.SidebarPage = SidebarPage;
});
//# sourceMappingURL=SidebarPage.js.map