Add collapsible boxes for all sections

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'>

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>