From 172390eac3a3f29cc601b2c3b216e9081fbd4da7 Mon Sep 17 00:00:00 2001
From: jency <jencymaheshwari2004@gmail.com>
Date: Fri, 25 Apr 2025 01:17:15 +0530
Subject: [PATCH 1/4] Redesigned Navbar and Theme Toggler to Match Accord
 Project's Professional UI

Signed-off-by: jency <jencymaheshwari2004@gmail.com>
---
 src/components/Navbar.tsx         | 394 ++++++++++++++++--------------
 src/components/ToggleDarkMode.tsx |  45 +++-
 2 files changed, 250 insertions(+), 189 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 35fe9fef..be93a320 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -9,7 +9,7 @@ import {
   InfoOutlined,
   BookOutlined,
   CaretDownFilled,
-  MenuOutlined
+  MenuOutlined,
 } from "@ant-design/icons";
 import ToggleDarkMode from "./ToggleDarkMode";
 
@@ -20,9 +20,7 @@ interface NavbarProps {
 }
 
 function Navbar({ scrollToFooter }: NavbarProps) {
-  const [hovered, setHovered] = useState<
-    null | "home" | "explore" | "help" | "github" | "join"
-  >(null);
+  const [hovered, setHovered] = useState<null | "home" | "help" | "about" | "community" | "issues" | "documentation" | "github" | "join">(null);
   const screens = useBreakpoint();
   const location = useLocation();
 
@@ -39,110 +37,99 @@ function Navbar({ scrollToFooter }: NavbarProps) {
   const mobileMenu = (
     <Menu>
       <Menu.Item key="home">
-        <Link to="/">
-          Template Playground
-        </Link>
+        <a href="/" target="_self">Template Playground</a>
       </Menu.Item>
+
       <Menu.Item key="explore" onClick={scrollToFooter}>
         Explore
       </Menu.Item>
+
       <Menu.Item key="about">
-        <a
-          href="https://github.com/accordproject/template-playground/blob/main/README.md"
-          target="_blank"
+        <a 
+          href="https://github.com/accordproject/template-playground/blob/main/README.md" 
+          target="_blank" 
           rel="noopener noreferrer"
         >
           <QuestionOutlined /> About
         </a>
       </Menu.Item>
+
       <Menu.Item key="community">
-        <a
-          href="https://discord.com/invite/Zm99SKhhtA"
-          target="_blank"
+        <a 
+          href="https://discord.com/invite/Zm99SKhhtA" 
+          target="_blank" 
           rel="noopener noreferrer"
         >
           <UserOutlined /> Community
         </a>
       </Menu.Item>
+
       <Menu.Item key="issues">
         <a
-          href="https://github.com/accordproject/template-playground/issues"
-          target="_blank"
+          href="https://github.com/accordproject/template-playground/issues" 
+          target="_blank" 
           rel="noopener noreferrer"
         >
           <InfoOutlined /> Issues
         </a>
       </Menu.Item>
+
       <Menu.Item key="documentation">
-        <a
-          href="https://github.com/accordproject/template-engine/blob/main/README.md"
-          target="_blank"
+        <a 
+          href="https://github.com/accordproject/template-playground" 
+          target="_blank" 
+          rel="noopener noreferrer"
+        >
+          <GithubOutlined /> Github
+        </a>
+      </Menu.Item>
+
+      <Menu.Item key="documentation">
+        <a 
+          href="https://github.com/accordproject/template-engine/blob/main/README.md" 
+          target="_blank" 
           rel="noopener noreferrer"
         >
           <BookOutlined /> Documentation
         </a>
       </Menu.Item>
-    </Menu>
-  );
 
-  const helpMenu = (
-    <Menu>
-      <Menu.ItemGroup key="info" title="Info">
-        <Menu.Item key="about">
-          <a
-            href="https://github.com/accordproject/template-playground/blob/main/README.md"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <QuestionOutlined /> About
-          </a>
-        </Menu.Item>
-        <Menu.Item key="community">
-          <a
-            href="https://discord.com/invite/Zm99SKhhtA"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <UserOutlined /> Community
-          </a>
-        </Menu.Item>
-        <Menu.Item key="issues">
-          <a
-            href="https://github.com/accordproject/template-playground/issues"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <InfoOutlined /> Issues
-          </a>
-        </Menu.Item>
-      </Menu.ItemGroup>
-      <Menu.ItemGroup title="Documentation">
-        <Menu.Item key="documentation">
-          <a
-            href="https://github.com/accordproject/template-engine/blob/main/README.md"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <BookOutlined /> Documentation
-          </a>
-        </Menu.Item>
-      </Menu.ItemGroup>
     </Menu>
   );
 
   const menuItemStyle = (key: string, isLast: boolean) => ({
     display: "flex",
     alignItems: "center",
-    padding: screens.md ? "0 20px" : "0",
-    backgroundColor:
-      hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent",
     height: "65px",
-    borderRight:
-      screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
+    padding: screens.md ? "0 5px" : "0",
+    backgroundColor: "transparent",
+    transition: "background-color 0.3s ease",
   });
 
   const isLearnPage = location.pathname.startsWith("/learn");
 
+  const menuItemButtonStyle = (key: string): React.CSSProperties => ({
+    background: 'transparent',
+    border: "none",
+    color: hovered === key ? "#19c6c7" : '#fff',
+    height: "65px",
+    alignItems: "center",
+    fontSize: "1rem",
+    fontWeight: "600",
+    fontStyle: "normal",
+    position: "relative",
+    display: "block",
+    lineHeight: "1",
+    textDecoration: "none", 
+    transition: 'all 0.3s ease',
+  });
+
+  const iconStyle = { 
+    color: "#19c6c7", 
+    fontSize: "17px" 
+  };
+
+
   return (
     <div
       style={{
@@ -152,87 +139,161 @@ function Navbar({ scrollToFooter }: NavbarProps) {
         display: "flex",
         alignItems: "center",
         paddingLeft: screens.lg ? 40 : screens.md ? 10 : 10,
-        paddingRight: screens.lg ? 40 : screens.md ? 10 : 10,
+        paddingRight: screens.lg ? 40 : screens.md ? 10 : 10
       }}
     >
       <div
         style={{
-          cursor: "pointer",
-          ...menuItemStyle("home", false),
+          cursor: "pointer", 
+          ...menuItemStyle("home", false)
         }}
         onMouseEnter={() => setHovered("home")}
         onMouseLeave={() => setHovered(null)}
       >
-        <Link
-          to="/"
-          rel="noopener noreferrer"
-          style={{ display: "flex", alignItems: "center" }}
+        <Link 
+          to="/" 
+          rel="noopener noreferrer" 
+          style={{ 
+            display: "flex", 
+            alignItems: "center" 
+          }}
         >
           <Image
-            src={screens.lg ? "/logo.png" : "/accord_logo.png"}
+            src="/accord_logo.png"
             alt="Template Playground"
             preview={false}
             style={{
-              paddingRight: screens.md ? "8px" : "2px",
-              height: "26px",
-              maxWidth: screens.md ? "184.17px" : "36.67px",
+              paddingRight: screens.md ? "10px" : "2px",
+              height: "30px",
+              maxWidth: screens.md ? "184.17px" : "36.67px"
             }}
           />
-          <span style={{ color: "white", display: screens.lg ? "block" : "none" }}>Template Playground</span>
-
+          <span
+            style={{
+              color: "white",
+              display: screens.lg ? "block" : "none",
+              fontFamily: "Graphik, Helvetica, Arial, sans-serif",
+              fontStyle: "normal",
+              fontWeight: "bold",
+              fontSize: "1.1rem",
+              borderRight: "2px solid rgba(255, 255, 255, 0.2)",
+              paddingRight: "2rem",
+            }}
+          >
+            Template Playground
+          </span>
         </Link>
       </div>
+
       {screens.md ? (
         <>
           <div
-            style={{
-              ...menuItemStyle("explore", false),
-              cursor: "pointer",
+            style={{ 
+              cursor: "pointer", 
+              ...menuItemStyle("about", false)
             }}
-            onClick={scrollToFooter}
-            onMouseEnter={() => setHovered("explore")}
+            onMouseEnter={() => setHovered("about")}
             onMouseLeave={() => setHovered(null)}
           >
-            <span style={{ color: "white" }}>Explore</span>
+            <a 
+              href="https://github.com/accordproject/template-playground/blob/main/README.md" target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button style={menuItemButtonStyle("about")}>
+                <QuestionOutlined style={iconStyle} /> About
+              </Button>
+            </a>
           </div>
-          <div
-            style={{
-              ...menuItemStyle("help", false),
-              cursor: "pointer",
-            }}
-            onMouseEnter={() => setHovered("help")}
+
+          <div 
+            style={{ 
+              cursor: "pointer", 
+              ...menuItemStyle("community", false)
+            }} 
+            onMouseEnter={() => setHovered("community")} 
+            onMouseLeave={() => setHovered(null)}
+          >
+            <a 
+              href="https://discord.com/invite/Zm99SKhhtA" 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button style={menuItemButtonStyle("community")}>
+                <UserOutlined style={iconStyle} /> Community
+              </Button>
+            </a>
+          </div>
+
+          <div 
+            style={{ 
+              cursor: "pointer", 
+              ...menuItemStyle("issues", false) 
+            }} 
+            onMouseEnter={() => setHovered("issues")} 
+            onMouseLeave={() => setHovered(null)}
+          >
+            <a 
+              href="https://github.com/accordproject/template-playground/issues" 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button style={menuItemButtonStyle("issues")}>
+                <InfoOutlined style={iconStyle} /> Issues
+              </Button>
+            </a>
+          </div>
+
+          <div 
+            style={{ 
+              cursor: "pointer", 
+              ...menuItemStyle("documentation", false) 
+            }} 
+            onMouseEnter={() => setHovered("documentation")} 
+            onMouseLeave={() => setHovered(null)}
+          >
+            <a 
+              href="https://github.com/accordproject/template-engine/blob/main/README.md" 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button style={menuItemButtonStyle("documentation")}>
+                <BookOutlined style={iconStyle} /> Documentation
+              </Button>
+            </a>
+          </div>
+
+          <div 
+            style={{ 
+              cursor: "pointer", 
+              ...menuItemStyle("github", false) 
+            }} 
+            onMouseEnter={() => setHovered("github")} 
             onMouseLeave={() => setHovered(null)}
           >
-            <Dropdown overlay={helpMenu} trigger={["click"]}>
-              <Button
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  color: "white",
-                  height: "65px",
-                  display: "flex",
-                  alignItems: "center",
-                }}
-              >
-                Help
-                <CaretDownFilled
-                  style={{ fontSize: "10px", marginLeft: "5px" }}
-                />
+            <a 
+              href="https://github.com/accordproject/template-playground" 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button style={menuItemButtonStyle("github")}>
+                <GithubOutlined style={iconStyle} /> Github
               </Button>
-            </Dropdown>
+            </a>
           </div>
         </>
       ) : (
-        <div style={{ marginLeft: "5px" }}>
+        <div 
+          style={{ marginLeft: "5px" }}
+        >
           <Dropdown overlay={mobileMenu} trigger={["click"]}>
-            <Button
-              style={{
-                background: "transparent",
-                border: "none",
-                color: "white",
-                height: "65px",
-                display: "flex",
-                alignItems: "center",
+            <Button 
+              style={{ 
+                background: "transparent", 
+                border: "none", 
+                color: "white", 
+                height: "65px", 
+                display: "flex", 
+                alignItems: "center" 
               }}
             >
               <MenuOutlined style={{ fontSize: "20px" }} />
@@ -240,86 +301,63 @@ function Navbar({ scrollToFooter }: NavbarProps) {
           </Dropdown>
         </div>
       )}
-      <div
-        style={{
-          display: "flex",
-          marginLeft: "auto",
-          alignItems: "center",
-          height: "65px",
-          gap: screens.md ? "20px" : "10px",
-          marginRight: screens.md ? 0 : "5px"
+
+      <div 
+        style={{ 
+          display: "flex", 
+          marginLeft: "auto", 
+          alignItems: "center", 
+          height: "65px", 
+          gap: screens.md ? "20px" : "10px", 
+          marginRight: screens.md ? 0 : "5px" 
         }}
       >
-        <div style={{ marginLeft: screens.md ? 0 : "auto" }}>
-          <ToggleDarkMode />
-        </div>
+
         {!isLearnPage && (
           <div
             style={{
-              height: "65px",
+              height: "2.2rem",
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
-              backgroundColor:
-                hovered === "join" ? "rgba(255, 255, 255, 0.1)" : "transparent",
+              color: "white",
+              backgroundColor: hovered === "join" ? "#17b2b3" : "#19c6c7",
+              padding: "1rem",
+              borderRadius: "1rem",
               cursor: "pointer",
+              border: "none",
+              fontSize: "1rem",
+              fontWeight: "600",
+              fontStyle: "normal",
+              position: "relative",
+              lineHeight: "1",
+              textDecoration: "none",
+              transform: hovered === "join" ? "scale(1.05)" : "scale(1)",
+              boxShadow: hovered === "join" ? "0 4px 12px rgba(0, 0, 0, 0.2)" : "none",
+              transition: "all 0.3s ease",
             }}
             onMouseEnter={() => setHovered("join")}
             onMouseLeave={() => setHovered(null)}
           >
-            <Link to="/learn/intro" className="learnNow-button">
-              <animated.button
-                style={{
-                  ...props,
-                  padding: "10px 22px",
-                  backgroundColor: "#19c6c7",
-                  color: "#050c40",
-                  border: "none",
-                  borderRadius: "5px",
-                  cursor: "pointer",
-                }}
-              >
-                Learn
-              </animated.button>
+            <Link
+              to="/learn/intro"
+              className="ant-btn ant-btn-primary ant-btn-lg"
+              style={{ color: "#fff", textDecoration: "none" }}
+            >
+              Learn
             </Link>
           </div>
         )}
-        <div
-          style={{
-            height: "65px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: screens.md ? "0 20px" : "0 10px",
-            borderRadius: "5px",
-            borderLeft: screens.md
-              ? "1.5px solid rgba(255, 255, 255, 0.1)"
-              : "none",
-            paddingLeft: screens.md ? 16 : 5,
-            paddingRight: screens.md ? 16 : 5,
-            backgroundColor:
-              hovered === "github" ? "rgba(255, 255, 255, 0.1)" : "transparent",
-            cursor: "pointer",
+
+
+        <div 
+          style={{ 
+            marginLeft: screens.md ? 0 : "auto" 
           }}
-          onMouseEnter={() => setHovered("github")}
-          onMouseLeave={() => setHovered(null)}
         >
-          <a
-            href="https://github.com/accordproject/template-playground"
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ display: "flex", alignItems: "center", color: "white" }}
-          >
-            <GithubOutlined
-              style={{
-                fontSize: "20px",
-                color: "white",
-                marginRight: screens.md ? "5px" : "0",
-              }}
-            />
-            <span style={{ display: screens.md ? "inline" : "none" }}>Github</span>
-          </a>
+          <ToggleDarkMode />
         </div>
+
       </div>
     </div>
   );
diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx
index d3bd390b..7fa77497 100644
--- a/src/components/ToggleDarkMode.tsx
+++ b/src/components/ToggleDarkMode.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { ToggleDarkModeContainer } from "../styles/components/ToggleDarkMode";
-import DarkModeToggle from "react-dark-mode-toggle";
 import useAppStore from "../store/store";
+import { FaMoon, FaSun } from "react-icons/fa";
 
 const ToggleDarkMode: React.FC = () => {
   const { backgroundColor, toggleDarkMode } = useAppStore();
@@ -13,20 +12,44 @@ const ToggleDarkMode: React.FC = () => {
 
   const handleChange = () => {
     toggleDarkMode();
-    setIsDarkMode((prev) => !prev);
     const newTheme = !isDarkMode ? "dark" : "light";
     document.documentElement.setAttribute("data-theme", newTheme);
+    setIsDarkMode(!isDarkMode);
   };
 
   return (
-    <ToggleDarkModeContainer>
-      <DarkModeToggle
-        className="dark-mode-toggle"
-        onChange={handleChange}
-        checked={isDarkMode}
-        size={60}
-      />
-    </ToggleDarkModeContainer>
+    <div
+      onClick={handleChange}
+      style={{
+        width: "60px",
+        height: "32px",
+        borderRadius: "50px",
+        backgroundColor: "#E2E8F0", 
+        display: "flex",
+        alignItems: "center",
+        justifyContent: isDarkMode ? "flex-end" : "flex-start", 
+        padding: "4px",
+        cursor: "pointer",
+        transition: "background-color 0.3s ease, justify-content 0.3s ease",
+        boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
+      }}
+    >
+      <div
+        style={{
+          width: "24px",
+          height: "24px",
+          borderRadius: "50%",
+          backgroundColor: "#ffffff", 
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: isDarkMode ? "#FBBF24" : "#1A202C", 
+          transition: "color 0.3s ease",
+        }}
+      >
+        {isDarkMode ? <FaMoon size={12} /> : <FaSun size={12} />}
+      </div>
+    </div>
   );
 };
 

From b97a3ceff7eb0ba3036bce71a2db1467db8523e5 Mon Sep 17 00:00:00 2001
From: jency <jencymaheshwari2004@gmail.com>
Date: Fri, 25 Apr 2025 02:04:55 +0530
Subject: [PATCH 2/4] fixed changes - removed unused variables

Signed-off-by: jency <jencymaheshwari2004@gmail.com>
---
 src/components/Navbar.tsx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index be93a320..139af9db 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
+// import { useSpring, animated } from "react-spring";
 import { useState } from "react";
 import { Menu, Dropdown, Button, Image, Grid } from "antd";
-import { useSpring, animated } from "react-spring";
 import { useLocation, Link } from "react-router-dom";
 import {
   GithubOutlined,
@@ -8,8 +8,8 @@ import {
   UserOutlined,
   InfoOutlined,
   BookOutlined,
-  CaretDownFilled,
   MenuOutlined,
+  // CaretDownFilled,
 } from "@ant-design/icons";
 import ToggleDarkMode from "./ToggleDarkMode";
 
@@ -24,15 +24,15 @@ function Navbar({ scrollToFooter }: NavbarProps) {
   const screens = useBreakpoint();
   const location = useLocation();
 
-  const props = useSpring({
-    loop: true,
-    from: { opacity: 0.5, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
-    to: [
-      { opacity: 1, boxShadow: "0px 0px 5px rgba(255, 255, 255, 1)" },
-      { opacity: 0.9, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
-    ],
-    config: { duration: 1000 },
-  });
+  // const props = useSpring({
+  //   loop: true,
+  //   from: { opacity: 0.5, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
+  //   to: [
+  //     { opacity: 1, boxShadow: "0px 0px 5px rgba(255, 255, 255, 1)" },
+  //     { opacity: 0.9, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
+  //   ],
+  //   config: { duration: 1000 },
+  // });
 
   const mobileMenu = (
     <Menu>
@@ -97,7 +97,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
     </Menu>
   );
 
-  const menuItemStyle = (key: string, isLast: boolean) => ({
+  const menuItemStyle = () => ({
     display: "flex",
     alignItems: "center",
     height: "65px",
@@ -145,7 +145,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
       <div
         style={{
           cursor: "pointer", 
-          ...menuItemStyle("home", false)
+          ...menuItemStyle()
         }}
         onMouseEnter={() => setHovered("home")}
         onMouseLeave={() => setHovered(null)}
@@ -190,7 +190,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
           <div
             style={{ 
               cursor: "pointer", 
-              ...menuItemStyle("about", false)
+              ...menuItemStyle()
             }}
             onMouseEnter={() => setHovered("about")}
             onMouseLeave={() => setHovered(null)}
@@ -208,7 +208,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
           <div 
             style={{ 
               cursor: "pointer", 
-              ...menuItemStyle("community", false)
+              ...menuItemStyle()
             }} 
             onMouseEnter={() => setHovered("community")} 
             onMouseLeave={() => setHovered(null)}
@@ -227,7 +227,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
           <div 
             style={{ 
               cursor: "pointer", 
-              ...menuItemStyle("issues", false) 
+              ...menuItemStyle() 
             }} 
             onMouseEnter={() => setHovered("issues")} 
             onMouseLeave={() => setHovered(null)}
@@ -246,7 +246,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
           <div 
             style={{ 
               cursor: "pointer", 
-              ...menuItemStyle("documentation", false) 
+              ...menuItemStyle() 
             }} 
             onMouseEnter={() => setHovered("documentation")} 
             onMouseLeave={() => setHovered(null)}
@@ -265,7 +265,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
           <div 
             style={{ 
               cursor: "pointer", 
-              ...menuItemStyle("github", false) 
+              ...menuItemStyle() 
             }} 
             onMouseEnter={() => setHovered("github")} 
             onMouseLeave={() => setHovered(null)}

From 77e2c0b831acbff41db706cdff5b984e54ac87ae Mon Sep 17 00:00:00 2001
From: jency <jencymaheshwari2004@gmail.com>
Date: Fri, 25 Apr 2025 02:36:04 +0530
Subject: [PATCH 3/4] fixed deprecated variable

Signed-off-by: jency <jencymaheshwari2004@gmail.com>
---
 src/components/Navbar.tsx | 138 ++++++++++++++++++++------------------
 1 file changed, 74 insertions(+), 64 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 139af9db..53f0b637 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
 // import { useSpring, animated } from "react-spring";
 import { useState } from "react";
-import { Menu, Dropdown, Button, Image, Grid } from "antd";
+import { Dropdown, Button, Image, Grid } from "antd";
 import { useLocation, Link } from "react-router-dom";
 import {
   GithubOutlined,
@@ -34,68 +34,78 @@ function Navbar({ scrollToFooter }: NavbarProps) {
   //   config: { duration: 1000 },
   // });
 
-  const mobileMenu = (
-    <Menu>
-      <Menu.Item key="home">
-        <a href="/" target="_self">Template Playground</a>
-      </Menu.Item>
-
-      <Menu.Item key="explore" onClick={scrollToFooter}>
-        Explore
-      </Menu.Item>
-
-      <Menu.Item key="about">
-        <a 
-          href="https://github.com/accordproject/template-playground/blob/main/README.md" 
-          target="_blank" 
-          rel="noopener noreferrer"
-        >
-          <QuestionOutlined /> About
-        </a>
-      </Menu.Item>
-
-      <Menu.Item key="community">
-        <a 
-          href="https://discord.com/invite/Zm99SKhhtA" 
-          target="_blank" 
-          rel="noopener noreferrer"
-        >
-          <UserOutlined /> Community
-        </a>
-      </Menu.Item>
-
-      <Menu.Item key="issues">
-        <a
-          href="https://github.com/accordproject/template-playground/issues" 
-          target="_blank" 
-          rel="noopener noreferrer"
-        >
-          <InfoOutlined /> Issues
-        </a>
-      </Menu.Item>
-
-      <Menu.Item key="documentation">
-        <a 
-          href="https://github.com/accordproject/template-playground" 
-          target="_blank" 
-          rel="noopener noreferrer"
-        >
-          <GithubOutlined /> Github
-        </a>
-      </Menu.Item>
-
-      <Menu.Item key="documentation">
-        <a 
-          href="https://github.com/accordproject/template-engine/blob/main/README.md" 
-          target="_blank" 
-          rel="noopener noreferrer"
-        >
-          <BookOutlined /> Documentation
-        </a>
-      </Menu.Item>
-
-    </Menu>
-  );
+  const mobileMenu = {
+    items: [
+      {
+        key: "home",
+        label: <a href="/" target="_self">Template Playground</a>,
+      },
+      {
+        key: "explore",
+        label: <div onClick={scrollToFooter}>Explore</div>,
+      },
+      {
+        key: "about",
+        label: (
+          <a
+            href="https://github.com/accordproject/template-playground/blob/main/README.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <QuestionOutlined /> About
+          </a>
+        ),
+      },
+      {
+        key: "community",
+        label: (
+          <a
+            href="https://discord.com/invite/Zm99SKhhtA"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <UserOutlined /> Community
+          </a>
+        ),
+      },
+      {
+        key: "issues",
+        label: (
+          <a
+            href="https://github.com/accordproject/template-playground/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <InfoOutlined /> Issues
+          </a>
+        ),
+      },
+      {
+        key: "github",
+        label: (
+          <a
+            href="https://github.com/accordproject/template-playground"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GithubOutlined /> Github
+          </a>
+        ),
+      },
+      {
+        key: "documentation",
+        label: (
+          <a
+            href="https://github.com/accordproject/template-engine/blob/main/README.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <BookOutlined /> Documentation
+          </a>
+        ),
+      },
+    ],
+  };
 
   const menuItemStyle = () => ({
     display: "flex",
@@ -285,7 +295,7 @@ function Navbar({ scrollToFooter }: NavbarProps) {
         <div 
           style={{ marginLeft: "5px" }}
         >
-          <Dropdown overlay={mobileMenu} trigger={["click"]}>
+          <Dropdown menu={mobileMenu} trigger={["click"]}>
             <Button 
               style={{ 
                 background: "transparent", 

From d94d609bfb7c5959fb54a3cf48172e2d19702e73 Mon Sep 17 00:00:00 2001
From: jency <jencymaheshwari2004@gmail.com>
Date: Fri, 25 Apr 2025 19:19:49 +0530
Subject: [PATCH 4/4] fixed changes

Signed-off-by: jency <jencymaheshwari2004@gmail.com>
---
 package-lock.json                    | 14 ++++++++++++++
 package.json                         |  1 +
 src/tests/components/Navbar.test.tsx |  8 ++++++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index beeb0ee6..ae531e2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
         "@rollup/plugin-node-resolve": "^15.1.0",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
+        "@testing-library/user-event": "^14.6.1",
         "@types/lz-string": "^1.3.34",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
@@ -7384,6 +7385,19 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index a556a24f..f8d7e903 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lz-string": "^1.3.34",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
diff --git a/src/tests/components/Navbar.test.tsx b/src/tests/components/Navbar.test.tsx
index 15237eb7..7ba2c7c6 100644
--- a/src/tests/components/Navbar.test.tsx
+++ b/src/tests/components/Navbar.test.tsx
@@ -3,6 +3,7 @@ import "@testing-library/jest-dom";
 import Navbar from "../../components/Navbar";
 import { MemoryRouter } from "react-router-dom";
 import { vi } from "vitest";
+import userEvent from "@testing-library/user-event";
 
 vi.mock("../../components/ToggleDarkMode", () => ({
   default: () => <div data-testid="toggle-dark-mode">Dark Mode Toggle</div>,
@@ -27,10 +28,13 @@ describe("Navbar", () => {
     expect(title).toBeInTheDocument();
   });
 
-  it("renders Github link on all screens", () => {
+  it("renders Github link on all screens", async () => {
     renderNavbar();
 
-    const githubLink = screen.getByRole("link", { name: /Github/i });
+    const menuButton = screen.getByRole("button", { name: /menu/i });
+    await userEvent.click(menuButton);
+
+    const githubLink = await screen.findByRole("link", { name: /Github/i });
     expect(githubLink).toBeInTheDocument();
   });