New: Indicator when Filter is applied

frontend/src/Components/Menu/PageMenuButton.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import MenuButton from 'Components/Menu/MenuButton';
 import styles from './PageMenuButton.css';
@@ -8,6 +10,7 @@ function PageMenuButton(props) {
   const {
     iconName,
     text,
+    indicator,
     ...otherProps
   } = props;
 
@@ -21,6 +24,22 @@ function PageMenuButton(props) {
         size={18}
       />
 
+      {
+        indicator &&
+          <span
+            className={classNames(
+              styles.indicatorContainer,
+              'fa-layers fa-fw'
+            )}
+          >
+            <Icon
+              className={styles.indicatorBackground}
+              name={icons.CIRCLE}
+              size={10}
+            />
+          </span>
+      }
+
       <div className={styles.label}>
         {text}
       </div>
@@ -30,7 +49,12 @@ function PageMenuButton(props) {
 
 PageMenuButton.propTypes = {
   iconName: PropTypes.object.isRequired,
-  text: PropTypes.string
+  text: PropTypes.string,
+  indicator: PropTypes.bool.isRequired
+};
+
+PageMenuButton.defaultProps = {
+  indicator: false
 };
 
 export default PageMenuButton;