Add Navbar and remove some element

src/components/MemoryUsage.jsx

@@ -15,14 +15,21 @@ export const MemoryUsage = () => {
             }
         }
 
-        const interval = setInterval(updateMemoryUsage, 1000);
+        const interval = setInterval(updateMemoryUsage, 500);
         return () => clearInterval(interval); // Cleanup on unmount
     }, []);
 
     return (
-        <Typography color="textPrimary" component="div">
+        <div style={{ padding: "10px" }}>  {/* Added padding here */}
-            <h2>Client-Side Memory Usage</h2>
+            <Typography color="textPrimary" component="div">
-            <p style={{ fontSize: "1.2em", fontWeight: "bold" }}>{memoryUsage}</p>
+                <Typography color="textSecondary" component="div">
-        </Typography>
+                    Client-Side Memory Usage
+                </Typography>
+
+                <Typography color="textSecondary" component="div" style={{ fontSize: "1.2em", fontWeight: "bold" }}>
+                    {memoryUsage}
+                </Typography>
+            </Typography>
+        </div>
     );
-};
+};

src/components/Menu.jsx

@@ -6,6 +6,7 @@ import { MenuSolverControls } from "./MenuSolverControls";
 import { MenuMetrics } from "./MenuMetrics";
 import { MenuPointControls } from "./MenuPointControls";
 import { OtherControls } from "./OtherControls";
