Implement active tab highlighting in JSX layout

5 years ago · b9e2515dd3
parent ab279c84f3
commit b9e2515dd3
2 changed files with 7 additions and 12 deletions
--- a/src/app.js
+++ b/src/app.js
@ -58,14 +58,7 @@ module.exports = function () {
 	};

 	app.use((req, res, next) => {
-		res.locals.isUnderPrefix = function isUnderPrefix(path, resultingClass) {
-			// FIXME: Proper path segment parsing...
-			if (req.originalUrl.indexOf(path) === 0) {
-				return resultingClass;
-			} else {
-				return "";
-			}
-		};
+		res.locals.currentPath = req.originalUrl;

 		next();
 	});
--- a/src/views/layout.jsx
+++ b/src/views/layout.jsx
@ -2,10 +2,13 @@

 const React = require("react");
 const classnames = require("classnames");
-// const {LocalsContext} = require("../express-async-react");
+
+const {LocalsContext} = require("../express-async-react");
+const isUnderPrefix = require("../is-under-prefix");

 function MenuItem({ path, children }) {
-	let isActive = false; // FIXME
+	let {currentPath} = React.useContext(LocalsContext);
+	let isActive = isUnderPrefix(path, currentPath);

 	return (
 		<div className={classnames("menu-item", {active: isActive})}>
@ -17,8 +20,6 @@ function MenuItem({ path, children }) {
 }

 module.exports = function Layout({ children }) {
-	// let locals = React.useContext(LocalsContext);
-
 	return (
 		<html>
 			<head>
@ -28,6 +29,7 @@ module.exports = function Layout({ children }) {
 			<body>
 				<div className="menu">
 					<h1>CVM</h1>
+					<MenuItem path="/hardware">Hardware</MenuItem>
 					<MenuItem path="/disk-images">Disk Images</MenuItem>
 					<MenuItem path="/instances">Instances</MenuItem>
 					<MenuItem path="/users">Users</MenuItem>