Skip to content

fix: change navbar links to shadcn navigation menu components #365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PouriaDamavandi wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

fix: change navbar links to shadcn navigation menu components #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 24 additions & 8 deletions apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import Link from "next/link";

import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@repo/ui/components/atoms/navigation-menu";
import { Typography } from "@repo/ui/components/atoms/typography";

import { useMegaMenuStore } from "./../../store/mega-menu";
Expand All @@ -15,14 +22,23 @@ const NavbarLinks = () => {
};

return (
<div className="flex items-center gap-4">
<Typography onClick={onClick} variant="label/sm">
Browse
</Typography>
<Link href="/become-auther" aria-label="become an author">
<Typography variant="label/sm">Become an author</Typography>
</Link>
</div>
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger onClick={onClick}>
<Typography variant="label/sm">Browse</Typography>
</NavigationMenuTrigger>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink
href="/become-auther"
aria-label="become an author"
>
<Typography variant="label/sm">Become an author</Typography>
</NavigationMenuLink>
</NavigationMenuItem>
Comment on lines +33 to +39
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Typo and client-side navigation regression on “Become an author” link.

  • href typo: "auther" → likely "author".
  • Using Radix NavigationMenuLink directly renders an , losing Next.js client-side routing/prefetch.

Fix by using asChild and wrapping Next.js Link.

Apply:

-        <NavigationMenuItem>
-          <NavigationMenuLink
-            href="/become-auther"
-            aria-label="become an author"
-          >
-            <Typography variant="label/sm">Become an author</Typography>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild>
+            <Link href="/become-author">
+              <Typography variant="label/sm">Become an author</Typography>
+            </Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>

If the canonical route is different (e.g., /become-an-author), adjust accordingly.

🏁 Script executed:

#!/bin/bash
# Locate the navbar-links.tsx file in the repository
fd navbar-links.tsx

Length of output: 67

🏁 Script executed:

#!/bin/bash
# Inspect navbar-links.tsx for typo and navigation usage
FILE=apps/core/app/\(landing\)/_components/desktop-navbar/navbar-links.tsx

echo "=== Imports ==="
sed -n '1,20p' "$FILE"

echo
echo "=== Usage Snippet (lines 20-80) ==="
sed -n '20,80p' "$FILE"

echo
echo "=== Checking for typo in href ==="
grep -R "become-auther" -n "$FILE" || echo "No instances found"

echo
echo "=== Checking NavigationMenuLink usage ==="
grep -R "NavigationMenuLink" -n "$FILE"

echo
echo "=== Checking Next.js Link import ==="
grep -R "from 'next/link'" -n "$FILE" || echo "No import of Next.js Link"

Length of output: 1576

Fix “Become an author” link: correct typo and enable client-side routing

  • Change href from /become-auther to /become-author (or your canonical route).
  • Wrap Next.js <Link> using NavigationMenuLink asChild to preserve prefetch and client-side navigation.
-        <NavigationMenuItem>
-          <NavigationMenuLink
-            href="/become-auther"
-            aria-label="become an author"
-          >
-            <Typography variant="label/sm">Become an author</Typography>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild>
+            <Link href="/become-author" aria-label="become an author">
+              <Typography variant="label/sm">Become an author</Typography>
+            </Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<NavigationMenuLink
href="/become-auther"
aria-label="become an author"
>
<Typography variant="label/sm">Become an author</Typography>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link href="/become-author" aria-label="become an author">
<Typography variant="label/sm">Become an author</Typography>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
🤖 Prompt for AI Agents 
In apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx around
lines 33 to 39, the link href and routing are wrong: change
href="/become-auther" to href="/become-author" (or your canonical route) and
enable Next.js client-side navigation by using NavigationMenuLink with asChild
and nesting a Next.js Link component inside it (ensure Link is imported from
'next/link'); keep the Typography element inside the Link and preserve
aria-label (fix spelling if needed) so prefetching and SPA navigation work.

</NavigationMenuList>
</NavigationMenu>
);
};

