fix(frontend): Make clickable area bigger (#9080)

The clickable area on the navbar was very small and the icons were not
clickable

### Changes 🏗️

Wrap the icons as well in Link

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>

---------

Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>

autogpt_platform/frontend/src/components/agptui/NavbarLink.tsx

@@ -20,34 +20,34 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
   const activeLink = "/" + (parts.length > 2 ? parts[2] : parts[1]);
 
   return (
-    <div
-      className={`h-[48px] px-5 py-4 ${
-        activeLink === href
-          ? "rounded-2xl bg-neutral-800 dark:bg-neutral-200"
-          : ""
-      } flex items-center justify-start gap-3`}
-    >
-      {href === "/store" && (
-        <IconShoppingCart
-          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
-        />
-      )}
-      {href === "/build" && (
-        <IconBoxes
-          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
-        />
-      )}
-      {href === "/monitor" && (
-        <IconLaptop
-          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
-        />
-      )}
-      {href === "/monitoring" && (
-        <IconLibrary
-          className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
-        />
-      )}
-      <Link href={href}>
+    <Link href={href} data-testid={`navbar-link-${name.toLowerCase()}`}>
+      <div
+        className={`h-[48px] px-5 py-4 ${
+          activeLink === href
+            ? "rounded-2xl bg-neutral-800 dark:bg-neutral-200"
+            : ""
+        } flex items-center justify-start gap-3`}
+      >
+        {href === "/store" && (
+          <IconShoppingCart
+            className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
+          />
+        )}
+        {href === "/build" && (
+          <IconBoxes
+            className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
+          />
+        )}
+        {href === "/monitor" && (
+          <IconLaptop
+            className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
+          />
+        )}
+        {href === "/monitoring" && (
+          <IconLibrary
+            className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
+          />
+        )}
         <div
           className={`font-poppins text-[20px] font-medium leading-[28px] ${
             activeLink === href
@@ -57,7 +57,7 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
         >
           {name}
         </div>
-      </Link>
-    </div>
+      </div>
+    </Link>
   );
 };

autogpt_platform/frontend/src/tests/pages/navbar.page.ts

@@ -9,15 +9,15 @@ export class NavBar {
   }
 
   async clickMonitorLink() {
-    await this.page.getByRole("link", { name: "Library" }).click();
+    await this.page.getByTestId("navbar-link-library").click();
   }
 
   async clickBuildLink() {
-    await this.page.locator('a[href="/build"] div').click();
+    await this.page.getByTestId("navbar-link-build").click();
   }
 
   async clickMarketplaceLink() {
-    await this.page.locator('a[href="/store"]').click();
+    await this.page.getByTestId("navbar-link-marketplace").click();
   }
 
   async getUserMenuButton() {
@@ -25,7 +25,7 @@ export class NavBar {
   }
 
   async clickUserMenu() {
-    await this.page.getByTestId("profile-popout-menu-trigger").click();
+    await (await this.getUserMenuButton()).click();
   }
 
   async logout() {
@@ -35,7 +35,9 @@ export class NavBar {
 
   async isLoggedIn(): Promise<boolean> {
     try {
-      await this.page.getByTestId("profile-popout-menu-trigger").waitFor({
+      await (
+        await this.getUserMenuButton()
+      ).waitFor({
         state: "visible",
         timeout: 10_000,
       });