updated with tabs, padding to faq, menuIcon and close button

openghg · Aug 23, 2023 · 415f97b · 415f97b
1 parent e4cf8e0
commit 415f97b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 18 deletions.
diff --git a/src/Dashboard.js b/src/Dashboard.js
@@ -1,23 +1,21 @@
 import React from "react";
-import { Routes, Route, Link, HashRouter } from "react-router-dom";
-import { cloneDeep, has, set} from "lodash";
+import { Routes, Route, HashRouter } from "react-router-dom";import { cloneDeep, has, set} from "lodash";
 
 import ControlPanel from "./components/ControlPanel/ControlPanel";
 import OverlayContainer from "./components/OverlayContainer/OverlayContainer";
 
-import TextButton from "./components/TextButton/TextButton";
 import Overlay from "./components/Overlay/Overlay";
 import FAQ from "./components/FAQ/FAQ";
 import LiveData from "./components/LiveData/LiveData";
 
 import { importSiteImages } from "./util/helpers";
 import styles from "./Dashboard.module.css";
+import { MenuItem } from "@mui/material";
+import MyTabs from "./components/MyTabs/MyTabs";
 
 // Site description information
 import siteInfoJSON from "./data/siteInfo.json";
 import deccMeasData from "./data/decc_example.json";
-import { Button } from "@mui/material";
-import LaunchIcon from '@mui/icons-material/Launch';
 
 class Dashboard extends React.Component {
   constructor(props) {
@@ -324,11 +322,10 @@ class Dashboard extends React.Component {
         <HashRouter>
           <div className={styles.gridContainer}>
             <div className={styles.header}>
-            <Button variant="text" href="https://catalogue.ceda.ac.uk/uuid/f5b38d1654d84b03ba79060746541e4f" target="_blank" startIcon={<LaunchIcon/>} style={{color:"#97FEED"}}>Visit DECC Public Data</Button> 
               <div className={styles.menuIcon}>
-                <TextButton styling="light" extraStyling={{ fontSize: "1.6em" }} onClick={this.toggleSidebar}>
+              <MenuItem styling="light" extraStyling={{ fontSize: "1.6em" }} onClick={this.toggleSidebar}>
                   &#9776;
-                </TextButton>
+                </MenuItem>
               </div>
             </div>
             <aside className={styles.sidebar} style={extraSidebarStyle}>
@@ -338,12 +335,7 @@ class Dashboard extends React.Component {
                 toggleOverlay={this.toggleOverlay}
                 closePanel={this.toggleSidebar}
               >
-                <Link to="/" className={styles.navLink}>
-                  Live Data
-                </Link>
-                <Link to="/FAQ" className={styles.navLink}>
-                  FAQ
-                </Link>
+              <MyTabs></MyTabs>
               </ControlPanel>
             </aside>
             <Routes>

diff --git a/src/Dashboard.module.css b/src/Dashboard.module.css
@@ -30,6 +30,8 @@ body {
   z-index: 1;
   cursor: pointer;
   padding: 12px;
+  background-color:#33769f;
+  height: 5px;
 }
 
 .header {

diff --git a/src/components/ControlPanel/ControlPanel.js b/src/components/ControlPanel/ControlPanel.js
@@ -6,7 +6,7 @@ import textData from "../../data/overlayText.json";
 
 import OpenGHGLogo from "../../images/OpenGHG_Logo_Portrait.svg";
 import Overlay from "../Overlay/Overlay";
-import TextButton from "../TextButton/TextButton";
+import { CancelOutlined } from "@mui/icons-material";
 
 class ControlPanel extends React.Component {
   constructor(props) {
@@ -32,9 +32,7 @@ class ControlPanel extends React.Component {
     return (
       <div className={styles.container}>
         <div className={styles.closeButton}>
-          <TextButton styling="light" extraStyling={{ fontSize: "2em" }} onClick={this.props.closePanel}>
-            x
-          </TextButton>
+            <CancelOutlined onClick={this.props.closePanel}></CancelOutlined>
         </div>
         <div className={styles.header}>
           <div className={styles.headerText}>DECC Network Dashboard</div>

diff --git a/src/components/FAQ/FAQ.module.css b/src/components/FAQ/FAQ.module.css
@@ -3,11 +3,13 @@
   display: flex;
   width: 100%;
   height: 100%;
+  padding-left: 5%;
 }
 .content {
   display: grid;
   grid-template-columns: 1fr;
   grid-auto-rows: auto;
   row-gap: 2vh;
   padding: 1vw;
+  justify-content: center;
 }
diff --git a/src/components/MyTabs/MyTabs.js b/src/components/MyTabs/MyTabs.js
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import QuizOutlinedIcon from '@mui/icons-material/QuizOutlined';
+import { DescriptionOutlined, LaunchOutlined, LiveTvOutlined } from "@mui/icons-material";
+
+function MyTabs() {
+  const [selectedValue, setSelectedValue] = useState(0); // This takes care of the updated variable name
+
+  const handleChange = (event, newValue) => {
+    setSelectedValue(newValue);
+  };
+
+  return (
+    <Tabs selected={selectedValue} onChange={handleChange} aria-label="icon label tabs example" orientation="vertical">
+      <Tab
+      style={{color:"white"}}
+        icon={<LiveTvOutlined style={{color:"white"}} fontSize="large"/>}
+        label="Live Data"
+        component={Link}
+        to="/"
+      />
+      <Tab
+        style={{color:"white"}}
+        icon={<QuizOutlinedIcon style={{color:"white"}} fontSize="large" />}
+        label="FAQ"
+        component={Link}
+        to="/FAQ"
+      />
+      <Tab
+      style={{color:"white"}}
+        icon={<DescriptionOutlined style={{color:"white"}} fontSize="large" />}
+        label="Synopsis"
+        component={Link}
+        to="/explainer"
+      />
+      <Tab 
+      style={{color:"white"}}
+      label="Visit DECC data"
+      component={'a'}
+      href="https://catalogue.ceda.ac.uk/uuid/f5b38d1654d84b03ba79060746541e4f"
+      target="_blank"
+      icon={<LaunchOutlined fontSize="large" />}/>
+
+    </Tabs>
+  );
+}
+
+export default MyTabs;