mainmenu minor fixes (still needs work)

Author: lee-naish

src/components/mainmenu/InsertSearchAlgorithms.js

@@ -7,6 +7,8 @@ const baseUrl = window.location.origin;
 const insertSearchAlgorithms = [
   { name: 'Binary Search Tree', url: `${baseUrl}/?alg=binarySearchTree&mode=search` },
   { name: '2-3-4 Tree', url: `${baseUrl}/?alg=TTFTree&mode=search` },
+  { name: 'AVL Tree', url: `${baseUrl}/?alg=AVLTree&mode=search` },
+
 ];
 
 const InsertSearchAlgorithms = () => {
@@ -22,4 +24,4 @@ const InsertSearchAlgorithms = () => {
   );
 };
 
-export default InsertSearchAlgorithms;
+export default InsertSearchAlgorithms;

src/components/mainmenu/StringSearchAlgorithms.js

@@ -12,7 +12,7 @@ const stringSearchAlgorithms = [
 const StringSearchAlgorithms = () => {
   return (
     <div className="stringSearch-container">
-      <h2 className="category">StringSearch</h2>
+      <h2 className="category">String Search</h2>
       {stringSearchAlgorithms.map((algorithm, index) => (
         <a key={index} href={algorithm.url} className="stringSearch-link">
           {algorithm.name}
@@ -22,4 +22,4 @@ const StringSearchAlgorithms = () => {
   );
 };
 
-export default StringSearchAlgorithms;
+export default StringSearchAlgorithms;

src/components/mainmenu/index.js

@@ -11,6 +11,11 @@ import StringSearchAlgorithms from './StringSearchAlgorithms';
 // Get the base URL dynamically
 const baseUrl = window.location.origin;
 
+// XXX should include category plus visibility flag so algorithms are
+// just listed in one place (here) and filtered appropriately rather
+// than have multiple algorithm lists (here plus SortingAlgorithms.js
+// plus InsertSearchAlgorithms.js etc), as was done previously...
+// XXX also fix display code (see XXX elsewhere)
 const allAlgorithms = [
     { name: 'Brute Force', url: `${baseUrl}/?alg=bruteForceStringSearch&mode=search` },
     { name: "Horspool's", url: `${baseUrl}/?alg=horspoolStringSearch&mode=search` },
@@ -25,6 +30,7 @@ const allAlgorithms = [
     { name: "Warshall's (transitive closure)", url: `${baseUrl}/?alg=transitiveClosure&mode=tc` },
     { name: 'Binary Search Tree', url: `${baseUrl}/?alg=binarySearchTree&mode=search` },
     { name: '2-3-4 Tree', url: `${baseUrl}/?alg=TTFTree&mode=search` },
+    { name: 'AVL Tree', url: `${baseUrl}/?alg=AVLTree&mode=search` },
     { name: 'Union Find', url: `${baseUrl}/?alg=unionFind&mode=find` },
     { name: 'Heapsort', url: `${baseUrl}/?alg=heapSort&mode=sort` },
     { name: 'Quicksort', url: `${baseUrl}/?alg=quickSort&mode=sort` },
@@ -68,13 +74,13 @@ const Mainmenu = () => {
       <div className="sidebar">
         <img src={logo} alt="Logo" className="logo" />
         <h1 className="title">
-          <span className="algorithm">Algorithm</span>
+          <span className="algorithm">Algorithms</span>
           <span className="in-action">In Action</span>
         </h1>
         <div className="search-container">
           <input
             type="text"
-            placeholder="Search Algorithms"
+            placeholder="Search for algorithm"
             value={searchTerm}
             onChange={handleSearch}
             className="search-bar"
@@ -106,4 +112,4 @@ const Mainmenu = () => {
   );
 };
 
-export default Mainmenu;
+export default Mainmenu;

src/styles/GraphAlgorithms.scss

@@ -24,4 +24,4 @@
 
   .graph-link:hover {
     color: #2c3e50;
-  }
+  }

src/styles/SetAlgorithms.scss

@@ -24,4 +24,4 @@
 
   .set-link:hover {
     color: #2c3e50;
-  }
+  }

src/styles/StringSearchAlgorithms.scss

@@ -24,4 +24,4 @@
 
   .stringSearch-link:hover {
     color: #2c3e50;
-  }
+  }

src/styles/mainmenu.scss

@@ -19,6 +19,11 @@
   justify-content: space-between; // 这会将内容分散到顶部和底部
 }
 
+// XXX Maybe should be .main-content??? - thats what is used in
+// src/components/mainmenu/index.js
+// Things are currently pretty awful for main menu formatting and if the
+// browser font size is larger than the default things just vanish off
+// the page, not to mention all the magic numbers in translating bits XXX
 .main-contents {
   width: 83.33%; 
   height: 100vh;
@@ -116,4 +121,4 @@
   &:hover {
     color: #f0f0f0;
   }
-}
+}