From b9e2515dd35474751f09db2f36df875094e7127f Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Sun, 21 Apr 2019 19:41:41 +0200 Subject: [PATCH] Implement active tab highlighting in JSX layout --- src/app.js | 9 +-------- src/views/layout.jsx | 10 ++++++---- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/app.js b/src/app.js index 85c6035..96c53a7 100644 --- 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(); }); diff --git a/src/views/layout.jsx b/src/views/layout.jsx index 8edb322..5dfa718 100644 --- 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 (
@@ -17,8 +20,6 @@ function MenuItem({ path, children }) { } module.exports = function Layout({ children }) { - // let locals = React.useContext(LocalsContext); - return ( @@ -28,6 +29,7 @@ module.exports = function Layout({ children }) {

CVM

+ Hardware Disk Images Instances Users