From 6eb474be88f258bd6bfd254995bbed2f171ce592 Mon Sep 17 00:00:00 2001
From: igoroctaviano <igoroctaviano@gmail.com>
Date: Thu, 25 Jun 2020 16:51:48 -0300
Subject: [PATCH] Add active state

---
 .../default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx    | 6 ++----
 extensions/default/src/ViewerLayout/index.jsx               | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx
index 1b0bb5144..6e91c0418 100644
--- a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx
+++ b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ToolbarButton } from '@ohif/ui';
 
-function NestedMenu({ children, label, icon }) {
+function NestedMenu({ children, label, icon, isActive }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleNestedMenu = () => setIsOpen(!isOpen);
@@ -20,8 +20,6 @@ function NestedMenu({ children, label, icon }) {
     };
   }, [isOpen]);
 
-  const isActive = isOpen || children.props.children.some(c => c.props.isActive);
-
   return (
     <ToolbarButton
       id="NestedMenu"
@@ -29,7 +27,7 @@ function NestedMenu({ children, label, icon }) {
       icon={icon}
       onClick={toggleNestedMenu}
       dropdownContent={isOpen && children}
-      isActive={isActive}
+      isActive={isActive || isOpen}
       type="primary"
     />
   );
diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx
index e82352c57..cf2c11826 100644
--- a/extensions/default/src/ViewerLayout/index.jsx
+++ b/extensions/default/src/ViewerLayout/index.jsx
@@ -55,7 +55,7 @@ function ViewerLayout({
     };
   };
 
-  const defaultTool = { icon: 'tool-more-menu', label: 'More' };
+  const defaultTool = { icon: 'tool-more-menu', label: 'More', isActive: false };
   const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
   const [activeTool, setActiveTool] = useState(defaultTool);
 
@@ -102,7 +102,7 @@ function ViewerLayout({
               return <Component key={id} id={id} {...componentProps} />;
             } else {
               return (
-                <NestedMenu icon={activeTool.icon} label={activeTool.label}>
+                <NestedMenu isActive={activeTool.isActive} icon={activeTool.icon} label={activeTool.label}>
                   <div className="flex">
                     {toolDef.map(x => {
                       const { id, Component, componentProps } = x;