Merge branch 'master' of https://github.com/layer5io/layer5

Author: naikmubashir

.github/assets/images/Layer5Academy/academy.svg

@@ -134,6 +134,17 @@ alt="Meshery Catalog" align="left" />
 <br /><br /><br />
 </p>
 
+<!-- Layer 5 academy -->
+<p style="clear:both;">
+<h2><a href="https://cloud.layer5.io/academy">Layer5 Academy</a></h2>
+<a href="https://cloud.layer5.io/academy">
+ <img src=".github/assets/images/Layer5Academy/academy.svg" style="margin:10px;" width="125px" alt="Layer5 Academy" align="left" />
+</a>
+<a href="https://cloud.layer5.io/academy">Layer5 Academy</a> Layer5 Academy is a learning platform built into Layer5 Cloud. It offers structured learning paths, interactive challenges, and professional certifications. Content spans beginner to advanced levels, helping both developers and organizations skill up in cloud native technologies.
+<br /><br /><br/>
+</p>
+<br />
+
 <p style="clear:both;">
 <h1><a name="contributing"></a><a name="community"></a> <a href="https://layer5.io/community">Community</a> and <a href="https://layer5.io/community/handbook">Contributions</a></h1>
 <p> We warmly welcome all contributors! Our projects are community-built and each welcomes open collaboration. As you get started, please review this project's <a href="https://github.com/layer5io/layer5/blob/master/CONTRIBUTING.md">contributing guidelines</a>. Whether you are a user or code contributor and whether you're opening an <a href="/../../issues">issue</a> or a <a href="/../../pulls">pull request</a>, know that any form of your engagement is considered contribution and is appreciated. Contributors are expected to adhere to the <a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">CNCF Code of Conduct</a>.

README.md

@@ -168,6 +168,8 @@ const Navigation = () => {
   const [userData, setUserData] = useState(null);
   const dropDownRef = useRef();
   const navWrapRef = useRef();
+  const accountDropdownRef = useRef();
+
   function getCookieValue(cookieName) {
     const cookies = document.cookie.split(";");
 
@@ -254,6 +256,18 @@ const Navigation = () => {
     closeDropDown();
   };
 
+  useEffect(() => {
+    if (!dropDown) return;
+
+    const handleClickOutside = (e) => {
+      if (!accountDropdownRef.current?.contains(e.target)) {
+        setDropDown(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [dropDown]);
   return (
     <NavigationWrap
       className={`nav-block ${scroll ? "scrolled" : ""}`}
@@ -327,7 +341,11 @@ const Navigation = () => {
                                       changeDropdownState();
                                       closeDropDown();
                                     }}
-                                    className={subItems.sepLine ? "mobile-sub-menu-item" : "mobile-nested-menu"}
+                                    className={
+                                      subItems.sepLine
+                                        ? "mobile-sub-menu-item"
+                                        : "mobile-nested-menu"
+                                    }
                                     activeClassName="nav-link-active"
                                   >
                                     {subItems.name}
@@ -337,8 +355,8 @@ const Navigation = () => {
                             );
                           })}
                         {menu.actionItems !== undefined &&
-                          menu.actionItems.map((actionItem, index) => (
-                            (actionItem.actionName === "Join the discussion" ?
+                          menu.actionItems.map((actionItem, index) =>
+                            actionItem.actionName === "Join the discussion" ? (
                               <a
                                 key={index}
                                 href={actionItem.actionLink}
@@ -351,10 +369,12 @@ const Navigation = () => {
                                 }}
                               >
                                 <span className="readmore-btn">
-                                  {actionItem.actionName} <IoIosArrowRoundForward />
+                                  {actionItem.actionName}{" "}
+                                  <IoIosArrowRoundForward />
                                 </span>
                               </a>
-                              : <Link
+                            ) : (
+                              <Link
                                 key={index}
                                 to={actionItem.actionLink}
                                 partiallyActive={true}
@@ -365,12 +385,12 @@ const Navigation = () => {
                                 }}
                               >
                                 <span className="readmore-btn">
-                                  {actionItem.actionName} <IoIosArrowRoundForward />
+                                  {actionItem.actionName}{" "}
+                                  <IoIosArrowRoundForward />
                                 </span>
                               </Link>
                             )
-                          ))
-                        }
+                          )}
                       </ul>
                     </li>
                   ))}
@@ -412,7 +432,7 @@ const Navigation = () => {
         </div>
         <div className="meshery-cta">
           {userData ? (
-            <div className="dropDown">
+            <div className="dropDown" ref={accountDropdownRef}>
               <button
                 className="avatar-container"
                 style={{