Implement active tab highlighting in JSX layout

feature/node-rewrite
Sven Slootweg 6 years ago
parent ab279c84f3
commit b9e2515dd3

@ -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();
});

@ -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>

Loading…
Cancel
Save