Enhance Navbar

[IDishaJain]

Title : Enhance Navbar

Issue No. : 511

Close #<511>

Changes Made

This pull request includes several enhancements to the Navbar component, aiming to improve the overall user experience and visual consistency. The key changes are as follows:

Positioning and Alignment:

Adjusted the position of "ShopNex" in the navbar for better alignment and visibility.

Hover Effect for Light Theme:

Modified the hover effect for menu items to a lighter color (#e1e1e1) for better contrast in light theme.

Theme Toggle Improvements:

Refined theme toggle logic and styling to ensure smooth transitions between dark and light modes.

General Layout and Spacing:

Improved the layout and spacing of navbar elements for a cleaner, more professional look.
These changes enhance the visual appeal and usability of the navbar, providing a more polished and professional user experience.

Attaching the Screenshots :

Code Snippets Highlighting Key Changes:

Navbar.jsx

`useEffect(() => {
if (theme === "dark") {
setIcon(cart_icon_dark);
document.getElementById("nav").classList.add("dark");
} else {
setIcon(cart_icon);
document.getElementById("nav").classList.remove("dark");
}
}, [theme]);

const toggleTheme = () => {
setTheme(theme === "dark" ? "light" : "dark");
};

// Position adjustment for "ShopNex"

ShopNex

` **Navbar.css**

`/* Improved Navbar Layout */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
}

/* Improved "ShopNex" Positioning /
.nav-title {
font-size: 24px;
font-weight: bold;
transition: color 0.3s ease;
margin-left: 8px; / Adjusted for better positioning */
}

/* Hover Effect for Light Theme /
.nav-item a:hover {
color: #e1e1e1; / Light color for hover effect */
}

/* Toggle Theme Button Refinements */
.toggle-theme {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: #515151;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s ease;
}
`

Checklist

• I have tested these changes locally.
• I have reviewed the code and ensured it follows the project's coding standards.
• I have updated the documentation (if necessary).
• I have read the contributing guidelines.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
shop-nex	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 14, 2024 1:44pm