feat: Add Clipboard Button, Fix Dark Mode Toggle & Refactor Navbar Layout

[mdnm18]

📝 Summary

This PR addresses Issue #5 by implementing a "Copy to Clipboard" feature and extends the scope to fix critical UI/UX bugs found during development, specifically the broken Dark/Light mode toggle (Issue #66) and Navbar alignment inconsistencies.

✨ Key Changes

1. Feature: Copy to Clipboard (Closes #5)

• Created a reusable ClipboardButton.jsx component with visual feedback (Checkmark icon + Toast notification).
• Integrated this button into the Contribute page under the "Generated JSON" section to make copying easier for contributors.

2. Fix: Dark/Light Mode Functionality (Closes #66)

• Problem: The theme toggle was unresponsive because Tailwind CSS v4 handles dark mode differently than v3.
• Solution: - Updated index.css to use the new @custom-variant dark directive.
  • Removed deprecated darkMode: 'class' from tailwind.config.js.
  • Added localStorage persistence in App.jsx so the user's theme preference is remembered on refresh.

3. UI/UX: Navbar Overhaul

• Missing Link: Added the missing "Contribute" link to the navigation menu.
• Alignment Fix: Refactored the Navbar layout to group the Search Bar, Menu Links, and Theme Toggle into a unified container with consistent spacing.
• Design Adjustment: To improve spacing and prevent overcrowding, the "About" menu item has been converted to an icon-only link (removed the text label), creating a cleaner visual balance.

🛠️ Technical Details

• Tech Stack: React, Tailwind CSS v4, Framer Motion.
• Files Modified: Navbar.jsx, Contribute.jsx, App.jsx, index.css, tailwind.config.js.

🔗 Related Issues

• Closes Restyling #5
• Closes [Fix]: Fix Broken Dark/Light Theme Toggle #66

---

Tested locally: The Copy button works with toast notifications, Dark mode toggles instantly and persists after reload, and the Navbar is fully responsive.

[netlify]

✅ Deploy Preview for codemint ready!

Name	Link
🔨 Latest commit	79a7bdf
🔍 Latest deploy log	https://app.netlify.com/projects/codemint/deploys/692d6d6191518d0008da1d68
😎 Deploy Preview	https://deploy-preview-85--codemint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mdnm18]

Hi @Roshansuthar1105,

I want to clarify a mix-up on my end: I realized after submitting this that Issue #5 (Copy to Clipboard) was actually from a different project board I was tracking! 😅

However, this PR is still critical for this project because it fixes Issue #66 (Broken Dark/Light Theme Toggle).

While working on the UI, I noticed the theme toggle wasn't persisting or updating correctly (due to Tailwind v4 changes), so I fixed that along with the Navbar alignment bugs.

Summary of this PR:

1. ✅ Fixes Issue [Fix]: Fix Broken Dark/Light Theme Toggle #66: Dark Mode toggle is now fully functional and persists on reload.
2. 🎨 Navbar Polish: Fixed spacing, alignment, and the search bar width.
3. ✨ Enhancement: I implemented the "Copy to Clipboard" button (from the other issue). I left it in as it significantly improves the UX on the Contribute page, but I can remove it if you prefer to keep this PR strictly for bug fixes.

Sorry for the confusion regarding the Issue #5 reference in the title!