Move headerNav to separate component

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -15,6 +15,8 @@ const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
 const { printCurrentBrew } = require('../../../shared/helpers.js');
 
+import HeaderNav from './headerNav/headerNav.jsx';
+
 const DOMPurify = require('dompurify');
 const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
 
@@ -65,8 +67,7 @@ const BrewRenderer = (props)=>{
 		viewablePageNumber : 0,
 		height             : PAGE_HEIGHT,
 		isMounted          : false,
-		visibility         : 'hidden',
-		showHeaderNav      : false
+		visibility         : 'hidden'
 	});
 
 	const mainRef  = useRef(null);
@@ -191,60 +192,6 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};
 
-	const toggleHeaderNav = ()=>{
-		setState((prevState)=>({
-			...prevState,
-			showHeaderNav : !prevState.showHeaderNav
-		}));
-	};
-
-	const renderHeaderNav = ()=>{
-		return <>
-			<i
-				className={`navIcon ${state.showHeaderNav ? 'fa-solid' : 'fa-regular'} fa-rectangle-list`}
-				onClick={toggleHeaderNav}
-			></i>
-			{state.showHeaderNav && renderHeaderLinks()}
-		</>;
-	};
-
-	const renderHeaderLinks = ()=>{
-		if(!pagesRef.current) return;
-		const elements = pagesRef.current.querySelectorAll('[id]');
-		if(!elements) return;
-		const navList = [];
-
-		elements.forEach((el)=>{
-			if(el.className.match(/\bpage\b/)) {
-				navList.push({
-					depth : 0,
-					text  : `Page ${el.id.slice(1)}`,
-					link  : el.id
-				});
-				return;
-			}
-			if(el.localName.match(/^h[1-6]/)){
-				navList.push({
-					depth : el.localName[1],
-					text  : el.innerText,
-					link  : el.id
-				});
-				return;
-			}
-			navList.push({
-				depth : 7,
-				text  : el.innerText,
-				link  : el.id
-			});
-		});
-
-		return _.map(navList, (navItem)=>{
-			return <p>
-				<a href={`#${navItem.link}`} target='_self'>{`${'-'.repeat(navItem.depth)}${navItem.text}`}</a>
-			</p>;
-		});
-	};
-
 	const rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
 	const themePath     = props.theme ?? '5ePHB';
 	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
@@ -295,13 +242,7 @@ const BrewRenderer = (props)=>{
 						</>
 					}
 				</div>
-				{props.showHeaderNav ?
-					<div className='headerNav'>
-						{renderHeaderNav()}
-					</div>
-					:
-					<></>
-				}
+				{props.showHeaderNav ? <HeaderNav ref={pagesRef} /> : <></>}
 			</Frame>
 			{renderPageInfo()}
 		</>