Move Header Navigation button to Toolbar

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -103,7 +103,6 @@ const BrewRenderer = (props)=>{
 		currentBrewRendererPageNum : 1,
 		themeBundle                : {},
 		onPageChange               : ()=>{},
-    	showHeaderNav              : false,
 		...props
 	};
 
@@ -121,6 +120,8 @@ const BrewRenderer = (props)=>{
 		pageShadows  : true
 	});
 
+	const [headerState, setHeaderState] = useState(false);
+
 	const mainRef  = useRef(null);
 	const pagesRef = useRef(null);
 
@@ -294,7 +295,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length}/>
+			<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -319,7 +320,7 @@ const BrewRenderer = (props)=>{
 						</>
 					}
 				</div>
-				{props.showHeaderNav ? <HeaderNav ref={pagesRef} /> : <></>}
+				{headerState ? <HeaderNav ref={pagesRef} /> : <></>}
 			</Frame>
 		</>
 	);

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -8,17 +8,6 @@ const MAX_TEXT_LENGTH = 40;
 
 const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 
-	const [state, setState] = React.useState({
-		showHeaderNav : false
-	});
-
-	const toggleHeaderNav = ()=>{
-		setState((prevState)=>({
-			...prevState,
-			showHeaderNav : !prevState.showHeaderNav
-		}));
-	};
-
 	const renderHeaderLinks = ()=>{
 		if(!pagesRef.current) return;
 		const elements = pagesRef.current.querySelectorAll('[id]');
@@ -56,13 +45,8 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 
 	};
 
-	return <div className={`headerNav ${state.showHeaderNav ? 'active' : ''}`}>
+	return <div className='headerNav'>
-		<i
+		{renderHeaderLinks()}
-			className={`navIcon ${state.showHeaderNav ? 'active fa-solid' : 'fa-regular'} fa-rectangle-list`}
-			onClick={toggleHeaderNav}
-			title='Navigate by Header'
-		></i>
-		{state.showHeaderNav && renderHeaderLinks()}
 	</div>;
 }
 );

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -9,7 +9,7 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
-const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages })=>{
+const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
 
 	const [pageNum, setPageNum]     = useState(1);
 	const [toolsVisible, setToolsVisible] = useState(true);
@@ -76,7 +76,10 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 
 	return (
 		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
-			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+			<div className='toggleButton'>
+				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
+			</div>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
 				<button

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -166,7 +166,7 @@
 
 	&.hidden {
 		flex-wrap        : nowrap;
-		width            : 32px;
+		width            : 92px;
 		overflow         : hidden;
 		background-color : unset;
 		opacity          : 0.5;
@@ -178,10 +178,12 @@
 	}
 }
 
-button.toggleButton {
+.toggleButton {
 	position  : absolute;
 	left      : 0;
 	z-index   : 5;
 	width     : 32px;
 	min-width : unset;
+	height    : 100%;
+	display   : flex;
 }