Adapted WBNavbar to handle URLs in addition to onclick callbacks.

frontend/src/js/component/wb-navbar-common.js

@@ -5,15 +5,19 @@ import WBInlineSearch from 'wb-inline-search';
 class WBNavbarCommon extends Component {
   render({ app, items, activeItem }) {
     return (
-      <WBNavbar items={ [
-        { 'name': 'Home', 'id': 'home' },
-        { 'name': 'All Projects', 'id': 'all-projects' },
-        { 'name': 'All Users', 'id': 'all-users' },
-        { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
-      ].concat(items) } rhs={ (
-        <WBInlineSearch />
-      ) } onItemClicked={ item => app.navbarItemClicked(item) }
-      activeItem={ activeItem } />
+      <WBNavbar
+        items={ [
+          { 'name': 'Home', 'id': 'home' },
+          { 'name': 'All Projects', 'id': 'all-projects' },
+          { 'name': 'All Users', 'id': 'all-users' },
+          { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
+        ].concat(items) }
+        rhs={ (
+          <WBInlineSearch />
+        ) }
+        titleUrl = { '/browse/' + app.state.currentUser.uuid }
+        getItemUrl={ item => app.navbarItemUrl(item) }
+        activeItem={ activeItem } />
     );
   }
 }

frontend/src/js/page/wb-app.js

@@ -26,22 +26,18 @@ class WBApp extends Component {
     };
   }
 
-  navbarItemClicked(item) {
+  navbarItemUrl(item) {
     if (item['id'] === 'sign-out') {
       delete window.localStorage['arvHost'];
       delete window.localStorage['arvToken'];
       delete window.localStorage['currentUser'];
-      route('/sign-in');
-
+      return ('/sign-in');
     } else if (item['id'] === 'home') {
-      route('/browse/' + this.appState.currentUser.uuid);
-
+      return ('/browse/' + this.appState.currentUser.uuid);
     } else if (item['id'] === 'all-projects') {
-      route('/browse');
-
+      return ('/browse');
     } else if (item['id'] === 'all-users') {
-      route('/users');
-      
+      return ('/users');
     }
   }
 

frontend/src/js/widget/wb-navbar.js

@@ -1,10 +1,12 @@
 import { h, Component } from 'preact';
 
 class WBNavbar extends Component {
-  render({ title, items, rhs, onItemClicked, onTitleClicked, activeItem }) {
+  render({ title, items, rhs, onItemClicked, onTitleClicked,
+    activeItem, titleUrl, getItemUrl }) {
+
     return (
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#" onclick={ e => { e.preventDefault(); onTitleClicked(); } }>{ title }</a>
+        <a class="navbar-brand" href={ titleUrl } onclick={ e => this.titleClicked(e) }>{ title }</a>
 
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -45,7 +47,8 @@ class WBNavbar extends Component {
                         { i['dropdown'].map(d => {
                           if (typeof(d) === 'string')
                             return (
-                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
+                              <a class="dropdown-item" href={ getItemUrl(d) }
+                                onclick={ e => this.itemClicked(e, d) }>{ d }</a>
                             );
 
                           else if (typeof(d) === 'object' && d['divider'])
@@ -55,7 +58,8 @@ class WBNavbar extends Component {
 
                           else if (typeof(d) === 'object' && d['name'])
                             return (
-                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d['name'] }</a>
+                              <a class="dropdown-item" href={ getItemUrl(d) }
+                                onclick={ e => this.itemClicked(e, d) }>{ d['name'] }</a>
                             );
                         }) }
                       </div>
@@ -67,7 +71,8 @@ class WBNavbar extends Component {
 
                   return (
                     <li class={ li_cls }>
-                      <a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
+                      <a class={ a_cls } href={ getItemUrl(i) }
+                        onclick={ e => this.itemClicked(e, i) }>{ i['name'] }</a>
                     </li>
                   );
                 }
@@ -80,15 +85,31 @@ class WBNavbar extends Component {
       </nav>
     );
   }
+
+  titleClicked(e) {
+    let { onTitleClicked } = this.props;
+    if (!onTitleClicked)
+      return;
+    e.preventDefault();
+    onTitleClicked();
+  }
+
+  itemClicked(e, i) {
+    let { onItemClicked } = this.props;
+    if (!onItemClicked)
+      return;
+    e.preventDefault();
+    onItemClicked(i);
+  }
 }
 
 WBNavbar.defaultProps = {
   'title': 'Workbench Advanced',
   'items': [],
   'form': null,
-  'onItemClicked': () => {},
-  'onTitleClicked': () => {},
-  'activeItem': null
+  'activeItem': null,
+  'titleUrl': '#',
+  'getItemUrl': () => ('#')
 }
 
 export default WBNavbar;