Refactor(navbar): Use twMerge for z-index className management instead of template literal
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
## Problem
`NavBar.tsx` (line 147) uses template literal for className concatenation instead of `twMerge`, which is the established pattern used throughout the codebase.
**Current:**
**Expected:**
## Issues
- Inconsistent with codebase conventions (a lot of components use `twMerge`)
- Hardcoded `z-50` should be in base className
- Template literals don't handle Tailwind class conflicts properly
## Solution
Import `twMerge` from `tailwind-merge` and use it for className management, following the pattern used in `Button.tsx`, `TOC.tsx`, and other components.
## Benefits
- ✅ Consistent with codebase conventions
- ✅ Proper class conflict resolution
- ✅ Better CSS organization
- ✅ Improved maintainability
- ✅ Allows proper className prop overrides
## Related Files
*Example of proper twMerge usage*
- `components/buttons/Button.tsx`
- `components/TOC.tsx`
- `components/typography/Paragraph.tsx`
Contributor guide
Research direction
Open NavBar.tsx around line 147 and compare its className handling with components/buttons/Button.tsx and components/TOC.tsx. Follow the established twMerge pattern, then verify that the navbar keeps its base classes while className conflicts are resolved as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 75/100