Repository: expo/expo
File: docs/components/DocumentationNestedScrollLayout.tsx (TypeScript)

Code before:
                      size="xs"
                      className={mergeClasses(
                        'inline-flex size-9 items-center justify-center rounded-full border !p-0 transition-colors duration-150 ease-out',
                        'shadow-sm',
                        isSidebarCollapsed
                          ? 'border-palette-gray5 bg-palette-gray4 text-icon-secondary dark:border-palette-gray6 dark:bg-palette-gray5'
                          : 'border-default bg-default text-icon-secondary',
                        'hover:bg-element focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-palette-blue9'
                      )}
                      aria-label={isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                      title={isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                      aria-pressed={!isSidebarCollapsed}
                      onClick={onSidebarToggle}>
                      {isSidebarCollapsed ? (
                        <ChevronRightIcon className="icon-sm" />
                      ) : (
                        <ChevronLeftIcon className="icon-sm" />
                      )}
                      <span className="sr-only">
                        {isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                      </span>
                    </Button>
                  </Tooltip.Trigger>
                  <Tooltip.Content sideOffset={8} className="max-w-[260px] text-center text-xs">
                    Use Cmd/Ctrl + Shift + Enter to enter immersive mode. Use the same keys to exit
                    immersive mode.
                  </Tooltip.Content>
                </Tooltip.Root>
              </div>
            ) : null}
            <div
              className={mergeClasses(
                'flex h-full max-w-[280px] flex-col overflow-hidden border-r border-r-default transition-[max-width,opacity,width] duration-200 ease-out',
                isSidebarCollapsed
                  ? 'w-0 max-w-0 border-r-0 opacity-0'
                  : 'w-[280px] max-w-[280px] opacity-100'
              )}>
              {isSidebarCollapsed ? null : (
                <>
                  <SidebarHead sidebarActiveGroup={sidebarActiveGroup} />
                  <ScrollContainer
                    ref={this.sidebarRef}
                    scrollPosition={sidebarScrollPosition}
                    className="pt-1.5">
                    {sidebar}
                    <SidebarFooter />
                  </ScrollContainer>
                </>
              )}
            </div>
          </div>

Review comment (suggestion):
```suggestion
                    Use Cmd/Ctrl + Shift + Enter to toggle immersive mode.
```

Code after:
                      size="xs"
                      className={mergeClasses(
                        'inline-flex size-9 items-center justify-center rounded-full border !p-0 transition-colors duration-150 ease-out',
                        'shadow-sm',
                        isSidebarCollapsed
                          ? 'border-palette-gray5 bg-palette-gray4 text-icon-secondary dark:border-palette-gray6 dark:bg-palette-gray5'
                          : 'border-default bg-default text-icon-secondary',
                        'hover:bg-element focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-palette-blue9'
                      )}
                      aria-label={isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                      title={isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                      aria-pressed={!isSidebarCollapsed}
                      onClick={onSidebarToggle}>
                      {isSidebarCollapsed ? (
                        <ChevronRightIcon className="icon-sm" />
                      ) : (
                        <ChevronLeftIcon className="icon-sm" />
                      )}
                      <span className="sr-only">
                        {isSidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
                      </span>
                    </Button>
                  </Tooltip.Trigger>
                  <Tooltip.Content sideOffset={8} className="max-w-[260px] text-center text-xs">
                    Use Cmd/Ctrl + Shift + Enter to toggle immersive mode.
                  </Tooltip.Content>
                </Tooltip.Root>
              </div>
            ) : null}
            <div
              className={mergeClasses(
                'flex h-full max-w-[280px] flex-col overflow-hidden border-r border-r-default transition-[max-width,opacity,width] duration-200 ease-out',
                isSidebarCollapsed
                  ? 'w-0 max-w-0 border-r-0 opacity-0'
                  : 'w-[280px] max-w-[280px] opacity-100'
              )}>
              {isSidebarCollapsed ? null : (
                <>
                  <SidebarHead sidebarActiveGroup={sidebarActiveGroup} />
                  <ScrollContainer
                    ref={this.sidebarRef}
                    scrollPosition={sidebarScrollPosition}
                    className="pt-1.5">
                    {sidebar}
                    <SidebarFooter />
                  </ScrollContainer>
                </>
              )}
            </div>
          </div>
          <div