Add maximum length, use span for spacing

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -4,6 +4,8 @@ import * as React from 'react';
 import * as _ from 'lodash';
 
 
+const MAX_TEXT_LENGTH = 40;
+
 const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 
 	const [state, setState] = React.useState({
@@ -66,11 +68,20 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 );
 
 const HeaderNavItem = ({ link, text, depth, className })=>{
-	return <li>
+
+	const trimString = (text, prefixLength = 0)=>{
+		const maxLength = MAX_TEXT_LENGTH - prefixLength;
+		if(text.trim().length > maxLength){
+			return `${text.trim().slice(0, maxLength)}...`;
+		}
+		return text.trim();
+	};
+
+	return <p>
 		<a href={`#${link}`} target='_self' className={className}>
-			{`${'-'.repeat(depth)}${text}`}
+			<span style={{ display: 'inline-block', width: `${depth * 0.5}em` }}></span>{trimString(text, depth)}
 		</a>
-	</li>;
+	</p>;
 };
 
 export default HeaderNav;

client/homebrew/brewRenderer/headerNav/headerNav.less

@@ -1,6 +1,6 @@
 .headerNav {
 	position: fixed;
-	top: 0px;
+	top: 30px;
 	left: 0px;
 	padding: 5px 10px;
 	background-color: #ccc;
@@ -17,20 +17,19 @@
 	.navIcon {
 		cursor: pointer;
 	}
-	li {
+	a {
 		font-family: 'Open Sans';
 		font-size: 12px;
 		padding: 2px;
-		a {
-			color: inherit;
-			text-decoration: none;
-			cursor: pointer;
-			&:hover {
-				text-decoration: underline;
-			}
-            &.pageLink {
-                font-weight: 900;
-            }
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+		&:hover {
+			text-decoration: underline;
 		}
+		&.pageLink {
+			font-weight: 900;
+		}
+	
 	}
 }