+import { MemoryUsage } from "./MemoryUsage";
 
 const useStyles = makeStyles(theme => ({
   wrapper: {
@@ -34,10 +35,19 @@ export const Menu = ({
   const classes = useStyles();
 
   return (
-    <Paper classes={{ root: classes.wrapper }}>
+    <Paper classes={{ root: classes.wrapper }} style={{
-      <MenuHeader />
+      position: "fixed",
+      width: "550px",
+      height: "500px",
+      top: "80px",
+      left: "20px",
+      color: "black",
+      padding: "15px",
+      borderRadius: "8px",
+      boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.3)",
+    }}>
+
       <Divider />
-      <MenuMetrics />
       <MenuSolverControls
         onStart={onStart}
         onPause={onPause}
@@ -46,7 +56,7 @@ export const Menu = ({
         onFullSpeed={onFullSpeed}
       />
       <Divider />
-      <MenuPointControls onRandomizePoints={onRandomizePoints} />
+      <MemoryUsage />
       <Divider />
       <OtherControls />
     </Paper>

src/components/MenuSolverControls.jsx

@@ -17,7 +17,6 @@ import {
   faPlay,
   faStop,
   faRedo,
-  faQuestion,
   faFastForward,
   faPause
 } from "@fortawesome/free-solid-svg-icons";
@@ -112,13 +111,6 @@ export const MenuSolverControls = ({
                   ))}
               </Select>
             </Grid>
-            <Grid item xs={1}>
-              <Typography align="right" color="textSecondary">
-                <IconButton edge="end" onClick={onShowAlgInfo}>
-                  <FontAwesomeIcon icon={faQuestion} size="xs" />
-                </IconButton>
-              </Typography>
-            </Grid>
           </Grid>
         </MenuItem>
 
@@ -139,15 +131,6 @@ export const MenuSolverControls = ({
               />
             </Button>
 
-            <Button
-              onClick={paused ? onStop : onFullSpeed}
-              disabled={(!running && !paused) || definingPoints || fullSpeed}
-            >
-              <FontAwesomeIcon
-                icon={paused ? faStop : faFastForward}
-                width="0"
-              />
-            </Button>
 
             <Button onClick={onReset} disabled={running || definingPoints}>
               <FontAwesomeIcon icon={faRedo} width="0" />
@@ -167,62 +150,7 @@ export const MenuSolverControls = ({
           />
         </MenuItem>
       </MenuSection>
-      <MenuSection>
-        <MenuItem row>
-          <Grid item xs={10}>
-            <Typography variant="button" color="textSecondary" component="div">
-              Show Best Path
-            </Typography>
-          </Grid>
-          <Grid item xs={2}>
-            <Switch
-              checked={showBestPath}
-              onChange={onShowBestPathChange}
-              color="secondary"
-              disabled={definingPoints || fullSpeed}
-              id="show-best-path"
-            />
-          </Grid>
 
-          <Grid item xs={10}>
-            <Typography variant="button" color="textSecondary" component="div">
-              Show Evaluated Paths
-            </Typography>
-          </Grid>
-          <Grid item xs={2}>
-            <Switch
-              checked={evaluatingDetailLevel > 0}
-              onChange={onEvaluatingDetailLevelChange(1, 0)}
-              color="secondary"
-              disabled={definingPoints || fullSpeed}
-              id="show-evaluating-paths"
-            />
-          </Grid>
-
-          {maxEvaluatingDetailLevel > 1 && (
-            <>
-              <Grid item xs={10}>
-                <Typography
-                  variant="button"
-                  color="textSecondary"
-                  component="div"
-                >
-                  Show Evaluated Steps
-                </Typography>
-              </Grid>
-              <Grid item xs={2}>
-                <Switch
-                  checked={evaluatingDetailLevel > 1}
-                  onChange={onEvaluatingDetailLevelChange(2, 1)}
-                  color="secondary"
-                  disabled={definingPoints || fullSpeed}
-                  id="show-evaluating-steps"
-                />
-              </Grid>
-            </>
-          )}
-        </MenuItem>
-      </MenuSection>
     </>
   );
 };

src/components/Navbar.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from "gatsby";
+
+export const Navbar = () => {
+    const navbarStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '10px 20px',
+        backgroundColor: '#333',
+        color: 'white',
+        position: 'fixed', // Ensures the navbar stays at the top
+        top: 0,
+        left: 0,
+        width: '100%',
+        zIndex: 1000, // Makes sure the navbar stays on top
+    };
+
+    const leftStyle = {
+        fontSize: '20px',
+        fontWeight: 'bold',
+    };
+
+    const rightStyle = {
+        display: 'flex',
+        gap: '20px',
+    };
+
+    const linkStyle = {
+        color: 'white',
+        textDecoration: 'none',
+        fontSize: '16px',
+    };
+
+    const linkHoverStyle = {
+        textDecoration: 'underline',
+    };
+
+    return (
+        <nav style={navbarStyle}>
+            <div style={leftStyle}>
+                {/* Make the "TSP Visualization" clickable */}
+                <Link to="/" style={linkStyle}>
+                    TSP Visualization
+                </Link>
+            </div>
+            <div style={rightStyle}>
+                <Link 
+                    to="/about" 
+                    style={linkStyle} 
+                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'} 
+                    onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
+                    About
+                </Link>
+                <Link 
+                    to="/source-code" 
+                    style={linkStyle} 
+                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'} 
+                    onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
+                    Source Code
+                </Link>
+            </div>
+        </nav>
+    );
+};

src/components/OtherControls.jsx

@@ -3,7 +3,7 @@ import { Grid, Typography } from "@material-ui/core";
 import { MenuItem } from "./MenuItem";
 import { MenuSection } from "./MenuSection";
 import { ThemeToggle } from "./ThemeToggle";
-import { MemoryUsage } from "./MemoryUsage";
+
 
 export const OtherControls = props => {
   return (
@@ -18,7 +18,7 @@ export const OtherControls = props => {
           <ThemeToggle />
         </Grid>
       </MenuItem>
-      <MemoryUsage />
+
     </MenuSection>
   );
 };

src/components/index.js

@@ -13,3 +13,4 @@ export * from "./MenuSolverControls";
 export * from "../context/PreSetTheme";
 export * from "./SEO";
 export * from "./ThemeToggle";
+export * from "./Navbar";

src/pages/index.js

@@ -13,12 +13,14 @@ import {
   MapPlot,
   Menu,
   SEO,
-  ThemeToggle
+  ThemeToggle,
+  Navbar
 } from "../components";
 import { useSolverWorker, useAlgorithmInfo } from "../hooks";
 import * as selectors from "../store/selectors";
 import * as actions from "../store/actions";
 
+
 const IndexPage = () => {
   const mapRef = useRef(null);
   const dispatch = useDispatch();
@@ -87,6 +89,7 @@ const IndexPage = () => {
       <SEO subtitle={algTitle} />
       <IntroductionModal />
       <AlgorithmModals />
+      <Navbar />
       <Menu
         onStart={start}
         onPause={pause}