daabChingrii/website

Create a responsive navbar using nextjs and TailwindCSS

Open

#6 opened on Oct 31, 2024

View on GitHub
 (5 comments) (0 reactions) (1 assignee)TypeScript (4 forks)auto 404
Hacktoberfestgood first issuehacktoberfest-accepted

Repository metrics

Stars
 (2 stars)
PR merge metrics
 (PR metrics pending)

Description

Navbar Component

Description

Create a responsive navbar using Next.js and Tailwind CSS. The navbar should include links to different sections of the website and should be collapsible on smaller screens.

Requirements

  • Navigation Links: Include links like Home, About, Services, Contact, etc.
  • Responsive: The navbar should collapse into a menu icon on mobile screens.
  • Dropdowns: Optional dropdown menus can be used for additional sublinks.
  • Styling: Match the styling to the website's theme (dark/light).

Additional Notes

  • Feel free to use icons or animations to improve the UX.
  • Use any preferred UI libraries like shadcn, Radix UI, or Heroicons if helpful.

Labels

  • Hacktoberfest, enhancement, good first issue

Contributor guide

Research direction
Explore the current project structure, review Tailwind CSS documentation for responsive design, and implement a collapsible navbar using React state. Ensure accessibility and smooth animations.
Tech stack
typescriptnextjstailwindcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitNext.jsTailwindCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75