Fix sidebar and banners

webapp/src/components/DataPage.tsx

 import React, { ReactElement } from "react";
 import { Container, Row, Col } from "react-bootstrap";
 import OrganizationSidebar from "./OrganizationSidebar";
+import PageHeader from "../components/global/PageHeader"
+import SectionLink from "../components/global/SectionLink";
 
 interface inputProps {
     title: string,
@@ -12,7 +14,10 @@ function DataPage({ title, filter, children }: inputProps): ReactElement {
     return (
         <>
             <OrganizationSidebar />
-            <Container>
+            <PageHeader type={'data'} header={'Compendium Data'}>
+                <SectionLink section={"Reports"} />
+            </PageHeader>
+            <Container className="grow">
                 <Col xs={9}>
                     <Row>
                         <h3 className="m-4">{title}</h3>

webapp/src/components/OrganizationSidebar.tsx

@@ -6,8 +6,9 @@ import Sidebar from './SideBar';
 const OrganizationSidebar = () => {
     return (
         <Sidebar>
+            <h5>Organisation</h5>
             <Row>
-                <Link to="/analysis" className="link-text-underline">
+                <Link to="/budget" className="link-text-underline">
                     <span>Budget of NRENs per Year</span>
                 </Link>
             </Row>
@@ -53,7 +54,7 @@ const OrganizationSidebar = () => {
                 <Link to="/policy" className="link-text-underline">
                     <span>NREN Policies</span>
                 </Link>
-            </Row>            
+            </Row>
         </Sidebar>
     )
 }

webapp/src/components/SideBar.tsx

-import React, { useContext } from 'react';
+import React, { useState } from 'react';
 import { sidebarContext } from "../helpers/SidebarProvider";
+import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';
 
 
 interface Props {
@@ -8,16 +9,24 @@ interface Props {
 
 const Sidebar: React.FC<Props> = ({ children }) => {
 
-    const { show, toggle } = useContext(sidebarContext);
+    const [show, setShow] = useState<boolean>(false);
+
+    const toggle = () => {
+        setShow(!show);
+    };
 
     return (
         <div className="sidebar-wrapper">
             <nav className={show ? '' : 'no-sidebar'} id="sidebar">
                 <div className={`menu-items`}>{children}</div>
             </nav>
-            <button className="toggle-btn" onClick={toggle}>
-                {show ? 'Hide Sidebar' : 'Show Sidebar'}
-            </button>
+            <div className="toggle-btn" onClick={toggle}>
+                <div className='toggle-btn-wrapper'>
+                    <span>MENU</span> {show ?
+                        <AiOutlineClose style={{ color: 'white', paddingBottom: "3px", scale: "1.3" }} /> :
+                        <AiOutlinePlus style={{ color: 'white', paddingBottom: "3px", scale: "1.3" }} />}
+                </div>
+            </div>
         </div>
     );
 };

webapp/src/components/global/Banner.tsx

@@ -20,20 +20,17 @@ function Banner({ children, type }: inputProps): ReactElement {
 
             <Container>
                 <Row>
-                    <Col sm={8}>
-                        <Row>
-                            <Col sm={2}>
-                                <img src={SectionDataLogo} style={{ maxWidth: '80%' }} />
-                            </Col>
-
-                            <Col sm={8}>
-                                <div className="center-text max-width-100vw">
+                    <Row>
+                        <div className="section-container" style={{ marginLeft: '-1.5%' }}>
+                            <img src={SectionDataLogo} style={{ maxWidth: '7rem', marginBottom: '1rem' }} />
+                            <div style={{ display: "flex", alignSelf: "right" }}>
+                                <div className="center-text" style={{paddingTop:'1rem'}}>
                                     {children}
                                 </div>
+                            </div>
+                        </div>
 
-                            </Col>
-                        </Row>
-                    </Col>
+                    </Row>
 
                 </Row>
             </Container>

webapp/src/components/global/SectionLink.tsx

-
-
 import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+
+import SectionDataLogo from "../../images/home_reports_icon.svg";
 
 interface inputProps {
     section: string
@@ -8,9 +9,17 @@ interface inputProps {
 
 function SectionLink({ section }: inputProps): ReactElement {
     return (
-        <div style={{ float: "right" }} className={'bold-caps-20pt'}>
-            <span>Compendium</span><br />
-            <span style={{ float: "right" }}>{section}</span>
+        <div className={'bold-caps-17pt section-container'}>
+            <div style={{ display: "flex", alignSelf: "right", lineHeight: "1.5rem", marginTop: "0.5rem"}}>
+                <span>
+                    Compendium <br />
+                    <span style={{ float: "right" }}>{section}</span>
+                </span>
+                
+                
+            </div>
+            <img src={SectionDataLogo} style={{ maxWidth: "4rem" }} />
+
         </div>
     );
 }

webapp/src/scss/layout/Sidebar.scss

@@ -3,6 +3,7 @@
     position: fixed;
     z-index: 1;
     top: calc(50vh - 10%);
+    pointer-events: none;
 
     .menu-items {
         padding: 10px;
@@ -10,23 +11,51 @@
 }
 
 .sidebar-wrapper>nav {
-    transition: 0.25s;
+    visibility: visible;
+    opacity: 1;
     // transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    transition-property: margin-left;
+    transition-property: margin-left, opacity;
+    transition: 0.25s;
     margin-left: 0;
     background-color: #fff;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    border: $yellow-orange 2px solid;
+    pointer-events: auto;
 
     a {
+        padding-top: 0.3rem;
+        padding-left: 1.5rem;
         text-decoration: none;
     }
 
     a:hover {
-        background-color: $yellow-orange;
+        color: $yellow-orange;
         text-decoration: none;
     }
 }
 
 nav.no-sidebar {
-    margin-left: -79%;
+    margin-left: -80%;
+    visibility: hidden;
+    opacity: 0;
+}
+
+.toggle-btn {
+    @extend .bold-caps-16pt;
+    background-color: $yellow-orange;
+    color: white;
+    height: 3.5rem;
+    cursor: pointer;
+    padding-left: 1rem;
+    pointer-events: auto;
+
+    // prevent text selection
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+.toggle-btn-wrapper {
+    padding: 0.5rem;
+    padding-top: 0.7rem;
 }
\ No newline at end of file

webapp/src/scss/layout/_components.scss

@@ -2,18 +2,25 @@
 
 @import '../abstracts/variables';
 @import '../layout/Sidebar';
+@import '../layout/SectionNavigation';
 
 .rounded-border {
   border-radius: 25px;
   border: 1px solid $light-ash-grey
 }
 
-.geant-container {
-  max-width: 100vw;
-  min-height: 95%;
-  height: auto;
+.grow {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-bottom: 2%;
+}
 
+.geant-container {
+  @extend .grow;
   padding: 2% 0;
+  max-width: 100vw;
+  height: 100%;
 }
 
 .grey-container {
@@ -22,23 +29,10 @@
 }
 
 .wordwrap {
-  max-width: 40vw;
+  max-width: 60rem;
   word-wrap: break-word;
 }
 
-
-@media screen and (max-aspect-ratio: 1/1) {
-  .wordwrap {
-    max-width: max(66vw, 66%);
-  }
-}
-
-@media screen and (max-width: 1920px) {
-  .wordwrap {
-    max-width: 50%;
-  }
-}
-
 .center {
   display: flex;
   align-items: center;
@@ -54,10 +48,6 @@
   flex-direction: column;
 }
 
-.max-width-100vw {
-  max-width: 100vw;
-}
-
 .compendium-data-header {
   background-color: $yellow;
   color: white;
@@ -161,24 +151,34 @@
 }
 
 .btn-compendium-year {
-  --bs-btn-color:#6c757d;
-  --bs-btn-border-color:#6c757d;
-  --bs-btn-hover-color:#fff;
-  --bs-btn-hover-bg:#6c757d;
-  --bs-btn-hover-border-color:#6c757d;
-  --bs-btn-focus-shadow-rgb:108,117,125;
-  --bs-btn-active-color:#fff;
-  --bs-btn-active-bg:#6c757d;
-  --bs-btn-active-border-color:#6c757d;
-  --bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color:#6c757d;
-  --bs-btn-disabled-bg:transparent;
-  --bs-btn-disabled-border-color:#6c757d;
-  --bs-gradient:none;
+  --bs-btn-color: #6c757d;
+  --bs-btn-border-color: #6c757d;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #6c757d;
+  --bs-btn-hover-border-color: #6c757d;
+  --bs-btn-focus-shadow-rgb: 108, 117, 125;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #6c757d;
+  --bs-btn-active-border-color: #6c757d;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #6c757d;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #6c757d;
+  --bs-gradient: none;
   --bs-btn-border-radius: none;
 }
 
-$year-colors: (#fd7f6f, #7eb0d5, #ffee65, #bd7ebe, #beb9db, #b2e061, #ffb55a, #fdcce5, #8bd3c7);
+$year-colors: (
+  #fd7f6f,
+  #7eb0d5,
+  #ffee65,
+  #bd7ebe,
+  #beb9db,
+  #b2e061,
+  #ffb55a,
+  #fdcce5,
+  #8bd3c7
+);
 
 @for $i from 0 to list.length($year-colors) {
   .color-of-the-year-#{$i} {
@@ -261,4 +261,9 @@ $year-colors: (#fd7f6f, #7eb0d5, #ffee65, #bd7ebe, #beb9db, #b2e061, #ffb55a, #f
   top: 0;
   bottom: 0;
   border-top: 4px dotted #a7a7a7;
-}
+}
\ No newline at end of file
+
+.section-container {
+  display: flex;
+  margin-left: 5em;
+}