Fix the active class name behavior and colors for links in the example page (Merge PR #50)

Author: julienw

examples/index.html

@@ -30,11 +30,16 @@
                 vertical-align: bottom;
             }
 
-            .link-active,
-            .link-active:focus,
-            .link-active:hover {
+            .pure-menu-link {
+              /* Override pure CSS color to add more contrast for accessibility */
+              color: #737373;
+            }
+
+            .pure-menu-link.active,
+            .pure-menu-link.active:focus,
+            .pure-menu-link.active:hover {
                 color: #fff;
-                background: #20a0ff;
+                background: #0060df;
             }
 
             .well {

examples/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter as Router, Route, NavLink as Link, Routes } from 'react-router-dom';
+import { HashRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
 
 import SimpleMenu from './SimpleMenu';
 import MultipleTargets from './MultipleTargets';
@@ -14,8 +14,7 @@ import Nested from './Nested';
 import './react-contextmenu.css';
 
 const commonProps = {
-    className: 'pure-menu-link',
-    activeClassName: 'link-active'
+    className: 'pure-menu-link'
 };
 
 function App() {
@@ -24,44 +23,44 @@ function App() {
             <div className='pure-menu pure-menu-horizontal'>
                 <ul className='pure-menu-list'>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/simple-menu'>
+                        <NavLink {...commonProps} to='/simple-menu'>
                             Simple Menu
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/multiple-targets'>
+                        <NavLink {...commonProps} to='/multiple-targets'>
                             Multiple Targets
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/multiple-menus'>
+                        <NavLink {...commonProps} to='/multiple-menus'>
                             Multiple Menus
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/submenus'>
+                        <NavLink {...commonProps} to='/submenus'>
                             Sub Menus
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/dynamic-menu'>
+                        <NavLink {...commonProps} to='/dynamic-menu'>
                             Dynamic Menu
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/customization'>
+                        <NavLink {...commonProps} to='/customization'>
                             Customization
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/rtl-submenus'>
+                        <NavLink {...commonProps} to='/rtl-submenus'>
                             Right-to-Left
-                        </Link>
+                        </NavLink>
                     </li>
                     <li className='pure-menu-item'>
-                        <Link {...commonProps} to='/nested'>
+                        <NavLink {...commonProps} to='/nested'>
                             Nested
-                        </Link>
+                        </NavLink>
                     </li>
                 </ul>
             </div>

examples/react-contextmenu.css

@@ -36,8 +36,8 @@
 .react-contextmenu-item.react-contextmenu-item--active,
 .react-contextmenu-item.react-contextmenu-item--selected {
     color: #fff;
-    background-color: #20a0ff;
-    border-color: #20a0ff;
+    background-color: #0060df;
+    border-color: #0060df;
     text-decoration: none;
 }