import { __extends } from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet, } from '@fluentui/react-docsite-components';
import { SidebarBasicExample } from './Sidebar.Basic.Example';
import { SidebarCollapsibleExample } from './Sidebar.Collapsed.Example';
var SidebarBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/Sidebar/Sidebar.Basic.Example.tsx');
var SidebarCollpasibleExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/Sidebar/Sidebar.Collapsed.Example.tsx');
var exampleStyles = {
    example: {
        height: 500,
        paddingBottom: 0,
    },
};
var SidebarPage = /** @class */ (function (_super) {
    __extends(SidebarPage, _super);
    function SidebarPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SidebarPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: "Sidebar", componentName: "SidebarExample", exampleCards: React.createElement("div", null,
                React.createElement("div", { className: "sidebar-basic-example" },
                    React.createElement(ExampleCard, { title: "Sidebar Basic, not Collapsible", code: SidebarBasicExampleCode, styles: exampleStyles },
                        React.createElement(SidebarBasicExample, null))),
                React.createElement("div", { className: "sidebar-collapsed-example" },
                    React.createElement(ExampleCard, { title: "Sidebar Collapsible", code: SidebarCollpasibleExampleCode, styles: exampleStyles },
                        React.createElement(SidebarCollapsibleExample, null)))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader?esModule=false!@fluentui/react-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));
export { SidebarPage };
//# sourceMappingURL=SidebarPage.js.map