2 files changed, 123 insertions, 0 deletions
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
new file mode 100644
index 00000000..400631e6
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
@@ -0,0 +1,70 @@
+@import "src/main/scss/index.scss";
+
+.page-summary {
+    background: $white;
+    border: 1px solid $grey-border;
+    position: fixed;
+    top: 25%;
+    max-height: 70vh;
+    right: -2px;
+    width: 250px;
+    z-index: 8;
+    transition: width .2s;
+
+    &.hidden {
+        width: 3em;
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+
+        .content-wrapper {
+            h4 {
+                margin: 0;
+                padding: 8px;
+            }
+        }
+    }
+
+    .content-wrapper {
+        padding: 0.5em 0 1em 0;
+        letter-spacing: 0.2px;
+
+        h4 {
+            margin: 0 2em;
+            font-weight: 600;
+        }
+
+        ul {
+            list-style-type: none;
+            width: 100%;
+            padding: 0;
+            margin: 1em 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            max-height: 60vh;
+
+            li {
+                width: 100%;
+                padding: 4px 0;
+
+                &:hover {
+                    background: $list-background-hover;
+                }
+
+                &>a {
+                    margin: 0 2em;
+                }
+
+                &.selected {
+                    border-left: 4px solid $hover-link-color;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 759px){
+    /* hide it on smaller screens since it looks super weird when displayed with hidden menu */
+    .page-summary {
+        display: none;
+    }
+}
+\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
new file mode 100644
index 00000000..1aa65d9b
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import './pageSummary.scss'
+import _ from "lodash";
+import Scrollspy from 'react-scrollspy'
+
+type PageSummaryProps = {
+    entries: PageSummaryEntry[],
+}
+
+type PageSummaryEntry = {
+    location: string,
+    label: string,
+    sourceSets: SourceSetFilterKey[]
+}
+
+type SourceSetFilterKey = string
+
+export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummaryProps) => {
+    const [hidden, setHidden] = useState<Boolean>(true);
+    const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries)
+
+    const handleMouseHover = () => {
+        setHidden(!hidden)
+    }
+
+    useEffect(() => {
+        const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => {
+            const displayable = entries.filter((entry) => entry.sourceSets.some((sourceset) => event.detail.includes(sourceset)))
+            setDisplayableEntries(displayable)
+        }
+
+        window.addEventListener('sourceset-filter-change', handeEvent)
+        return () => window.removeEventListener('sourceset-filter-change', handeEvent)
+    }, [entries])
+
+    let classnames = "page-summary"
+    if (hidden) classnames += " hidden"
+
+    return (
+        <div
+            className={classnames}
+            onMouseEnter={handleMouseHover}
+            onMouseLeave={handleMouseHover}
+        >
+            <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>)}
+                </Scrollspy>}
+            </div>
+        </div>
+    )
+}
+\ No newline at end of file