diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
index 890e531e889121c1d9160350c636d736dc2895cb..3a4745b07f0be9e0a0e83e3cf2b010a0afeb1d36 100644
--- a/webapp/src/components/CollapsibleBox.tsx
+++ b/webapp/src/components/CollapsibleBox.tsx
@@ -5,10 +5,11 @@ import { GrAdd, GrSubtract } from 'react-icons/gr';
interface CollapsibleBoxProps {
title: string;
children: React.ReactNode;
+ startCollapsed?: boolean;
}
-const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
- const [isCollapsed, setIsCollapsed] = useState(false);
+const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children, startCollapsed }) => {
+ const [isCollapsed, setIsCollapsed] = useState(!!startCollapsed);
return (
<div className='collapsible-box'>
diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx
index 8af88698ee0e9a0406d52ac70e9de5ac63909980..c067a1f3db80ba4058c7b2c24b9139264b78a357 100644
--- a/webapp/src/pages/CompendiumData.tsx
+++ b/webapp/src/pages/CompendiumData.tsx
@@ -5,6 +5,7 @@ import PageHeader from "../components/global/PageHeader"
import SectionLink from "../components/global/SectionLink";
import Banner from "../components/global/Banner";
import { Link } from "react-router-dom";
+import { Sections } from "../helpers/constants";
function CompendiumData(): ReactElement {
return (
@@ -25,7 +26,7 @@ function CompendiumData(): ReactElement {
<Row>
<div className="center">
- <CollapsibleBox title="ORGANISATION">
+ <CollapsibleBox title={Sections.Organisation}>
<div className="collapsible-column">
<Row>
@@ -71,11 +72,35 @@ function CompendiumData(): ReactElement {
<span>NREN Involvement in European Commission Projects</span>
</Link>
</Row>
+
+ </div>
+ </CollapsibleBox>
+
+ <CollapsibleBox title={Sections.Policy} startCollapsed>
+ <div className="collapsible-column">
+
<Row>
<Link to="/policy" className="link-text-underline">
<span>NREN Policies</span>
</Link>
- </Row>
+ </Row>
+
+ </div>
+ </CollapsibleBox>
+
+ <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed>
+ <div className="collapsible-column">
+ <h5>Coming Soon</h5>
+ </div>
+ </CollapsibleBox>
+ <CollapsibleBox title={Sections.Network} startCollapsed>
+ <div className="collapsible-column">
+ <h5>Coming Soon</h5>
+ </div>
+ </CollapsibleBox>
+ <CollapsibleBox title={Sections.Services} startCollapsed>
+ <div className="collapsible-column">
+ <h5>Coming Soon</h5>
</div>
</CollapsibleBox>
</div>