Update UserNavbar.jsx #2500
Open
Update UserNavbar.jsx #2500
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added DarkModeToggle Component The DarkModeToggle component is added to the Navbar alongside the CartIcon and AuthButton. It toggles between light and dark modes by adding or removing the dark class from the document.documentElement.
|
@varun28sharma 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. |
WalkthroughThe changes update the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant DT as DarkModeToggle
participant R as Document Root
U->>DT: Click dark mode button
DT->>DT: Toggle isDarkMode state
DT->>R: useEffect adds/removes "dark" class
R-->>DT: UI updated with new theme
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 using PR comments)
Other keywords and placeholders
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
🧹 Nitpick comments (1)
src/components/Navbar/UserNavbar.jsx (1)
188-207: Consider enhancing the DarkModeToggle implementation.The dark mode toggle implementation works as a basic solution but could be improved in several ways:
- The current implementation doesn't persist user preferences across page reloads.
- It doesn't respect the user's system preference for dark/light mode.
- Direct DOM manipulation with
document.documentElement.classListcould be replaced with a more React-centric approach.- Emoji icons might render inconsistently across platforms.
Consider enhancing the implementation with these improvements:
const DarkModeToggle = () => { - const [isDarkMode, setIsDarkMode] = useState(false); + const [isDarkMode, setIsDarkMode] = useState(() => { + // Check localStorage first, then fall back to system preference + const savedMode = localStorage.getItem('darkMode'); + if (savedMode !== null) { + return savedMode === 'true'; + } + return window.matchMedia('(prefers-color-scheme: dark)').matches; + }); useEffect(() => { if (isDarkMode) { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } + localStorage.setItem('darkMode', isDarkMode); }, [isDarkMode]); return ( <button onClick={() => setIsDarkMode(!isDarkMode)} - className="p-2 rounded-full hover:bg-gray-200" + className="p-2 rounded-full hover:bg-gray-200 flex items-center justify-center" + aria-label={isDarkMode ? "Switch to light mode" : "Switch to dark mode"} > - {isDarkMode ? "🌙" : "☀️"} + {isDarkMode ? ( + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> + <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> + </svg> + ) : ( + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> + <circle cx="12" cy="12" r="5"></circle> + <line x1="12" y1="1" x2="12" y2="3"></line> + <line x1="12" y1="21" x2="12" y2="23"></line> + <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> + <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> + <line x1="1" y1="12" x2="3" y2="12"></line> + <line x1="21" y1="12" x2="23" y2="12"></line> + <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> + <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> + </svg> + )} </button> ); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Navbar/UserNavbar.jsx(6 hunks)
🔇 Additional comments (1)
src/components/Navbar/UserNavbar.jsx (1)
101-101: Good placement of the DarkModeToggle component.The DarkModeToggle component is appropriately placed alongside other navigation elements like CartIcon and AuthButton, creating a consistent user experience.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added DarkModeToggle Component
The DarkModeToggle component is added to the Navbar alongside the CartIcon and AuthButton.
It toggles between light and dark modes by adding or removing the dark class from the document.documentElement.
Summary by CodeRabbit