search

shivansh-bhatnagar18 / multiplayer-uno

https://multiplayer-uno.vercel.app
20 stars 43 forks source link

Made a navbar #37

Closed RashiJyotishi closed 1 month ago

RashiJyotishi commented 1 month ago

Description

For the nav bar, I have used "sticky" in Tailwind CSS for it to always be on the top of the page. On the left side, there is a logo, and on the right side, there are nav links. For screens 1024px and above, the nav links look different, while for 768px to 1024px, they are underlined, and a white box appears on hovering over them. For less than 768px screen size, a hamburger menu appears, and the nav links toggle from the right side of the page.

fixes: #19

Motivation and Context

The motivation behind this was to provide access to different tabs in an organized manner. The different navbar styles according to different screen sizes aim to offer a better user experience and responsiveness. This prevents the logo and nav links from overlapping as the screen size decreases.

How to Test

  1. Hover over the nav links, setting different screen sizes.
  2. Click on the logo and nav links.
  3. Type lorem300 and click on tab, then check the navbar for different screen sizes.
  4. There is a video below, you can see that too.

Related Issues

You can customize the background color, the logo, or any other aspect. My aim was to provide better navbar functionalities.

Checklist

Screenshots (if applicable)

Screenshot from 2024-06-01 17-18-56 Screenshot from 2024-06-01 17-19-16 Screenshot from 2024-06-01 17-19-30 Screenshot from 2024-06-01 17-11-06 Screencast from 01-06-24 05:53:40 PM IST.webm

RashiJyotishi commented 1 month ago

fixes: #19

kuv2707 commented 1 month ago

fixes: #19

Add this in the PR description.

kuv2707 commented 1 month ago

Please squash the commits into one and follow the commit message format as specified in the docs.

Also make sure the frontend checks pass. Run npm run fix-format to format the files.

shivansh-bhatnagar18 commented 1 month ago

Thanks @RashiJyotishi for this amazing PR but I think that there is a better design to the navbar given to us in the PR #40. So I am closing this issue for now but kuddos to ur contribution and hard work. :100: