/*!
 * Copyright (C) Microsoft Corporation. All rights reserved.
 */
define(["require", "exports", "tslib", "office-ui-fabric-react", "react", "@uifabric/experiments/lib/Sidebar"], function (require, exports, tslib_1, office_ui_fabric_react_1, React, Sidebar_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var SidebarBasicExample = /** @class */ (function (_super) {
        tslib_1.__extends(SidebarBasicExample, _super);
        function SidebarBasicExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        SidebarBasicExample.prototype.render = function () {
            this.state = {
                active: true,
            };
            /*
             * Basic sidebar example, with position override so that the example fits into the example page.
             * Here is the wrapper class. By default the sidebar takes all of the left height and is positioned on the left.
             *
             *   .sidebar-position-override {
             *       top: auto;
             *       bottom: auto;
             *       left: auto;
             *   }
             */
            return (React.createElement(Sidebar_1.Sidebar, { footerItems: [
                    {
                        key: 'basic-example-footer-item',
                        name: 'Sidebar Footer',
                        iconProps: { iconName: 'ProFootball' },
                        items: [
                            {
                                key: 'basic-example-footer-item-link1',
                                name: 'Footer Item 1',
                                iconProps: { iconName: 'CollegeFootball' },
                                active: false,
                            },
                            {
                                key: 'basic-example-footer-item-link2',
                                name: 'Footer Item 2',
                                iconProps: { iconName: 'Soccer' },
                                active: false,
                            },
                        ],
                    },
                ], theme: office_ui_fabric_react_1.getTheme(), items: [
                    {
                        key: 'basic-example-item1',
                        name: 'Item 1',
                        iconProps: { iconName: 'Home' },
                        active: false,
                    },
                    {
                        key: 'basic-example-item2',
                        name: 'Item 2',
                        iconProps: { iconName: 'Bullseye' },
                        active: true,
                    },
                    {
                        key: 'basic-example-item3',
                        name: 'Item Styled Example',
                        subMenuIconProps: { iconName: 'ArrowUpRight' },
                        active: false,
                        styles: {
                            root: {
                                backgroundColor: 'red',
                            },
                        },
                    },
                    {
                        key: 'basic-example-accordion1',
                        name: 'More Stuff Here',
                        iconProps: { iconName: 'Code' },
                        items: [
                            {
                                key: 'basic-example-accordion1-link1',
                                name: 'Inner Link 1',
                                iconProps: { iconName: 'Mail' },
                                active: false,
                            },
                            {
                                key: 'basic-example-accordion1-link2',
                                name: 'Inner Link 2',
                                iconProps: { iconName: 'AlarmClock' },
                                active: true,
                            },
                        ],
                    },
                    {
                        key: 'basic-example-accordion2',
                        name: 'More Stuff Here Not Active',
                        iconProps: { iconName: 'Crown' },
                        items: [
                            {
                                key: 'basic-example-accordion2-link1',
                                name: 'Inner Link 1',
                                iconProps: { iconName: 'DiamondSolid' },
                                active: false,
                            },
                            {
                                key: 'basic-example-accordion2-link2',
                                name: 'Inner Link 2',
                                iconProps: { iconName: 'DeliveryTruck' },
                                active: false,
                            },
                        ],
                    },
                    {
                        key: 'basic-example-render1',
                        name: 'onRender Example',
                        iconProps: { iconName: 'AirTickets' },
                        onRender: function (item) {
                            return (React.createElement(Sidebar_1.SidebarButton, { key: item.key, text: item.name, iconProps: item.iconProps, role: "menuitem", theme: office_ui_fabric_react_1.getTheme() }));
                        },
                    },
                ] }));
        };
        return SidebarBasicExample;
    }(React.Component));
    exports.SidebarBasicExample = SidebarBasicExample;
});
//# sourceMappingURL=Sidebar.Basic.Example.js.map