Add navigation boxes for each section

webapp/src/components/DataPage.tsx

@@ -3,20 +3,24 @@ import { Container, Row, Col } from "react-bootstrap";
 import OrganizationSidebar from "./OrganizationSidebar";
 import PageHeader from "../components/global/PageHeader"
 import SectionLink from "../components/global/SectionLink";
+import SectionNavigation from "./SectionNavigation";
+import { Sections } from "../helpers/constants";
 
 interface inputProps {
     title: string,
     filter: ReactElement,
-    children: ReactElement
+    children: ReactElement,
+    category: Sections
 }
 
-function DataPage({ title, filter, children }: inputProps): ReactElement {
+function DataPage({ title, filter, children, category }: inputProps): ReactElement {
     return (
         <>
             <OrganizationSidebar />
             <PageHeader type={'data'} header={'Compendium Data'}>
                 <SectionLink section={"Reports"} />
             </PageHeader>
+            <SectionNavigation activeCategory={category} />
             <Container className="grow">
                 <Col xs={9}>
                     <Row>

webapp/src/components/SectionNavigation.tsx

+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container, Row, ButtonToolbar, Button } from 'react-bootstrap';
+import { Sections } from '../helpers/constants';
+
+interface inputProps {
+    activeCategory: Sections
+}
+
+const SectionNavigation = ({ activeCategory }: inputProps) => {
+    return (
+        <Container>
+            <Row>
+                <ButtonToolbar className="navbox-bar gap-2 m-3">
+                    <Link to={activeCategory === Sections.Organisation ? '.' : '/funding'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Organisation}>
+                            <span>{Sections.Organisation}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.Policy ? '.' : '/policy'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Policy}>
+                            <span>{Sections.Policy}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.ConnectedUsers ? '.' : '.'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.ConnectedUsers}
+                            disabled={true}>
+                            <span>{Sections.ConnectedUsers}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.Network ? '.' : '.'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Network}
+                            disabled={true}>
+                            <span>{Sections.Network}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.Services ? '.' : '.'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Services}
+                            disabled={true}>
+                            <span>{Sections.Services}</span>
+                        </Button>
+                    </Link>
+                </ButtonToolbar>
+            </Row>
+        </Container>
+
+    )
+}
+
+export default SectionNavigation
\ No newline at end of file

webapp/src/helpers/constants.ts

+export enum Sections {
+    Organisation = 'ORGANISATION',
+    Policy = 'STANDARDS AND POLICIES',
+    ConnectedUsers = 'CONNECTED USERS',
+    Network = 'NETWORK',
+    Services = 'SERVICES',
+};

webapp/src/pages/Budget.tsx

@@ -6,6 +6,7 @@ import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionF
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter";
 import LineGraph from "../components/graphing/LineGraph";
+import { Sections } from '../helpers/constants';
 
 
 interface inputProps {
@@ -39,7 +40,7 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
     />
 
     return (
-        <DataPage title="Budgets" filter={filterNode}>
+        <DataPage title="Budgets" category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
                     <LineGraph data={budgetData} />

webapp/src/pages/ChargingStructure.tsx

@@ -7,6 +7,7 @@ import { createChargingStructureDataLookup, getYearsAndNrens, loadDataWithFilter
 import ColorPill from "../components/ColorPill";
 import DataPage from "../components/DataPage";
 import Filter from "../components/graphing/Filter";
+import { Sections } from "../helpers/constants";
 
 
 ChartJS.register(
@@ -49,7 +50,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
     />
 
     return (
-        <DataPage title="Charging Structure" filter={filterNode}>
+        <DataPage title="Charging Structure" category={Sections.Organisation} filter={filterNode}>
             <Table className="charging-struct-table" striped bordered responsive >
                 <colgroup>
                     <col span={1} style={{ width: "10%" }} />

webapp/src/pages/ECProjects.tsx

@@ -5,6 +5,7 @@ import { ECProject, FilterSelection } from "../Schema";
 import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 interface inputProps {
@@ -54,7 +55,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Involvement in European Commission Projects" filter={filterNode}>
+        <DataPage title="NREN Involvement in European Commission Projects" category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/pages/FundingSource.tsx

@@ -6,6 +6,7 @@ import { FundingSource, FilterSelection } from "../Schema";
 import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 ChartJS.register(
@@ -97,7 +98,7 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
 
 
     return (
-        <DataPage title="Funding Source" filter={filterNode}>
+        <DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}>
             <div className="chart-container" style={{ 'minHeight': '100vh', 'width': '60vw', }}>
                 <Bar
                     data={fundingSourceDataset}

webapp/src/pages/Landing.tsx

@@ -8,7 +8,7 @@ function Landing(): ReactElement {
     return (
         <Container className="grey-container">
             <Row>
-                <div className="center-text max-width-100vw">
+                <div className="center-text">
                     <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>
                     <br />
                     <div className="wordwrap">

webapp/src/pages/ParentOrganisation.tsx

@@ -5,6 +5,7 @@ import { Organisation, FilterSelection } from "../Schema";
 import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -49,7 +50,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
     />
 
     return (
-        <DataPage title="NREN Parent Organisations" filter={filterNode}>
+        <DataPage title="NREN Parent Organisations" category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/pages/Policy.tsx

@@ -5,6 +5,7 @@ import { Policy, FilterSelection } from "../Schema";
 import { createPolicyDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 interface inputProps {
     filterSelection: FilterSelection
@@ -69,7 +70,7 @@ function PolicyPage({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Policies" filter={filterNode}>
+        <DataPage title="NREN Policies" category={Sections.Policy} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/pages/StaffGraph.tsx

@@ -6,6 +6,7 @@ import { NrenStaff, FilterSelection } from "../Schema";
 import { createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 ChartJS.register(
@@ -103,7 +104,7 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
 
     const text = roles ? "Roles" : "Employment";
     return (
-        <DataPage title={"NREN Staff " + text} filter={filterNode}>
+        <DataPage title={"NREN Staff " + text} category={Sections.Organisation} filter={filterNode}>
             <div className="chart-container" style={{ 'minHeight': '60vh', 'width': '60vw', }}>
                 <Bar
                     data={nrenStaffDataset}

webapp/src/pages/SubOrganisation.tsx

@@ -5,6 +5,7 @@ import { Organisation, FilterSelection } from "../Schema";
 import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -54,7 +55,7 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Suborganisations" filter={filterNode}>
+        <DataPage title="NREN Suborganisations" category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/scss/layout/SectionNavigation.scss

+@import '../abstracts/variables';
+
+.btn-nav-box {
+    --bs-btn-color: rgb(0, 63, 95);
+    --bs-btn-border-color: #6c757d;
+    --bs-btn-border-radius: none;
+
+    // active
+    --bs-btn-active-color: #fff;
+    // see https://stackoverflow.com/a/76213205 for why this syntax is necessary
+    --bs-btn-active-bg: #{$yellow-orange};
+    --bs-btn-active-border-color: #{$yellow-orange};
+
+    // hover
+    --bs-btn-hover-color: rgb(0, 63, 95);
+    --bs-btn-hover-bg: #{$yellow-orange};
+    --bs-btn-hover-border-color: #{$yellow-orange};
+
+
+    // disabled
+    --bs-btn-disabled-color: #6c757d;
+    --bs-btn-disabled-bg: transparent;
+    // --bs-btn-disabled-border-color: #6c757d;
+
+    border: 2px solid $yellow-orange;
+}
\ No newline at end of file