sidebar icon in blob header not visible if sidebar open

Author: jasonhawkharris

client/web/src/repo/RepoRevisionSidebar.tsx

@@ -88,7 +88,7 @@ export const RepoRevisionSidebar: FC<RepoRevisionSidebarProps> = props => {
                             aria-label="Hide sidebar"
                             variant="icon"
                             className={classNames(
-                                'position-absolute border mr-2',
+                                'position-absolute border mr-2 mb-1',
                                 styles.toggle
                             )}
                             onClick={() => props.handleSidebarToggle(false)}

client/web/src/repo/RepositoryFileTreePage.tsx

@@ -132,6 +132,7 @@ export const RepositoryFileTreePage: FC<RepositoryFileTreePageProps> = props =>
                                     fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges}
                                     className={styles.pageContent}
                                     context={globalContext}
+                                    sidebarOpen={isVisible}
                                     handleSidebarToggle={handleSidebarToggle}
                                 />
                             </TraceSpanProvider>

client/web/src/repo/blob/BlobPage.tsx

@@ -111,6 +111,7 @@ interface BlobPageProps
     repoID?: Scalars['ID']
     repoUrl?: string
     repoServiceType?: string
+    sidebarOpen: boolean
     handleSidebarToggle: (value: boolean) => void
 
     fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable<string[][]>
@@ -455,6 +456,7 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, co
                     revision={revision}
                     filePath={filePath}
                     enableOwnershipPanel={enableOwnershipPanel}
+                    sidebarOpen={props.sidebarOpen}
                     handleSidebarToggle={props.handleSidebarToggle}
                 />
             )}

client/web/src/repo/blob/own/HistoryAndOwnBar.tsx

@@ -23,8 +23,9 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
     revision?: string
     filePath: string
     enableOwnershipPanel: boolean
+    sidebarOpen: boolean
     handleSidebarToggle: (value: boolean) => void
-}> = ({ repoID, revision, filePath, enableOwnershipPanel, handleSidebarToggle }) => {
+}> = ({ repoID, revision, filePath, enableOwnershipPanel, sidebarOpen, handleSidebarToggle }) => {
     const navigate = useNavigate()
 
     const openOwnershipPanel = useCallback(() => {
@@ -87,19 +88,22 @@ export const HistoryAndOwnBar: React.FunctionComponent<{
         <div className={styles.wrapper}>
             {history && (
                 <div className={styles.historyPanel}>
-                    <Tooltip content="Hide sidebar" placement="right">
-                        <Button
-                            aria-label="Hide sidebar"
-                            variant="icon"
-                            className={classNames(
-                                'border mr-2',
-                                // styles.toggle
-                            )}
-                            onClick={() => handleSidebarToggle(true)}
-                        >
-                            <Icon aria-hidden={true} svgPath={mdiPageLayoutSidebarLeft} />
-                        </Button>
-                    </Tooltip>
+                    {!sidebarOpen && (
+                        <Tooltip content="Hide sidebar" placement="right">
+                            <Button
+                                aria-label="Hide sidebar"
+                                variant="icon"
+                                className={classNames(
+                                    'p-2 border mr-2 hover:bg-gray',
+                                    // styles.toggle
+                                )}
+                                onClick={() => handleSidebarToggle(true)}
+                            >
+                                <Icon aria-hidden={true} svgPath={mdiPageLayoutSidebarLeft} />
+                            </Button>
+                        </Tooltip>
+                    )}
+
                     <GitCommitNode
                         node={history}
                         extraCompact={true}