Code Study: GitHub Desktop / ui / window / title-bar.tsx

The TitleBar component refers to the section in red in the following screenshot. It includes the app icon, the app menu, app title, top resize handle, left resize handle, and the typical Windows maximize, minimize and restore buttons if running on Windows.

TitleBar

<div
  className={titleBarClass}
  id="desktop-app-title-bar"
  onDoubleClick={onTitlebarDoubleClick}
  style={this.state.style}
>
  {topResizeHandle}
  {leftResizeHandle}
  {appIcon}
  {this.props.children}
  {winControls}
</div>

Here is how app.tsx renders this TitleBar.

<TitleBar
  showAppIcon={showAppIcon}
  titleBarStyle={this.state.titleBarStyle}
  windowState={this.state.windowState}
  windowZoomFactor={this.state.windowZoomFactor}
>
  {this.renderAppMenuBar()}
</TitleBar>
tags: GitHub Desktop - Electron - React