Merge pull request #29 from Marvie-03/master

feat: Replace text labels in navigation button with icons

Author: IntegerAlex

doc/package-lock.json

@@ -15,6 +15,7 @@
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
     "react-syntax-highlighter": "^15.5.0",
     "tailwindcss": "^3.4.13"

doc/package.json

@@ -1,3 +1,4 @@
+
 const Introduction = () => {
   return (
     <div className="p-6 bg-gray-900 shadow-lg rounded-lg md:p-8 lg:p-10">
@@ -48,6 +49,7 @@ const Introduction = () => {
         <li className="mb-2">
           <strong>Secure:</strong> Built-in security features to protect your applications 
           and data.
+
         </li>
       </ul>
     </div>

doc/src/components/introduction.jsx

@@ -1,6 +1,7 @@
 import { Link, NavLink } from "react-router-dom";
 import Header from "./components/header";
 import Typography from "./components/general/typography";
+import { CiMenuBurger, CiCircleChevLeft } from "react-icons/ci";
 import { useState } from "react";
 
 const Layout = ({ children }) => {
@@ -78,12 +79,17 @@ const Layout = ({ children }) => {
             </li>
           </ul>
         </nav>
+        {
+// Updated the navigation button to replace the text labels with icons for better visual appeal and user experience.
+// The button now uses <CiCircleChevLeft /> to indicate "Close Menu" and <CiMenuBurger /> for "Open Menu".
+// Added Tailwind CSS class "text-2xl" for appropriate icon sizing.
+        }
         <main className="flex-1 p-4 bg-gray-800 text-white">
           <button
-            className="md:hidden mb-4 text-blue-500"
+            className="md:hidden mb-4 text-blue-500 text-2xl"
             onClick={() => setIsNavOpen(!isNavOpen)}
           >
-            {isNavOpen ? "Close Menu" : "Open Menu"}
+            {isNavOpen ? <CiCircleChevLeft /> : <CiMenuBurger />}
           </button>
           {children}
         </main>