From 792b6279b9a76d6071574dcfab2cbd89149c6caa Mon Sep 17 00:00:00 2001
From: Nontouch Mukleemart <nontouch16974@gmail.com>
Date: Tue, 4 Mar 2025 23:28:28 +0700
Subject: [PATCH] Add Navbar and remove some element

---
 src/components/MemoryUsage.jsx        |  19 ++++---
 src/components/Menu.jsx               |  18 +++++--
 src/components/MenuSolverControls.jsx |  72 --------------------------
 src/components/Navbar.jsx             |  65 +++++++++++++++++++++++
 src/components/OtherControls.jsx      |   4 +-
 src/components/index.js               |   1 +
 src/images/favicon.png                | Bin 13689 -> 2909 bytes
 src/pages/index.js                    |   5 +-
 8 files changed, 99 insertions(+), 85 deletions(-)
 create mode 100644 src/components/Navbar.jsx

diff --git a/src/components/MemoryUsage.jsx b/src/components/MemoryUsage.jsx
index 6214770..432e3c6 100644
--- a/src/components/MemoryUsage.jsx
+++ b/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">
-            <h2>Client-Side Memory Usage</h2>
-            <p style={{ fontSize: "1.2em", fontWeight: "bold" }}>{memoryUsage}</p>
-        </Typography>
+        <div style={{ padding: "10px" }}>  {/* Added padding here */}
+            <Typography color="textPrimary" component="div">
+                <Typography color="textSecondary" component="div">
+                    Client-Side Memory Usage
+                </Typography>
+
+                <Typography color="textSecondary" component="div" style={{ fontSize: "1.2em", fontWeight: "bold" }}>
+                    {memoryUsage}
+                </Typography>
+            </Typography>
+        </div>
     );
-};
\ No newline at end of file
+};
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index 7fb0eaa..aea7fb5 100644
--- a/src/components/Menu.jsx
+++ b/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 }}>
-      <MenuHeader />
+    <Paper classes={{ root: classes.wrapper }} style={{
+      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>
diff --git a/src/components/MenuSolverControls.jsx b/src/components/MenuSolverControls.jsx
index e45d575..4841e1f 100644
--- a/src/components/MenuSolverControls.jsx
+++ b/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>
     </>
   );
 };
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..a36b62c
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/components/OtherControls.jsx b/src/components/OtherControls.jsx
index 9a05b09..21d85d7 100644
--- a/src/components/OtherControls.jsx
+++ b/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>
   );
 };
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 3151cff..978efe7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -13,3 +13,4 @@ export * from "./MenuSolverControls";
 export * from "../context/PreSetTheme";
 export * from "./SEO";
 export * from "./ThemeToggle";
+export * from "./Navbar";
\ No newline at end of file
diff --git a/src/images/favicon.png b/src/images/favicon.png
index b07f097b04889f96da2a742fa863aec8a5b22b7b..bb8e62080eb2d5b9e3f0b949314cdc16566baaaa 100644
GIT binary patch
literal 2909
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
Hu0mjfLGEp1

literal 13689
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
L`K)Gh!qNW%+<-Y4

diff --git a/src/pages/index.js b/src/pages/index.js
index 7e6f789..edcfe8f 100644
--- a/src/pages/index.js
+++ b/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}