#245: Started work on a new, simple tutorial system

frontend/src/components/Header.js

@@ -29,7 +29,12 @@ import {
   Polymer as PolymerIcon,
   Apps as AppsIcon,
   Description as DescriptionIcon,
+	HelpOutline as HelpOutlineIcon,
 } from "@material-ui/icons";
+
+import {
+	Analytics as AnalyticsIcon,
+} from "@mui/icons-material";
 //import LogoutIcon from '@mui/icons-material/Logout';
 import { useAlert } from "react-alert";
 
@@ -440,6 +445,26 @@ const Header = (props) => {
           handleClose();
         }}
       >
+        <MenuItem
+          onClick={(event) => {
+            event.preventDefault();
+            handleClose();
+          }}
+        >
+          <Link to="/docs/about" style={hrefStyle}>
+            <HelpOutlineIcon style={{marginRight: 5 }}/> About 
+          </Link>
+        </MenuItem>
+        <MenuItem
+          onClick={(event) => {
+            event.preventDefault();
+            handleClose();
+          }}
+        >
+          <Link to="/getting-started" style={hrefStyle}>
+            <AnalyticsIcon style={{marginRight: 5 }}/> Get Started 
+          </Link>
+        </MenuItem>
         <MenuItem
           onClick={(event) => {
             event.preventDefault();
@@ -447,7 +472,7 @@ const Header = (props) => {
           }}
         >
           <Link to="/settings" style={hrefStyle}>
-            <SettingsIcon /> Settings
+            <SettingsIcon style={{marginRight: 5 }}/> Settings
           </Link>
         </MenuItem>
         <MenuItem
@@ -458,7 +483,7 @@ const Header = (props) => {
             handleClickLogout();
           }}
         >
-          <MeetingRoomIcon /> &nbsp;Logout
+          <MeetingRoomIcon style={{marginRight: 5 }}/> &nbsp;Logout
         </MenuItem>
       </Menu>
     </span>

frontend/src/components/ScrollToTop.jsx

@@ -1,25 +1,30 @@
 import { useEffect } from "react";
-import { withRouter } from "react-router-dom";
+//import { withRouter } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 function ScrollToTop({ getUserNotifications, setCurpath, history }) {
-  useEffect(() => {
-    const unlisten = history.listen(() => {
-      window.scroll({
-        top: 0,
-        left: 0,
-        behavior: "smooth",
-      });
+	let location = useLocation();
 
-      setCurpath(window.location.pathname);
-      getUserNotifications();
-    });
-    return () => {
-      unlisten();
-    };
-  }, []);
+  useEffect(() => {
+    //const unlisten = history.listen(() => {
+		window.scroll({
+			top: 0,
+			left: 0,
+			behavior: "smooth",
+		});
+
+		setCurpath(window.location.pathname);
+		getUserNotifications();
+    //});
+    //return () => {
+    //  unlisten();
+    //};
+  }, [location]);
 
   return null;
 }
 
 // https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition
-export default withRouter(ScrollToTop);
+//export default withRouter(ScrollToTop);
+// https://v5.reactrouter.com/web/api/Hooks/uselocation
+export default ScrollToTop;