VishnuAmit/LapProFix

Update Navbar Contents

Open

#11 opened on Oct 7, 2024

View on GitHubContributor guide
 (5 comments) (0 reactions) (2 assignees)TypeScript (17 forks)auto 404
Hacktoberfestenhancementgood first issuehacktoberfest-accepted

Repository metrics

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

Description

Task Overview

This task focuses on modifying the LapProFix dashboard navbar to replace existing headings with a search bar and mobile number. The goal is to ensure responsiveness so that the search bar and phone number are hidden inside a hamburger menu when the viewport is shrunk.

Your Role

  1. Fork the Repository
    Fork the LapProFix repository to your local machine.

  2. Install Packages
    Navigate to the project directory and install the necessary packages using:

    npm install i

  3. Run the Project

    npm run dev

  4. Navigate to the page

http://localhost:3000/dashboard

  1. Implement Search Bar and Phone Number
  • Replace the existing navbar headings (like Home, Deals, Sell, and others) with a search bar and mobile number next to it.
  1. Update Styles
  • Modify the CSS to ensure that the search bar and mobile number are visually appealing and responsive. (tailwind css).

Contributor guide

Research direction
Modify the Navbar component in the dashboard to replace current headings with a search bar and phone number. Ensure responsiveness by hiding these elements inside a hamburger menu on smaller viewports using Tailwind CSS classes.
Tech stack
typescriptreactnextjstailwindcss
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
GitNode.jsnpm
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80