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} />
</>
)
}