added appPath object to store application path

fixing issue DevExpress#8: user menu profile link not working

src/app-navigation.js

@@ -1,7 +1,9 @@
+import { appPath } from "./app-routes";
+
 export const navigation = [
   {
     text: 'Home',
-    path: '/home',
+    path: appPath.home,
     icon: 'home'
   },
   {
@@ -10,11 +12,11 @@ export const navigation = [
     items: [
       {
         text: 'Profile',
-        path: '/profile'
+        path: appPath.profile
       },
       {
         text: 'Tasks',
-        path: '/tasks'
+        path: appPath.tasks
       }
     ]
   }

src/app-routes.js

@@ -1,17 +1,23 @@
 import { withNavigationWatcher } from './contexts/navigation';
 import { HomePage, TasksPage, ProfilePage } from './pages';
 
+export const appPath = {
+  tasks: '/tasks',
+  profile: '/profile',
+  home: '/home,'
+}
+
 const routes = [
   {
-    path: '/tasks',
+    path: appPath.tasks,
     component: TasksPage
   },
   {
-    path: '/profile',
+    path: appPath.profile,
     component: ProfilePage
   },
   {
-    path: '/home',
+    path: appPath.home,
     component: HomePage
   }
 ];

src/components/user-panel/user-panel.js

@@ -3,21 +3,25 @@ import ContextMenu, { Position } from 'devextreme-react/context-menu';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
 import './user-panel.scss';
+import { useHistory } from 'react-router-dom';
+import { appPath } from '../../app-routes';
 
 export default function ({ menuMode }) {
   const { user, signOut } = useAuth();
+  const history = useHistory();
 
   const menuItems = useMemo(() => ([
     {
       text: 'Profile',
-      icon: 'user'
+      icon: 'user',
+      onClick: () => history.push(appPath.profile)
     },
     {
       text: 'Logout',
       icon: 'runner',
       onClick: signOut
     }
-  ]), [signOut]);
+  ]), [signOut, history]);
 
   return (
     <div className={'user-panel'}>