Adjusted font sizes and margins for better readability

[P0Saurabh]

1. MenuItem Component: I introduced a new MenuItem component to encapsulate the rendering of menu items. This component renders the icon, text, and handles the onClick event.

2. Consistent Layout: By using the MenuItem component, you ensure that each menu item has a consistent layout, making it easier to manage and style the items.

3. Reuse of Code: The same MenuItem component is used for both sections of your Navbar, which promotes code reusability and reduces redundancy.

4. Props: The MenuItem component accepts the following props:

   • icon: This prop is for the icon component (e.g., <AiFillHome />).
   • text: This prop is for the text associated with the menu item.
   • onClick: This prop is for the click event handler.
   • isActive: This prop is for indicating whether the menu item is currently active, based on the provided path.

   The isActive prop helps you highlight the active menu item, such as when the user is on the corresponding page.

5. Simplified Main Component: In your main Navbar component, I replaced the repeated code blocks for each menu item with instances of the MenuItem component. This results in cleaner and more maintainable code.

6. Responsive Design: The code now properly handles the change in appearance based on the onHover state.

These changes improve the structure, maintainability, and consistency of your Navbar component while ensuring proper alignment of icons and titles. Additionally, you can easily extend the menu items or customize their appearance as needed.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
edu-smart	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 20, 2023 7:12pm

[P0Saurabh]

can you please add hacktoberfest tag