Fix: Nav Items in Mobile View

Signed-off-by: Varad Gupta <114755221+vr-varad@users.noreply.github.com>

Author: vr-varad

src/sections/General/Navigation/index.js

@@ -22,6 +22,7 @@ import LogoutIcon from "./utility/LogoutIcon.js";
 import KanvasIcon from "./utility/KanvasIcon.js";
 import Layer5CloudDarkIcon from "./utility/Layer5CloudDarkIcon.svg";
 import Layer5CloudLightIcon from "./utility/Layer5CloudLightIcon.svg";
+import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward.js";
 
 const Navigation = () => {
   let data = useStaticQuery(
@@ -335,6 +336,33 @@ const Navigation = () => {
                               </li>
                             );
                           })}
+                        {menu.actionItems !== undefined &&
+                          menu.actionItems.map((actionItem, index) => (
+                            (actionItem.actionName === "Join the discussion" ?
+                              <a
+                                key={index}
+                                href={actionItem.actionLink}
+                                target="_blank"
+                                className="mobile-sub-action-item"
+                                rel="noreferrer"
+                              >
+                                <span className="readmore-btn">
+                                  {actionItem.actionName} <IoIosArrowRoundForward />
+                                </span>
+                              </a>
+                              : <Link
+                                key={index}
+                                to={actionItem.actionLink}
+                                partiallyActive={true}
+                                className="mobile-sub-action-item"
+                              >
+                                <span className="readmore-btn">
+                                  {actionItem.actionName} <IoIosArrowRoundForward />
+                                </span>
+                              </Link>
+                            )
+                          ))
+                        }
                       </ul>
                     </li>
                   ))}

src/sections/General/Navigation/navigation.style.js

@@ -648,6 +648,11 @@ const NavigationWrap = styled.header`
     .mobile-sub-menu-item {
       font-size: 1.1rem;
     }
+    .mobile-sub-action-item {
+      font-size: 1.1rem;
+      padding-left: 30px;
+      padding-top: 0.4rem;
+    }
     .mobile-nested-menu {
        font-size: 1.1rem;
        margin-left: 1rem;