joepie91
/
cvm
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Implement active tab highlighting in JSX layout

Browse Source
feature/node-rewrite
Sven Slootweg 6 years ago
parent ab279c84f3
commit b9e2515dd3
2 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File

9
src/app.js
Unescape Escape View File

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

10
src/views/layout.jsx
Unescape Escape View File

@ -2,10 +2,13 @@
const React = require("react"); const React = require("react");
const classnames = require("classnames"); 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 }) { function MenuItem({ path, children }) {
let isActive = false; // FIXME let {currentPath} = React.useContext(LocalsContext);
let isActive = isUnderPrefix(path, currentPath);
return ( return (
<div className={classnames("menu-item", {active: isActive})}> <div className={classnames("menu-item", {active: isActive})}>
@ -17,8 +20,6 @@ function MenuItem({ path, children }) {
} }
module.exports = function Layout({ children }) { module.exports = function Layout({ children }) {
// let locals = React.useContext(LocalsContext);
return ( return (
<html> <html>
<head> <head>
@ -28,6 +29,7 @@ module.exports = function Layout({ children }) {
<body> <body>
<div className="menu"> <div className="menu">
<h1>CVM</h1> <h1>CVM</h1>
<MenuItem path="/hardware">Hardware</MenuItem>
<MenuItem path="/disk-images">Disk Images</MenuItem> <MenuItem path="/disk-images">Disk Images</MenuItem>
<MenuItem path="/instances">Instances</MenuItem> <MenuItem path="/instances">Instances</MenuItem>
<MenuItem path="/users">Users</MenuItem> <MenuItem path="/users">Users</MenuItem>

Write Preview
Loading…
Cancel
Save