Improved navigation.

Author: mrdoob

docs/index.html

@@ -21,7 +21,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 				<div id="sections">
 					<span class="selected">docs</span>
-					<a href="../examples/#webgl_animation_keyframes">examples</a>
+					<a href="../manual/">manual</a>
 				</div>
 
 				<div id="expandButton"></div>

examples/index.html

@@ -16,7 +16,6 @@
 				<h1><a href="https://threejs.org">three.js</a></h1>
 
 				<div id="sections">
-					<a href="../docs/index.html#manual/introduction/Creating-a-scene">docs</a>
 					<span class="selected">examples</span>
 				</div>
 

files/main.css

@@ -11,7 +11,8 @@
 	--font-size: 16px;
 	--line-height: 26px;
 
-	--border-style: 1px solid #E8E8E8;
+	--border-color: #E8E8E8;
+	--border-style: 1px solid var(--border-color);
 	--header-height: 48px;
 	--panel-width: 300px;
 	--panel-padding: 16px;
@@ -27,7 +28,8 @@
 		--text-color: #bbb;
 		--secondary-text-color: #666;
 
-		--border-style: 1px solid #444;
+		--border-color: #444;
+		--border-style: 1px solid var(--border-color);
 	}
 
 	#previewsToggler {
@@ -103,6 +105,13 @@ h1 a {
 	color: var(--color-blue);
 }
 
+hr {
+	border: 0;
+	height: 1px;
+	background-color: var(--border-color);
+	margin: 16px 0;
+}
+
 #header {
 	display: flex;
 	height: var(--header-height);

manual/index.html

@@ -20,6 +20,7 @@
 				<h1><a href="https://threejs.org">three.js</a></h1>
 
 				<div id="sections">
+					<a href="../docs/">docs</a>
 					<span class="selected">manual</span>
 				</div>
 
@@ -231,6 +232,14 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 				// Create categories
 
+				if ( category === '---' ) {
+
+					const separator = document.createElement( 'hr' );
+					navigation.appendChild( separator );
+					continue;
+
+				}
+
 				const pages = categories[ category ];
 
 				const categoryContainer = document.createElement( 'div' );

manual/list.json

@@ -21,6 +21,7 @@
 			"How to use Post Processing": "en/how-to-use-post-processing",
 			"Matrix Transformations": "en/matrix-transformations"
 		},
+		"---": {},
 		"Basics": {
 			"Fundamentals": "en/fundamentals",
 			"Responsive Design": "en/responsive",