New breadcrumbs (#1590)

Add top navbar

5 files changed, 41 insertions, 61 deletions

diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss
index 601ddfa7..97f91292 100644
--- a/plugins/base/frontend/src/main/components/app/index.scss
+++ b/plugins/base/frontend/src/main/components/app/index.scss
@@ -17,17 +17,11 @@ html,
 }
 
 .search-content {
-  padding-top: 24px;
-  margin: 0 41px;
-  position: absolute;
-  top: 0;
-  right: 0;
   z-index: 8;
   background-color: #f4f4f4;
 }
 
 @media screen and (max-width: 759px){
     .search-content {
-        margin: 0 8px;
     }
 }
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
index 400631e6..aaa897a8 100644
--- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
+++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
@@ -52,6 +52,7 @@
 
                 &>a {
                     margin: 0 2em;
+                    cursor: pointer;
                 }
 
                 &.selected {
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
index 1aa65d9b..c5a8344f 100644
--- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
+++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
@@ -5,6 +5,8 @@ import Scrollspy from 'react-scrollspy'
 
 type PageSummaryProps = {
     entries: PageSummaryEntry[],
+    containerId: string, //Id of a container that has scroll enabled 
+    offsetComponentId: string, //Id of a top navbar component
 }
 
 type PageSummaryEntry = {
@@ -15,13 +17,12 @@ type PageSummaryEntry = {
 
 type SourceSetFilterKey = string
 
-export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummaryProps) => {
+const getElementHeightFromDom = (elementId: string): number => document.getElementById(elementId).offsetHeight
+
+export const PageSummary: React.FC<PageSummaryProps> = ({ entries, containerId, offsetComponentId }: PageSummaryProps) => {
     const [hidden, setHidden] = useState<Boolean>(true);
     const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries)
-
-    const handleMouseHover = () => {
-        setHidden(!hidden)
-    }
+    const topOffset = getElementHeightFromDom(offsetComponentId)
 
     useEffect(() => {
         const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => {
@@ -33,6 +34,17 @@ export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummary
         return () => window.removeEventListener('sourceset-filter-change', handeEvent)
     }, [entries])
 
+    const handleMouseHover = () => {
+        setHidden(!hidden)
+    }
+
+    const handleClick = (entry: PageSummaryEntry) => {
+        document.getElementById(containerId).scrollTo({
+            top: document.getElementById(entry.location).offsetTop - topOffset,
+            behavior: 'smooth'
+        })
+    }
+
     let classnames = "page-summary"
     if (hidden) classnames += " hidden"
 
@@ -45,7 +57,7 @@ export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummary
             <div className={"content-wrapper"}>
                 <h4>On this page</h4>
                 {!hidden && <Scrollspy items={displayableEntries.map((e) => e.location)} currentClassName="selected">
-                    {displayableEntries.map((item) => <li><a href={'#' + item.location}>{item.label}</a></li>)}
+                    {displayableEntries.map((item) => <li><a onClick={() => handleClick(item)}>{item.label}</a></li>)}
                 </Scrollspy>}
             </div>
         </div>
diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx
index cb070dfb..4161a4c1 100644
--- a/plugins/base/frontend/src/main/components/root.tsx
+++ b/plugins/base/frontend/src/main/components/root.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from 'react-dom';
-import RedBox from 'redbox-react';
 import _ from "lodash";
 
 import App from "./app";
@@ -8,9 +7,6 @@ import './app/index.scss';
 import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch';
 import { PageSummary } from './pageSummary/pageSummary';
 
-const appEl = document.getElementById('searchBar');
-const rootEl = document.createElement('div');
-
 const renderNavigationPane = () => {
   render(
     <NavigationPaneSearch />,
@@ -19,57 +15,33 @@ const renderNavigationPane = () => {
 }
 
 const renderOnThisPage = () => {
-  document.addEventListener('DOMContentLoaded', () => {
-    for (const e of document.querySelectorAll('.tabs-section-body > div[data-togglable]')) {
-      const entries = Array.from(e.querySelectorAll('a[anchor-label]')).map((element: HTMLElement) => {
-        return {
-          location: element.getAttribute('data-name'),
-          label: element.getAttribute('anchor-label'),
-          sourceSets: _.sortBy(element.getAttribute('data-filterable-set').split(' '))
-        }
-      })
-      const unique = _.uniqBy(entries, ({label}) => label)
-      if (unique.length) {
-        const element = document.createElement('div')
-        render(<PageSummary entries={unique} />, element)
-        e.appendChild(element)
+  for (const e of document.querySelectorAll('.tabs-section-body > div[data-togglable]')) {
+    const entries = Array.from(e.querySelectorAll('a[anchor-label]')).map((element: HTMLElement) => {
+      return {
+        location: element.getAttribute('data-name'),
+        label: element.getAttribute('anchor-label'),
+        sourceSets: _.sortBy(element.getAttribute('data-filterable-set').split(' '))
       }
+    })
+    const unique = _.uniqBy(entries, ({label}) => label)
+    if (unique.length) {
+      const element = document.createElement('div')
+      render(<PageSummary entries={unique} containerId={'main'} offsetComponentId={'navigation-wrapper'}/>, element)
+      e.appendChild(element)
     }
-  })
+  }
+}
+
+const renderMainSearch = () => {
+  render(<App />, document.getElementById('searchBar'));
 }
 
 let renderApp = () => {
-  render(
-    <App />,
-    rootEl
-  );
+  renderMainSearch();
   renderNavigationPane();
   renderOnThisPage();
-};
 
-// @ts-ignore
-if (module.hot) {
-  const renderAppHot = renderApp;
-  const renderError = (error: Error) => {
-    render(
-      <RedBox error={error} />,
-      rootEl
-    );
-  };
-
-  renderApp = () => {
-    try {
-      renderAppHot();
-    } catch (error) {
-      renderError(error);
-    }
-  };
-
-  // @ts-ignore
-  module.hot.accept('./app', () => {
-    setTimeout(renderApp);
-  });
-}
+  document.removeEventListener('DOMContentLoaded', renderApp);
+};
 
-renderApp();
-appEl!.appendChild(rootEl);
+document.addEventListener('DOMContentLoaded', renderApp);
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index e7e7673d..8965c5ea 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -4,6 +4,7 @@
     fill: #637282;
     background: #F4F4F4;
     cursor: pointer;
+    margin-top: 3px;
 
     &:focus {
       outline: none;