enable scrollspy

src/client/js/components/PageList/Page.jsx

@@ -21,9 +21,9 @@ export default class Page extends React.Component {
     const hasChildren = this.props.children != null;
 
     return (
-      <li className="page-list-li d-flex align-items-center w-100">
+      <li className="nav-item page-list-li d-flex align-items-center w-100">
         <UserPicture user={page.lastUpdateUser} />
-        <a className="page-list-link" href={link}>
+        <a className="page-list-link nav-link" href={link}>
           <PagePath page={page} excludePathString={this.props.excludePathString} />
         </a>
         <PageListMeta page={page} />

src/client/js/components/SearchPage/SearchResult.jsx

@@ -239,7 +239,7 @@ class SearchResult extends React.Component {
     }
 
     const listView = this.props.pages.map((page) => {
-      const pageId = `#${page._id}`;
+      const pageId = `#id_${page._id}`;
       return (
         <Page
           page={page}
@@ -288,7 +288,7 @@ class SearchResult extends React.Component {
               </div>
 
               <div className="page-list">
-                <ul className="page-list-ul page-list-ul-flat nav">{listView}</ul>
+                <ul className="page-list-ul page-list-ul-flat nav nav-pills">{listView}</ul>
               </div>
             </nav>
           </div>

src/client/js/components/SearchPage/SearchResultList.jsx

@@ -18,7 +18,7 @@ class SearchResultList extends React.Component {
       const showTags = (page.tags != null) && (page.tags.length > 0);
 
       return (
-        <div id={page._id} key={page._id} className="search-result-page mb-5">
+        <div id={`id_${page._id}`} key={page._id} className="search-result-page mb-5">
           <h2>
             <a href={page.path}>{page.path}</a>
             { showTags && (

src/client/styles/scss/_page_list.scss

@@ -21,11 +21,6 @@
         display: inline;
         padding: 0 4px;
         color: inherit;
-
-        &:hover {
-          color: inherit;
-          text-decoration: none;
-        }
       }
 
       > span.page-list-meta {

src/client/styles/scss/_search.scss

@@ -120,13 +120,18 @@
     height: 100vh;
     overflow-y: scroll;
 
-    .nav {
+    .nav.nav-pills {
       > li {
         padding: 2px 8px;
 
-        &.active {
-          padding-right: 5px;
-          border-right: solid 3px transparent;
+        > a {
+          &:hover {
+            color: inherit;
+            text-decoration: none;
+          }
+          &.active {
+            border-right: solid 3px transparent;
+          }
         }
       }
     }

src/client/styles/scss/theme/_apply-colors.scss

@@ -283,7 +283,7 @@ body.on-edit {
           background-color: darken($bgcolor-global, 4%);
         }
 
-        li.active {
+        a.active {
           background-color: darken($bgcolor-global, 8%);
           border-color: theme-color('primary');
         }