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',
+		visibility         : 'hidden'
-		showHeaderNav      : false
 	});
 
 	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 ?
+				{props.showHeaderNav ? <HeaderNav ref={pagesRef} /> : <></>}
-					<div className='headerNav'>
-						{renderHeaderNav()}
-					</div>
-					:
-					<></>
-				}
 			</Frame>
 			{renderPageInfo()}
 		</>

client/homebrew/brewRenderer/brewRenderer.less

@@ -61,31 +61,6 @@
 	background-color : #333333;
 }
 
-.headerNav {
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	padding: 5px 10px;
-	background-color: #ccc;
-	border-radius: 5px;
-	max-height: 100vh;
-	overflow-y: auto;	
-	.navIcon {
-		cursor: pointer;
-	}
-	p {
-		padding: 2px;
-		a {
-			color: inherit;
-			text-decoration: none;
-			cursor: pointer;
-			&:hover {
-				text-decoration: underline;
-			}
-		}
-	}
-}
-
 
 @media print {
 	.brewRenderer {

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -0,0 +1,73 @@
+require('./headerNav.less');
+
+import * as React from 'react';
+import * as _ from 'lodash';
+
+
+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]');
+		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, index)=>{
+			return <HeaderNavItem text={navItem.text} link={navItem.link} depth={navItem.depth} index={index} />;
+		});
+
+	};
+
+	return <div className={`headerNav ${state.showHeaderNav ? 'active' : ''}`}>
+		<i
+			className={`navIcon ${state.showHeaderNav ? 'active fa-solid' : 'fa-regular'} fa-rectangle-list`}
+			onClick={toggleHeaderNav}
+			title='Navigate by Header'
+		></i>
+		{state.showHeaderNav && renderHeaderLinks()}
+	</div>;
+}
+);
+
+const HeaderNavItem = ({ index, link, text, depth })=>{
+	return <p key={index}>
+		<a href={`#${link}`} target='_self'>{`${'-'.repeat(depth)}${text}`}</a>
+	</p>;
+};
+
+export default HeaderNav;

client/homebrew/brewRenderer/headerNav/headerNav.less

@@ -0,0 +1,30 @@
+.headerNav {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	padding: 5px 10px;
+	background-color: #ccc;
+	border-radius: 5px;
+	max-height: 100vh;
+	overflow-y: auto;
+    &.active {
+        padding-bottom: 10px;
+        .navIcon {
+            padding-bottom: 10px;
+        }
+    }
+	.navIcon {
+		cursor: pointer;
+	}
+	p {
+		padding: 2px;
+		a {
+			color: inherit;
+			text-decoration: none;
+			cursor: pointer;
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+}