Fix: Replace HTML 'class' with React 'className' in Navbar component

[aarjav812]

Description

The Navbar component (src/components/common/Navbar.js) is using HTML's class attribute instead of React's JSX className attribute. This violates React best practices and causes console warnings during development.

Bug Details

Location: src/components/common/Navbar.js (Lines 83, 85, 88, 96)

Current Code (Incorrect):

• Line 83: <Link class="navbar-item">
• Line 85: <span class="icon">
• Line 88: <span class="text">
• Line 96: < div class="indicator"></div> (also has spacing issue)

Expected Behavior

All JSX elements should use className instead of class as per React JSX syntax requirements.

Impact

• ⚠️ Causes React console warnings
• ⚠️ Violates React JSX standards
• ⚠️ May cause issues during build/deployment
• ⚠️ Inconsistent with rest of the codebase

Severity

High - This is a critical syntax issue that should be fixed to maintain code quality and follow React best practices.

Proposed Solution

Replace all instances of class= with className= in the Navbar component and fix the spacing typo on the indicator div.

Additional Context

This issue was discovered while reviewing the codebase for React best practices compliance. The rest of the application correctly uses className, but these 4 instances in the Navbar component were missed.

Labels

• bug
• good first issue
• hacktoberfest (if applicable)

[aarjav812]

Please Assign me this issue.