public render()

in src/admin/rightPanel.tsx [303:373]


    public render(): JSX.Element {
        return (
            <>
                <ThemeProvider theme={this.state.isFocusedState ? darkTheme : lightTheme} style={{ width: '100%', height: '100%' }}>
                    <div className={`top-panel${this.state.isFocusedState ? ' is-focused' : ''}`}>
                        <Stack
                            horizontal
                            horizontalAlign="space-between"
                            verticalAlign="center"
                            className="top-panel-content"
                        >
                            {this.state.isFocusedState
                                ?
                                    <>
                                        <Stack horizontal verticalAlign="center">
                                            <Text styles={{ root: { padding: '0 15px' } }}>{this.state.pageName}</Text>
                                            {this.renderDropdowns()}
                                        </Stack>
                                        <Stack horizontal verticalAlign="center">
                                            <CommandBarButton
                                                iconProps={undoIcon}
                                                text="Undo"
                                                onClick={() => this.eventManager.dispatchEvent("onUndo")}
                                                className="nav-item-list-button top-panel-command-button"
                                                disabled={!this.state.canUndo}
                                            />
                                            <CommandBarButton
                                                iconProps={redoIcon}
                                                text="Redo"
                                                onClick={() => this.eventManager.dispatchEvent("onRedo")}
                                                className="nav-item-list-button top-panel-command-button"
                                                disabled={!this.state.canRedo}
                                            />
                                            {!this.state.isSmallMobile && this.renderSaveDiscardButtons()}
                                        </Stack>
                                    </>
                                :
                                    <>
                                        <Stack
                                            horizontal
                                            horizontalAlign="space-between"
                                            verticalAlign="center"
                                        >
                                            <IconButton
                                                iconProps={sidePanelToggleIcon}
                                                className="admin-side-panel-opener"
                                                onClick={() => {
                                                    this.setState({ mobileMenuIsOpened: true });
                                                    document.getElementById('admin-left-panel').classList.remove('hidden');
                                                }}
                                            />
                                            {this.renderDropdowns()}
                                        </Stack>
                                        <PrimaryButton
                                            text="Publish site"
                                            onClick={() => this.contentWorkshop.publish()}
                                        />
                                    </>
                            }
                        </Stack>
                        {(this.state.isFocusedState && this.state.isSmallMobile) && this.renderSaveDiscardButtons()}
                    </div>
                </ThemeProvider>
                <div
                    className={`content-overlay${this.state.isFocusedState ? ' hidden' : ''}`}
                    onClick={() => this.toggleFocusedState()}
                ></div>
                <ToastContainer hideProgressBar={true} />
            </>
        )
    }