Navigation Bar

[PiyushKalyanpy]

Hi there, just wanted to say a quick thank you for your recent contribution of the Navbar with 4 sections - it's looking great! 👍

I did notice, however, that the design could be made more responsive for mobile devices. Specifically, it would be great to have a menu icon with three lines that appears in the top right corner when viewed on a smaller screen. When this icon is clicked, it should reveal a sidebar with the same links as the Navbar.

Here are the steps I would suggest:

• [ ] Make two div's for Nav bar one will be hidden on smaller screen and one on Bigger screens. You can achive this by adding hidden md:block or md:flex class in Bigger screen div and md:hidden class in smaller class div.
• [ ] Use a useState varible for smaller screen so that we can open sidebar onClicks : const [showSidebar, setShowSidebar] = useState(false);
• [ ] `<button className="" onClick={() => setShowSidebar(!showSidebar)}

  `

Would you be open to adding this functionality? I'm happy to help out with the process if you need any guidance.

Originally posted by @PiyushKalyanpy in https://github.com/PiyushKalyanpy/UPI-QR-Code-Generator/issues/10#issuecomment-1501074809

[Kalash43012001]

Hey, Hi Could you assigned me this issue

[PiyushKalyanpy]

Hey, Hi Could you assigned me this issue

Sure @Kalash43012001, I am assigning this issue to you. I am ready to assist you, if you need any help.