From 8f0c55808d6b3d14d35cbdbcfbf6b8a35f7aa54f Mon Sep 17 00:00:00 2001
From: DivyanshuLohani <59534359+DivyanshuLohani@users.noreply.github.com>
Date: Tue, 15 Oct 2024 07:01:24 +0530
Subject: [PATCH] fix: navigation active link issue (#3459)

Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
Co-authored-by: Johannes <johannes@formbricks.com>
---
 apps/docs/app/global/access-roles/page.mdx |  8 ++++----
 apps/docs/components/Navigation.tsx        | 23 ++++++++++++++++++----
 apps/web/playwright/organization.spec.ts   |  4 ++--
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/apps/docs/app/global/access-roles/page.mdx b/apps/docs/app/global/access-roles/page.mdx
index edacf86469..268770519d 100644
--- a/apps/docs/app/global/access-roles/page.mdx
+++ b/apps/docs/app/global/access-roles/page.mdx
@@ -87,11 +87,11 @@ There are two ways to invite organization members: One by one or in bulk.
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. Click on the `Add Member` button:
+2. Click on the `Add member` button:
 
 <MdxImage
   src={AddMember}
-  alt="Add Member Button Position"
+  alt="Add member Button Position"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
@@ -123,11 +123,11 @@ Formbricks sends an email to the organization member with an invitation link. Th
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-2. Click on the `Add Member` button:
+2. Click on the `Add member` button:
 
 <MdxImage
   src={AddMember}
-  alt="Add Member Button Position"
+  alt="Add member Button Position"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
diff --git a/apps/docs/components/Navigation.tsx b/apps/docs/components/Navigation.tsx
index 2d17f8402a..e31bb5183e 100644
--- a/apps/docs/components/Navigation.tsx
+++ b/apps/docs/components/Navigation.tsx
@@ -7,7 +7,7 @@ import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";
@@ -158,7 +158,11 @@ const NavigationGroup = ({
 }) => {
   const isInsideMobileNavigation = useIsInsideMobileNavigation();
   const pathname = usePathname();
-  const isActiveGroup = activeGroup?.title === group.title;
+  const [isActiveGroup, setIsActiveGroup] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsActiveGroup(activeGroup?.title === group.title);
+  }, [activeGroup?.title, group.title]);
 
   const toggleParentTitle = (title: string) => {
     if (openGroups.includes(title)) {
@@ -171,6 +175,13 @@ const NavigationGroup = ({
 
   const isParentOpen = (title: string) => openGroups.includes(title);
 
+  const sortedLinks = group.links.map((link) => {
+    if (link.children) {
+      link.children.sort((a, b) => a.title.localeCompare(b.title));
+    }
+    return link;
+  });
+
   return (
     <li className={clsx("relative mt-6", className)}>
       <motion.h2 layout="position" className="font-semibold text-slate-900 dark:text-white">
@@ -185,8 +196,12 @@ const NavigationGroup = ({
           {isActiveGroup && <ActivePageMarker group={group} pathname={pathname || "/docs"} />}
         </AnimatePresence>
         <ul role="list" className="border-l border-transparent">
-          {group.links.map((link) => (
-            <motion.li key={`${group.title}-${link.title}`} layout="position" className="relative">
+          {sortedLinks.map((link) => (
+            <motion.li
+              key={link.title}
+              layout="position"
+              className="relative"
+              onClick={() => setIsActiveGroup(true)}>
               {link.href ? (
                 <NavLink
                   href={isMobile && link.children ? "" : link.href}
diff --git a/apps/web/playwright/organization.spec.ts b/apps/web/playwright/organization.spec.ts
index d402190942..6d65223a33 100644
--- a/apps/web/playwright/organization.spec.ts
+++ b/apps/web/playwright/organization.spec.ts
@@ -29,8 +29,8 @@ test.describe("Invite, accept and remove organization member", async () => {
       await page.locator('[data-testid="members-loading-card"]:first-child').waitFor({ state: "hidden" });
 
       // Add member button
-      await expect(page.getByRole("button", { name: "Add Member" })).toBeVisible();
-      await page.getByRole("button", { name: "Add Member" }).click();
+      await expect(page.getByRole("button", { name: "Add member" })).toBeVisible();
+      await page.getByRole("button", { name: "Add member" }).click();
 
       // Fill the member name and email form
       await expect(page.getByLabel("Email")).toBeVisible();