Made a navbar #37
Made a navbar #37
Conversation
|
fixes: #19 |
Add this in the PR description. |
frontend/src/index.css
Outdated
| @@ -70,3 +72,61 @@ button:focus-visible { | |||
| background-color: #f9f9f9; | |||
| } | |||
| } | |||
|
|
|||
There was a problem hiding this comment.
Since these rules are only for the Navbar, please move them to "Navbar.module.css". You can read about how to use css modules.
There was a problem hiding this comment.
At a cursory glance, this looks great!
@shivansh-bhatnagar18 @Varun-Kolanu @ApoorvDubey23 Please have a detailed look.
frontend/src/pages/AppLayout.tsx
Outdated
| { title: "Play Options", link: "/play" }, | ||
| { title: "Game", link: "/game" }, | ||
| { title: "About", link: "/about" }, | ||
| ]; // using the default ons here just for example... you can use your links as per need |
There was a problem hiding this comment.
The comment seems unnecessary
|
|
||
| function Navbar() { | ||
| return <div className="flex flex-row">Navbar</div>; | ||
| interface NavbarProps { |
|
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 |
kuv2707
added
area: Frontend (structure)
RashiJyotishi
force-pushed
the
RJ-navbar
branch
6 times, most recently
from
1d23196
to
b12b0c4
Compare
this commit adds a nabar. fixes: shivansh-bhatnagar18#19
|
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. 💯 |
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
lorem300and click on tab, then check the navbar for different screen sizes.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)
Screencast from 01-06-24 05:53:40 PM IST.webm