Code Study: GitHub Desktop / ui / app-menu / app-menu-bar.tsx

The AppMenuBar component refers to the section in red in the following screenshot.

AppMenuBar

It is a Windows-style application menu bar which renders in the title bar section of the app and utilizes foldouts for displaying interactive menu. The AppMenuBar is not rendered on macOS because macOS has its own menu bar.

AppMenuBar

<div
  id="app-menu-bar"
  ref={this.onMenuBarRef}
  role="menubar"
  aria-label="Application menu"
>
  {this.state.menuItems.map(this.renderMenuItem, this)}
</div>

The root menu is always open. It contains menu items such as ‘File’ and ‘Edit’. Here we call renderMenuItem for each of them and render the AppMenuBarButton component

<AppMenuBarButton
  key={item.id}
  dispatcher={this.props.dispatcher}
  menuItem={item}
  menuState={menuState}
  highlightMenuAccessKey={highlightMenuAccessKey}
  enableAccessKeyNavigation={enableAccessKeyNavigation}
  openedWithAccessKey={openedWithAccessKey}
  onClose={this.onMenuClose}
  onOpen={this.onMenuOpen}
  onMouseEnter={this.onMenuButtonMouseEnter}
  onKeyDown={this.onMenuButtonKeyDown}
  onDidMount={this.onMenuButtonDidMount}
  onWillUnmount={this.onMenuButtonWillUnmount}
/>

See the Relationship between AppMenuBar, AppMenuBarButton, and AppMenu React components

tags: GitHub Desktop - Electron - React