Progress bar overlaps navbar fixed #1881
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe recent changes enhance the UserNavbar component by introducing responsive design features. The top padding has been adjusted to improve layout on smaller devices, addressing the overlap with the progress bar. Additionally, the component now offers user authentication and navigation functionalities, enriching the overall user experience. Changes
Sequence Diagram(s)Not applicable—changes are primarily related to styling and new component functionality without affecting control flow. Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
src/components/Navbar/UserNavbar .jsx (1)
Line range hint
1-65: General review of the Navbar component.The Navbar component is well-structured with clear separation of concerns and appropriate use of React hooks and conditional rendering. The use of local storage for managing authentication state (
isLoggedIn,username) is straightforward, though consider the security implications of storing such information in local storage.The commented-out
useEffectfor fetching the username could be removed if it's no longer needed, to clean up the codebase.- // useEffect(() => { - // const fetchUsername = async () => { - // try { - // const username = localStorage.getItem("username"); - // console.log(username); - // } catch (error) { - // console.error("Error fetching username:", error); - // setUsername("User"); - // } - // }; - // - // if (isLoggedIn) { - // fetchUsername(); - // } - // }, [isLoggedIn]);Consider adding more robust error handling and user feedback mechanisms, especially around the logout process to enhance user experience.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/components/Navbar/UserNavbar .jsx (1 hunks)
Additional comments not posted (1)
src/components/Navbar/UserNavbar .jsx (1)
67-67: Padding adjustment to prevent overlap is appropriate.The change from
pt-4topt-4 sm:pt-5correctly adds extra padding on small screens, which should prevent the navbar from overlapping with the progress bar as reported. This is a targeted and minimal change that addresses the issue effectively.Please ensure to verify the visual layout on different screen sizes to confirm that the adjustment behaves as expected across all devices.
|
@codervivek5 kindly review this |
|
fix merge conflict src/components/Navbar/UserNavbar .jsx remove extra space from the file name
share any image or video for review your changes |
|
pull the code first |
|
@codervivek5 i have attached the image in the pr desc pl check |
|
@codervivek5 now pls check |
|
@codervivek5 review this pls now |
|
@Priyal208 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@codervivek5 what about this pr pls check |
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (2)
src/components/Navbar/UserNavbar.jsx (2)
10-10: Consider renaming the component toUserNavbar.The file name suggests
UserNavbar, but the component is namedNavbar. For consistency, consider renaming the component.- const Navbar = ({ isAdmin }) => { + const UserNavbar = ({ isAdmin }) => {
13-34: Remove commented-out code.The commented-out code related to fetching the username can be removed for better readability.
- // const [username, setUsername] = useState(""); - // useEffect(() => { - // const fetchUsername = async () => { - // try { - // const username = localStorage.getItem("username"); - // console.log(username); - // } catch (error) { - // console.error("Error fetching username:", error); - // setUsername("User"); - // } - // }; - // if (isLoggedIn) { - // fetchUsername(); - // } - // }, [isLoggedIn]);
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/components/Navbar/UserNavbar.jsx (1 hunks)
Additional comments not posted (11)
src/components/Navbar/UserNavbar.jsx (11)
1-8: LGTM!The import statements are appropriate and necessary for the functionality provided in the file.
36-36: LGTM!The
toggleNavbarfunction is straightforward and correct.
37-37: LGTM!The
handleSearchfunction is straightforward and correct.
49-51: LGTM!The
handleDropdownTogglefunction is straightforward and correct.
53-57: LGTM!The
handleClickOutsidefunction is well-implemented and necessary for managing the dropdown state.
59-64: LGTM!The
useEffecthook for handling clicks outside the dropdown is correctly implemented.
71-71: LGTM!The
NavLogocomponent usage is correct.
108-111: LGTM!The
SearchBarcomponent usage is correct.
112-112: LGTM!The
CartIconcomponent usage is correct.
181-190: LGTM!The
MobileMenucomponent usage is correct.
39-47: FixlocalStorage.setItemusage.The
localStorage.setItemshould use a boolean value forisLoggedIn.- localStorage.setItem("isLoggedIn", false); + localStorage.setItem("isLoggedIn", "false");Likely invalid or redundant comment.
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | ||
| Stationary | ||
| </Link> | ||
| <Link | ||
| to="/popularCategories/bodyCare" | ||
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | ||
| Body-Care | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex items-center"> | ||
| <div className="md:block hidden"> | ||
| <div className="ml-4 flex items-center md:ml-6 gap-6"> | ||
| <SearchBar | ||
| searchTerm={searchTerm} | ||
| handleSearch={handleSearch} | ||
| /> | ||
| <CartIcon /> | ||
| {isLoggedIn ? ( | ||
| <div className="relative flex gap-3 items-center"> | ||
| {/* need styling fix then implement only */} | ||
| {/* <p className="mr-2 overflow-hidden flex text-gray-800">{`Hi, ${username}`}</p> */} | ||
| <FaUserCircle | ||
| onClick={handleDropdownToggle} | ||
| className="text-3xl cursor-pointer" | ||
| /> | ||
| <span className="text-green-700 font-bold">{username}</span> | ||
| {showDropdown && ( | ||
| <div | ||
| ref={dropdownRef} | ||
| className="absolute right-0 mt-32 w-48 bg-white rounded-md shadow-lg py-1"> | ||
| <Link | ||
| to="/dashboard" | ||
| className="block px-4 py-2 text-gray-800 hover:bg-gray-200"> | ||
| Dashboard | ||
| </Link> | ||
| <button | ||
| onClick={handleLogout} | ||
| className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left"> | ||
| Logout | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) : ( | ||
| <AuthButton isLoggedIn={isLoggedIn} /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| <div className="-mr-2 flex md:hidden"> | ||
| <button | ||
| onClick={toggleNavbar} | ||
| className="inline-flex items-center justify-center p-2 rounded-md text-green-800 hover:text-gray-600 focus:outline-none"> | ||
| {isOpen ? ( | ||
| <svg | ||
| className="h-6 w-6" | ||
| stroke="#15803D" | ||
| fill="#15803D" | ||
| viewBox="0 0 24 24"> | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="2" | ||
| d="M6 18L18 6M6 6l12 12" | ||
| /> | ||
| </svg> | ||
| ) : ( | ||
| <svg | ||
| className="h-6 w-6" | ||
| stroke="#15803D" | ||
| fill="#15803D" | ||
| viewBox="0 0 24 24"> | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="2" | ||
| d="M4 6h16M4 12h16M4 18h16" | ||
| /> | ||
| </svg> | ||
| )} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <MobileMenu | ||
| isOpen={isOpen} | ||
| searchTerm={searchTerm} | ||
| handleSearch={handleSearch} | ||
| handleDropdown={handleDropdownToggle} | ||
| openDropdown={showDropdown} | ||
| isLoggedIn={isLoggedIn} | ||
| handleLogout={handleLogout} | ||
| username={username} | ||
| /> | ||
| </nav> |
There was a problem hiding this comment.
Improve class names for readability.
The class names for styling can be improved for readability and maintainability.
- <nav className="bg-[#ecd5c5] shadow-lg md:w-full fixed md:z-50 -mt-1 w-[100vw] z-50 pt-4 sm:pt-5">
+ <nav className="bg-[#ecd5c5] shadow-lg w-full fixed z-50 pt-4 sm:pt-5 -mt-1">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <nav className="bg-[#ecd5c5] shadow-lg md:w-full fixed md:z-50 -mt-1 w-[100vw] z-50 pt-4 sm:pt-5"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="flex justify-between h-20"> | |
| <div className="flex items-center w-full"> | |
| <NavLogo /> | |
| <div className="hidden md:block lg:block"> | |
| <div className="ml-10 flex items-baseline space-x-4"> | |
| <div className="py-1 flex justify-evenly items-center"> | |
| <Link | |
| to="/popularCategories/fashionAccessories" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 font-bold text-base"> | |
| Fashion | |
| </Link> | |
| <Link | |
| to="/popularCategories/customizedGifts" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Gifts | |
| </Link> | |
| <Link | |
| to="/popularCategories/furnitureDecor" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Furniture | |
| </Link> | |
| <Link | |
| to="/popularCategories/printingStationery" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Stationary | |
| </Link> | |
| <Link | |
| to="/popularCategories/bodyCare" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Body-Care | |
| </Link> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="flex items-center"> | |
| <div className="md:block hidden"> | |
| <div className="ml-4 flex items-center md:ml-6 gap-6"> | |
| <SearchBar | |
| searchTerm={searchTerm} | |
| handleSearch={handleSearch} | |
| /> | |
| <CartIcon /> | |
| {isLoggedIn ? ( | |
| <div className="relative flex gap-3 items-center"> | |
| {/* need styling fix then implement only */} | |
| {/* <p className="mr-2 overflow-hidden flex text-gray-800">{`Hi, ${username}`}</p> */} | |
| <FaUserCircle | |
| onClick={handleDropdownToggle} | |
| className="text-3xl cursor-pointer" | |
| /> | |
| <span className="text-green-700 font-bold">{username}</span> | |
| {showDropdown && ( | |
| <div | |
| ref={dropdownRef} | |
| className="absolute right-0 mt-32 w-48 bg-white rounded-md shadow-lg py-1"> | |
| <Link | |
| to="/dashboard" | |
| className="block px-4 py-2 text-gray-800 hover:bg-gray-200"> | |
| Dashboard | |
| </Link> | |
| <button | |
| onClick={handleLogout} | |
| className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left"> | |
| Logout | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| ) : ( | |
| <AuthButton isLoggedIn={isLoggedIn} /> | |
| )} | |
| </div> | |
| </div> | |
| <div className="-mr-2 flex md:hidden"> | |
| <button | |
| onClick={toggleNavbar} | |
| className="inline-flex items-center justify-center p-2 rounded-md text-green-800 hover:text-gray-600 focus:outline-none"> | |
| {isOpen ? ( | |
| <svg | |
| className="h-6 w-6" | |
| stroke="#15803D" | |
| fill="#15803D" | |
| viewBox="0 0 24 24"> | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| d="M6 18L18 6M6 6l12 12" | |
| /> | |
| </svg> | |
| ) : ( | |
| <svg | |
| className="h-6 w-6" | |
| stroke="#15803D" | |
| fill="#15803D" | |
| viewBox="0 0 24 24"> | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| d="M4 6h16M4 12h16M4 18h16" | |
| /> | |
| </svg> | |
| )} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <MobileMenu | |
| isOpen={isOpen} | |
| searchTerm={searchTerm} | |
| handleSearch={handleSearch} | |
| handleDropdown={handleDropdownToggle} | |
| openDropdown={showDropdown} | |
| isLoggedIn={isLoggedIn} | |
| handleLogout={handleLogout} | |
| username={username} | |
| /> | |
| </nav> | |
| return ( | |
| <nav className="bg-[#ecd5c5] shadow-lg w-full fixed z-50 pt-4 sm:pt-5 -mt-1"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="flex justify-between h-20"> | |
| <div className="flex items-center w-full"> | |
| <NavLogo /> | |
| <div className="hidden md:block lg:block"> | |
| <div className="ml-10 flex items-baseline space-x-4"> | |
| <div className="py-1 flex justify-evenly items-center"> | |
| <Link | |
| to="/popularCategories/fashionAccessories" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 font-bold text-base"> | |
| Fashion | |
| </Link> | |
| <Link | |
| to="/popularCategories/customizedGifts" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Gifts | |
| </Link> | |
| <Link | |
| to="/popularCategories/furnitureDecor" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Furniture | |
| </Link> | |
| <Link | |
| to="/popularCategories/printingStationery" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Stationary | |
| </Link> | |
| <Link | |
| to="/popularCategories/bodyCare" | |
| className="text-green-800 hover:text-green-500 hover:underline block px-4 py-2 text-base font-bold"> | |
| Body-Care | |
| </Link> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="flex items-center"> | |
| <div className="md:block hidden"> | |
| <div className="ml-4 flex items-center md:ml-6 gap-6"> | |
| <SearchBar | |
| searchTerm={searchTerm} | |
| handleSearch={handleSearch} | |
| /> | |
| <CartIcon /> | |
| {isLoggedIn ? ( | |
| <div className="relative flex gap-3 items-center"> | |
| {/* need styling fix then implement only */} | |
| {/* <p className="mr-2 overflow-hidden flex text-gray-800">{`Hi, ${username}`}</p> */} | |
| <FaUserCircle | |
| onClick={handleDropdownToggle} | |
| className="text-3xl cursor-pointer" | |
| /> | |
| <span className="text-green-700 font-bold">{username}</span> | |
| {showDropdown && ( | |
| <div | |
| ref={dropdownRef} | |
| className="absolute right-0 mt-32 w-48 bg-white rounded-md shadow-lg py-1"> | |
| <Link | |
| to="/dashboard" | |
| className="block px-4 py-2 text-gray-800 hover:bg-gray-200"> | |
| Dashboard | |
| </Link> | |
| <button | |
| onClick={handleLogout} | |
| className="block px-4 py-2 text-gray-800 hover:bg-gray-200 w-full text-left"> | |
| Logout | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| ) : ( | |
| <AuthButton isLoggedIn={isLoggedIn} /> | |
| )} | |
| </div> | |
| </div> | |
| <div className="-mr-2 flex md:hidden"> | |
| <button | |
| onClick={toggleNavbar} | |
| className="inline-flex items-center justify-center p-2 rounded-md text-green-800 hover:text-gray-600 focus:outline-none"> | |
| {isOpen ? ( | |
| <svg | |
| className="h-6 w-6" | |
| stroke="#15803D" | |
| fill="#15803D" | |
| viewBox="0 0 24 24"> | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| d="M6 18L18 6M6 6l12 12" | |
| /> | |
| </svg> | |
| ) : ( | |
| <svg | |
| className="h-6 w-6" | |
| stroke="#15803D" | |
| fill="#15803D" | |
| viewBox="0 0 24 24"> | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| d="M4 6h16M4 12h16M4 18h16" | |
| /> | |
| </svg> | |
| )} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <MobileMenu | |
| isOpen={isOpen} | |
| searchTerm={searchTerm} | |
| handleSearch={handleSearch} | |
| handleDropdown={handleDropdownToggle} | |
| openDropdown={showDropdown} | |
| isLoggedIn={isLoggedIn} | |
| handleLogout={handleLogout} | |
| username={username} | |
| /> | |
| </nav> |
|
@codervivek5 I have 3PRs pending to be reviewed since last 1 week, pls look into that |
|
@codervivek5 MERGE THIS, its been a week im trying to get a review, i have 3PRS pending to be reviewed, pls look into that |
|
@codervivek5 add gssoc label and level to this, its not counted in my gssoc points its been 3 days |
Fixes Issue
fixes #1834
Changes proposed
The progrss bar earlier overlapped navbar and hid some portion of navbar, I gave appropriate padding and fixed it so that overlapping is fixed
Screenshots
Note to reviewers
You can see that overlap is now gone
Summary by CodeRabbit
New Features
Style