Initial functionality pass

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -65,9 +65,11 @@ const BrewRenderer = (props)=>{
 		height             : PAGE_HEIGHT,
 		isMounted          : false,
 		visibility         : 'hidden',
+		showHeaderNav      : false
 	});
 
 	const mainRef  = useRef(null);
+	const pagesRef = useRef(null);
 
 	if(props.renderer == 'legacy') {
 		rawPages = props.text.split('\\page');
@@ -188,6 +190,60 @@ 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;
@@ -232,12 +288,15 @@ const BrewRenderer = (props)=>{
 						&&
 						<>
 							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`}>
+							<div className='pages' lang={`${props.lang || 'en'}`} ref={pagesRef}>
 								{renderPages()}
 							</div>
 						</>
 					}
 				</div>
+				<div className='headerNav'>
+					{renderHeaderNav()}
+				</div>
 			</Frame>
 			{renderPageInfo()}
 		</>

client/homebrew/brewRenderer/brewRenderer.less

@@ -31,12 +31,8 @@
 			visibility: hidden;
 		}
 	}
-	
-
-
-
-
 }
+
 .pane { position : relative; }
 .pageInfo {
 	position         : absolute;
@@ -65,6 +61,32 @@
 	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 {
 		height: 100%;
@@ -76,4 +98,7 @@
 			}
 		}
 	}
+	.headerNav {
+		visibility: hidden;
+	}
 }