vercel[bot]
commented
2 weeks ago 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 |
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" <p className={
` Navbar.cssnav-title ${theme}}>ShopNex`/ 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