Expand Down
2 changes: 1 addition & 1 deletion apps/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack --port 3000",
"dev": "next dev --turbopack --port 3001",
"build": "next build && cd ../.. && pnpm format",
"build:no-format": "next build",
"start": "next start",
Expand Down
12 changes: 6 additions & 6 deletions packages/ui/src/components/atoms/navigation-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import * as React from "react";
import { cn } from "@repo/ui/lib/utils";

const NavigationMenu = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
Comment on lines +10 to 11
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Ref type regression: use React.ElementRef, not React.ComponentRef, for Radix primitives.

ComponentRef resolves to class component instances and is never for function components/primitives, breaking ref typings. ElementRef is the correct utility for Radix/shadcn components.

Apply:

-  React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@
-  React.ComponentRef<typeof NavigationMenuPrimitive.List>,
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@
-  React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@
-  React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@
-  React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
@@
-  React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,

Run a quick TS check to ensure refs are typed correctly:

Expect: no matches.

Also applies to: 28-29, 49-51, 67-69, 84-86, 102-104

🏁 Script executed:

#!/bin/bash
rg -nP 'forwardRef<\s*React\.ComponentRef<' -g 'packages/ui/**.tsx' -S

Length of output: 148

🏁 Script executed:

#!/bin/bash
# Search for any usage of React.ComponentRef across all .tsx files
rg -nP 'React\.ComponentRef<' -t tsx -n

# Specifically look for forwardRef generics using React.ComponentRef
rg -nP 'forwardRef<\s*React\.ComponentRef<' -t tsx -n -C3

Length of output: 55

🏁 Script executed:

#!/bin/bash
# Search for any usage of React.ComponentRef in .tsx files by glob pattern
rg -nP 'React\.ComponentRef<' -g '*.tsx' -n

# Search for forwardRef generics explicitly using React.ComponentRef
rg -nP 'forwardRef<\s*React\.ComponentRef<' -g '*.tsx' -n -C3

Length of output: 705

Replace React.ComponentRef with React.ElementRef for Radix primitives
In packages/ui/src/components/atoms/navigation-menu.tsx at lines 10, 28, 49, 67, 84 and 102, swap all React.ComponentRef<typeof NavigationMenuPrimitive.> to React.ElementRef<typeof NavigationMenuPrimitive.> to ensure correct ref typings for function components.

🤖 Prompt for AI Agents 
In packages/ui/src/components/atoms/navigation-menu.tsx around lines 10, 28, 49,
67, 84 and 102, the types use React.ComponentRef<typeof
NavigationMenuPrimitive.*> which is incorrect for Radix function components;
replace each React.ComponentRef<typeof NavigationMenuPrimitive.*> with
React.ElementRef<typeof NavigationMenuPrimitive.*> to ensure ref typing matches
function components (update all occurrences at the listed line ranges).

>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Root
Expand All @@ -25,7 +25,7 @@ const NavigationMenu = React.forwardRef<
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

const NavigationMenuList = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.List>,
React.ComponentRef<typeof NavigationMenuPrimitive.List>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.List
Expand All @@ -46,7 +46,7 @@ const navigationMenuTriggerStyle = cva(
);

const NavigationMenuTrigger = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Trigger
Expand All @@ -64,7 +64,7 @@ const NavigationMenuTrigger = React.forwardRef<
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;

const NavigationMenuContent = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Content
Expand All @@ -81,7 +81,7 @@ NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
const NavigationMenuLink = NavigationMenuPrimitive.Link;

const NavigationMenuViewport = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
<div className={cn("absolute left-0 top-full flex justify-center")}>
Expand All @@ -99,7 +99,7 @@ NavigationMenuViewport.displayName =
NavigationMenuPrimitive.Viewport.displayName;

const NavigationMenuIndicator = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Indicator
Expand Down
Loading