fix: Colors for current items in nested menu

BLSQ · Nov 28, 2019 · 98da488 · 98da488
1 parent 5e401f2
commit 98da488
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/components/NestedAccordionMenu/MenuItems/index.js b/src/components/NestedAccordionMenu/MenuItems/index.js
@@ -9,15 +9,17 @@ import ListItemText from "@material-ui/core/ListItemText";
 import classNames from "classnames";
 import useStyles from "./styles";
 function MenuItem(props) {
-  const { to, name, items, Icon, depth, expanded, currentPath } = props;
+  const { to, name, items, Icon, depth, currentPath } = props;
   const classes = useStyles({ depth: depth });
   const [collapsed, setCollapsed] = useState(true);
   const hasSubItems = Array.isArray(items);
+  let found = false;
+  let expandIcon;
+
   function toggleCollapse() {
     setCollapsed(prevValue => !prevValue);
   }
 
-  let found = false;
   function isChildrenActive(subItems) {
     subItems.forEach(element => {
       if (element.to === currentPath) {
@@ -31,9 +33,9 @@ function MenuItem(props) {
   }
 
   const active = to === currentPath && !hasSubItems;
-  const itemsTofilt = items;
-  const activeSubParent = items && isChildrenActive(items);
-  let expandIcon;
+  const activeSubParent = hasSubItems && isChildrenActive(items);
+
+  console.log(to, active);
 
   if (hasSubItems && items.length) {
     expandIcon = !collapsed ? (
@@ -53,10 +55,10 @@ function MenuItem(props) {
         component={hasSubItems ? undefined : LinkComponent}
         classes={{
           button: classNames({
-            [classes.activeColor]: active,
+            [classes.activeColor]: active && !hasSubItems && depth,
             [classes.activeBackground]:
-              (!hasSubItems && !depth) ||
-              (hasSubItems && collapsed && activeSubParent),
+              (active && !hasSubItems && !depth) ||
+              (hasSubItems && collapsed && activeSubParent && !depth),
           }),
         }}
       >

diff --git a/src/components/NestedAccordionMenu/index.stories.js b/src/components/NestedAccordionMenu/index.stories.js
@@ -112,20 +112,40 @@ const itemsCoreModulesParentHighlighted = [
     Icon: InboxIcon,
   },
 ];
-// Knobs for React props
 
-stories.add("Default", () => (
+const simpleNonNestedItems = [
+  {
+    name: "CordaidSIS to HIVDR",
+    Icon: InboxIcon,
+    to: "project/6/journal/sub_journal_one",
+  },
+  {
+    name: "SNIS REPLICA to HIVDR II",
+    Icon: InboxIcon,
+    to: "project/7",
+  },
+];
+
+stories.add("Simple non nested", () => (
   <NestedAccordionMenu
-    items={itemsCoreModules}
+    items={simpleNonNestedItems}
     currentPath="project/6/journal/sub_journal_one"
     link={Link}
   />
 ));
 
-stories.add("Parent hightlighted", () => (
+stories.add("Nested parent as current", () => (
   <NestedAccordionMenu
     items={itemsCoreModulesParentHighlighted}
     currentPath="project/6/journal/sub_journal_one"
     link={Link}
   />
 ));
+
+stories.add("Nested child as current", () => (
+  <NestedAccordionMenu
+    items={itemsCoreModules}
+    currentPath="project/6/journal/sub_journal_one"
+    link={Link}
+  />
+));