Skip to content

fix(navbar): use twMerge for className merging #4813

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
Vaibhav-Adarsh wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(navbar): use twMerge for className merging #4813

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b9bbb76
fix(navbar): use twMerge for className merging
Vaibhav-Adarsh Dec 30, 2025
e1d42ca
fix: use twMerge and fix formatting in NavBar
Vaibhav-Adarsh Dec 31, 2025
7d374f4
Merge branch 'master' into fix-navbar-twmerge
Vaibhav-Adarsh Dec 31, 2025
932c106
fix: correct import order for twMerge
Vaibhav-Adarsh Dec 31, 2025
f3da270
Merge branch 'master' into fix-navbar-twmerge
Vaibhav-Adarsh Dec 31, 2025
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
7 changes: 6 additions & 1 deletion components/navigation/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import React, { useEffect, useState } from 'react';

import { twMerge } from 'tailwind-merge';

import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';


Comment on lines +7 to +11
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Fix import order and remove extra blank lines.

The pipeline is still failing due to formatting violations:

  • Import sorting rules are not satisfied (line 1 error: "Run autofix to sort these imports!")
  • Extra blank lines at line 11 violate the no-multiple-empty-lines rule
🔎 Fix by running autofix

Run the project's autofix command to automatically resolve import sorting and formatting:

npm run format

Or manually ensure imports follow this order:

  1. External packages (React, Next.js, etc.)
  2. Blank line
  3. Internal absolute imports (@/utils/...)
  4. Blank line
  5. Internal relative imports (../, ./)

Remove extra blank lines at line 11.

🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 11-11: Delete ⏎ prettier/prettier

[error] 11-11: More than 1 blank line not allowed. no-multiple-empty-lines

🤖 Prompt for AI Agents 
In components/navigation/NavBar.tsx around lines 7 to 11, the imports are out of
order and there's an extra blank line causing lint/format failures; reorder
imports so external packages (e.g., tailwind-merge) come first, then a blank
line, then internal absolute imports (e.g., '@/utils/i18n'), remove the extra
blank line at line 11, and either run the project autofix (npm run format) or
apply the manual ordering described to satisfy the import-sorting and
no-multiple-empty-lines rules.

import { SearchButton } from '../AlgoliaSearch';
import GithubButton from '../buttons/GithubButton';
import { isMobileDevice } from '../helpers/is-mobile';
Expand All @@ -20,6 +23,8 @@ import NavItem from './NavItem';
import otherItems from './otherItems';
import ToolsPanel from './ToolsPanel';



Comment on lines +26 to +27
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Remove extra blank lines.

Lines 26-27 have excess blank lines causing prettier and linting failures. Only one blank line should separate the imports from the interface declaration.

🔎 Proposed fix 
 import ToolsPanel from './ToolsPanel';
 
-
-
 interface NavBarProps {
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 26-26: More than 1 blank line not allowed. no-multiple-empty-lines

🤖 Prompt for AI Agents 
In components/navigation/NavBar.tsx around lines 26 to 27, there are two
consecutive blank lines between the import block and the interface declaration;
remove the extra blank line so there is only a single blank line separating
imports from the interface to satisfy prettier and lint rules.

interface NavBarProps {
className?: string;
hideLogo?: boolean;
Expand Down Expand Up @@ -144,7 +149,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
}, [asPath]);

return (
<div className={`bg-white ${className} z-50`}>
<div className={twMerge('bg-white z-50', className)}>
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 30, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Find NavBar.tsx file
fd -e tsx -e ts "NavBar" | head -20

Repository: asyncapi/website

Length of output: 92

🏁 Script executed:

# Read the NavBar.tsx file to examine line 149 and context
cat -n components/navigation/NavBar.tsx | sed -n '140,160p'

Repository: asyncapi/website

Length of output: 807

🏁 Script executed:

# Search for NavBar component usage across the codebase
rg -nP --type=tsx --type=ts '<NavBar\s+' -g '!components/navigation/NavBar.tsx' -C2 | head -100

Repository: asyncapi/website

Length of output: 87

🏁 Script executed:

# Check for prettier configuration in the repository
fd -e json -e js -e yml -e yaml "prettier" | head -10

Repository: asyncapi/website

Length of output: 42

🏁 Script executed:

# Check the import statements in NavBar.tsx to verify twMerge is properly imported
head -30 components/navigation/NavBar.tsx

Repository: asyncapi/website

Length of output: 1121

🏁 Script executed:

# Find prettier config files
fd -type f \( -name ".prettierrc*" -o -name "prettier.config.*" \) | head -10

Repository: asyncapi/website

Length of output: 230

🏁 Script executed:

# Check for prettier config in package.json
cat package.json | grep -A 20 '"prettier"' 2>/dev/null || echo "No prettier field found"

Repository: asyncapi/website

Length of output: 723

🏁 Script executed:

# Search for NavBar usage with simpler pattern matching
rg 'NavBar' --type-list | head -5

Repository: asyncapi/website

Length of output: 449

🏁 Script executed:

# Try searching for NavBar usage in JavaScript/TypeScript files
rg '<NavBar' -g '!NavBar.tsx' -C2 | head -80

Repository: asyncapi/website

Length of output: 311

🏁 Script executed:

# Check the exact indentation at line 149 using od or hexdump
sed -n '149p' components/navigation/NavBar.tsx | od -c | head -20

Repository: asyncapi/website

Length of output: 100

🏁 Script executed:

# Check prettier config file if it exists
cat .prettierrc .prettierrc.json .prettierrc.js 2>/dev/null | head -50

Repository: asyncapi/website

Length of output: 42

🏁 Script executed:

# Count exact spaces in line 149 using sed and printf
sed -n '149p' components/navigation/NavBar.tsx | sed 's/[^ ].*//' | wc -c

Repository: asyncapi/website

Length of output: 61

🏁 Script executed:

# Count exact spaces in line 150 for comparison
sed -n '150p' components/navigation/NavBar.tsx | sed 's/[^ ].*//' | wc -c

Repository: asyncapi/website

Length of output: 61

🏁 Script executed:

# Check lines 148-150 context with visible spaces
sed -n '148,150p' components/navigation/NavBar.tsx | cat -A

Repository: asyncapi/website

Length of output: 232

Fix indentation to resolve prettier formatting error.

The twMerge usage is correct and properly merges the base Tailwind classes with passed className prop—verified against the actual usage in pages/_app.tsx which passes a className prop to NavBar.

Line 149 has incorrect indentation (5 spaces instead of 4). This is causing the prettier pipeline failure.

Fix 
-     <div className={twMerge('bg-white z-50', className)}>
+    <div className={twMerge('bg-white z-50', className)}>
📝 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
<div className={twMerge('bg-white z-50', className)}>
<div className={twMerge('bg-white z-50', className)}>
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project

[error] 149-149: Prettier: Delete whitespace character prettier/prettier

🤖 Prompt for AI Agents 
In components/navigation/NavBar.tsx around line 149, the indentation of the line
containing <div className={twMerge('bg-white z-50', className)}> uses 5 spaces
instead of the project standard 4, causing Prettier to fail; fix by reducing the
leading spaces to 4 (align with surrounding JSX indentation) so the line matches
the file's indentation style and re-run Prettier to confirm the pipeline passes.

<div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-2'>
{!hideLogo && (
<div className='lg:w-auto lg:flex-1'>
Expand Down
Loading