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

.github/workflows/node.js.yml

@@ -40,4 +40,4 @@ jobs:
         user_name: 'github-actions[bot]'
         user_email: 'github-actions[bot]@users.noreply.github.com'
         github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
-        repository: ${{ github.repository }}
+        repository: ${{ github.repository }}

src/Dashboard.js

@@ -1,24 +1,22 @@
 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 Explainer from "./components/Explainer/Explainer"
 import LiveData from "./components/LiveData/LiveData";
-import Explainer from "./components/Explainer/Explainer";
 
 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) {
@@ -325,11 +323,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}>
@@ -339,21 +336,14 @@ 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>
-                <Link to="/explainer" className={styles.navLink}>
-                  Explainer
-                </Link>
+              <MyTabs></MyTabs>
               </ControlPanel>
             </aside>
             <Routes>
               <Route path="/FAQ" element={<FAQ />} />
               <Route path="/" element={liveData} />
-              <Route path="/explainer" element={<Explainer/>}/>            
+              <Route path="/explainer" element={<Explainer/>}/>
+
             </Routes>
             {overlay}
           </div>

src/Dashboard.module.css

@@ -30,6 +30,8 @@ body {
   z-index: 1;
   cursor: pointer;
   padding: 12px;
+  background-color:#33769f;
+  height: 5px;
 }
 
 .header {
@@ -155,6 +157,7 @@ body {
   display: grid;
   width: 100%;
   max-height: 100%;
+  padding-left: 5%;
 }
 
 .navLink {

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>

src/components/FAQ/FAQ.js

@@ -64,7 +64,7 @@ class FAQ extends React.Component {
 
     return (
       <div>
-      <div className={styles.faqHeader}>
+      <div style={{padding:'5%'}}>
         <Typography variant="h3">Frequently Asked Questions</Typography>
       </div>
         <div className={styles.faqContent}>

src/components/FAQ/FAQ.module.css

@@ -0,0 +1,15 @@
+.main {
+  grid-area: content;
+  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;
+}

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;