diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx
index de98ae82985c87167eb0bfd1825081e3a22f0d3a..31bff5ad24eef0bc48cc8acdde2e779fd08b7a10 100644
--- a/webapp/src/components/DataPage.tsx
+++ b/webapp/src/components/DataPage.tsx
@@ -1,6 +1,8 @@
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>
diff --git a/webapp/src/components/OrganizationSidebar.tsx b/webapp/src/components/OrganizationSidebar.tsx
index 7b6e39eb1c61549df13adedad06c6f921122fcac..3805351ee8275e32fd111cedca769474cea56578 100644
--- a/webapp/src/components/OrganizationSidebar.tsx
+++ b/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>
)
}
diff --git a/webapp/src/components/SideBar.tsx b/webapp/src/components/SideBar.tsx
index ddcab7d498061b8d973fb06b05c6e00f2755fe22..437eaa6c429f909237b98cb1b5090f334ff75fe5 100644
--- a/webapp/src/components/SideBar.tsx
+++ b/webapp/src/components/SideBar.tsx
@@ -1,5 +1,6 @@
-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>
);
};
diff --git a/webapp/src/components/global/Banner.tsx b/webapp/src/components/global/Banner.tsx
index 3cfa8afb158de155ab80c145175583475ac85b4e..2aed408bd655e92b44337e68da14379a00069edb 100644
--- a/webapp/src/components/global/Banner.tsx
+++ b/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>
diff --git a/webapp/src/components/global/SectionLink.tsx b/webapp/src/components/global/SectionLink.tsx
index 7bcba6ce3b34362f1ccb309b3823deadfae60f57..0a6d41815c088a8c0977f8fe3b3f952a5489f3af 100644
--- a/webapp/src/components/global/SectionLink.tsx
+++ b/webapp/src/components/global/SectionLink.tsx
@@ -1,6 +1,7 @@
-
-
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>
);
}
diff --git a/webapp/src/scss/layout/Sidebar.scss b/webapp/src/scss/layout/Sidebar.scss
index 7172926c577bcb9f7c41b6c3415c7d84634eea01..4efb5c28d8b002b8802f8523b51c5060e4067b81 100644
--- a/webapp/src/scss/layout/Sidebar.scss
+++ b/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
diff --git a/webapp/src/scss/layout/_components.scss b/webapp/src/scss/layout/_components.scss
index 60a823d71731ef2a10260670e33a74ad2895bc94..02804cb4602307ed4da95e87b3aefdf5aca16393 100644
--- a/webapp/src/scss/layout/_components.scss
+++ b/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;
+}