Current page is now visible in nav bar (current page icon is highligh…

…ted).
GeordieP · May 8, 2018 · 449165a · 449165a
1 parent 4d2093c
commit 449165a
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 14 deletions.
diff --git a/src/app/components/NavBar.jsx b/src/app/components/NavBar.jsx
@@ -1,16 +1,18 @@
 import { h } from 'hyperapp'
 import { Link } from 'hyperapp-hash-router'
 
+const applyCurRouteStyle = (curPath, routePath) =>
+    routePath === curPath ? ' selected' : ''
+
 export default (props, children) => (
     <nav>
         <div className='navBegin'>
             <Link to='/' title='Following List'>
-                <i className='fas fa-th'></i> 
+                <i className={ 'fas fa-th' + applyCurRouteStyle(props.path, '/') } />
             </Link>
 
             <Link to='/launchStream' title='Open stream by username'>
-              { /* <i className="fas fa-external-link-alt"></i> */ }
-                <i className='fas fa-share-square'></i>
+                <i className={ 'fas fa-share-square' + applyCurRouteStyle(props.path, '/launchStream') } />
             </Link>
             <div className='navChildren'>
                 { children }
@@ -19,10 +21,10 @@ export default (props, children) => (
 
         <div className='navEnd'>
             <Link to='/logs' title='Streamlink logs'>
-                <i className='fas fa-align-left'></i> 
+                <i className={ 'fas fa-align-left' + applyCurRouteStyle(props.path, '/logs') } />
             </Link>
             <Link to='/preferences' title='Preferences'>
-                <i className='fas fa-cog'></i> 
+                <i className={ 'fas fa-cog' + applyCurRouteStyle(props.path, '/preferences') } />
             </Link>
         </div>
     </nav>

diff --git a/src/app/pages/index.jsx b/src/app/pages/index.jsx
@@ -38,7 +38,8 @@ const IndexNavbar = ({
     refreshFollowList,
     showContextMenu,
     disableFollowListAutoRefresh,
-    enableFollowListAutoRefresh}) => {
+    enableFollowListAutoRefresh,
+    path }) => {
     const menuItems = [
         {
             label: 'Refresh now',
@@ -57,21 +58,21 @@ const IndexNavbar = ({
     const showMenu = event => showContextMenu({ event, items: menuItems })
 
     return (
-        <NavBar>
-            <a href='#'
+        <NavBar path={path}>
+            <a
                 title={
                     'Refresh List ' +
                     (autoRefreshEnabled ? '(Auto refresh is on)' : '(Auto refresh is disabled)')
                 }
-                className='refreshListBtn'
+                className='refreshListBtn clickable'
                 onclick={ refreshFollowList }
                 oncontextmenu={ showMenu }
-                >
+            >
                 <i className={
                     'fas fa-sync-alt ' +
                     (refreshingFollowList ? 'refreshing ' : '') +
                     (autoRefreshEnabled ? 'autoRefreshEnabled ' : '')
-                }></i> 
+                } />
             </a>
         </NavBar>
     )
@@ -90,6 +91,7 @@ export default () => (state, actions) => {
                 showContextMenu={actions.contextMenu.show}
                 disableFollowListAutoRefresh={actions.disableFollowListAutoRefresh}
                 enableFollowListAutoRefresh={actions.enableFollowListAutoRefresh}
+                path={state.location.pathname}
             />
 
             {state.streams.length > 0 ? (

diff --git a/src/app/pages/launchStream.jsx b/src/app/pages/launchStream.jsx
@@ -12,7 +12,7 @@ export default () => (state, actions) => {
 
     return (
         <main>
-            <NavBar />
+            <NavBar path={state.location.pathname}/>
 
             <section className='content'>
                 <div className='page'>

diff --git a/src/app/pages/logs.jsx b/src/app/pages/logs.jsx
@@ -23,7 +23,7 @@ export default () => (state, actions) => {
     }
     return (
         <main>
-            <NavBar />
+            <NavBar path={state.location.pathname} />
 
             <section
                 key='logsContent'

diff --git a/src/app/pages/preferences.jsx b/src/app/pages/preferences.jsx
@@ -41,7 +41,7 @@ export default () => (state, actions) => {
 
     return (
         <main id='main-preferences' key='main-preferences' oncreate={onMount}>
-            <NavBar/>
+            <NavBar path={state.location.pathname} />
 
             <section className='content'>
                 <div className='page'>

diff --git a/src/app/styles/components/NavBar.styl b/src/app/styles/components/NavBar.styl
@@ -32,6 +32,10 @@ nav {
             background: lighten($clr_pageBg, 9%)
         }
     }
+
+    .selected {
+        color: #ccc
+    }
 }
 
 // navChildren and navEnd should have subtle left borders to separate them from other nav sections

diff --git a/src/app/styles/main.styl b/src/app/styles/main.styl
@@ -83,6 +83,10 @@ strong {
     justify-content: space-between
 }
 
+.clickable {
+    cursor: pointer
+}
+
 input, select, button, textarea {
     background: lighten($clr_pageBg, 12%)
     border: none