Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ADDING A COOL NAVBAR TO THE SITE #1088

Closed
wants to merge 763 commits into from
Closed

ADDING A COOL NAVBAR TO THE SITE #1088

wants to merge 763 commits into from

Conversation

harshdwivediiiii
Copy link

Project Name - WebMasterLog

#1087

before.mp4
After.mp4

🚀 New Feature: Navbar Component

📋 Description

A fully responsive Navbar has been added to the project, providing seamless navigation across pages and improved user experience.

✨ Key Features

  • Logo & Branding: Displays project logo and name.
  • Navigation Links: Direct access to key pages like Home, Contributors, and Feedback.
  • Search Bar: Search for projects and pages instantly.
  • Projects Dropdown: Access project-specific pages directly from the navbar.
  • Responsive Design:
    • Desktop: Full navbar with dropdown and search bar.
    • Mobile: Compact menu accessible via a hamburger icon.

🛠️ Technologies Used

  • Next.js for frontend.
  • Tailwind CSS for styling.
  • Lucide Icons for icons.
  • Framer Motion for smooth animations.
  • React Icons for technology logos.

📂 Components Added

  • Navbar.jsx - Main navbar component.
  • ui/sheet.js - For mobile drawer (side menu).
  • ui/dropdown-menu.js - For projects dropdown.

🔗 Preview

Example UI Flow:

  • Logo + Branding
  • Navigation Links
  • Search Bar (Desktop only)
  • Projects Dropdown (Desktop only)
  • Mobile Menu Drawer (Mobile only)

📸 Screenshots (Optional if you want to add later)

You can add screenshots here to show how the navbar looks on desktop and mobile.

💡 How to Use

  • Clone the repo.
  • Run npm install to install dependencies.
  • Run npm run dev to start the development server.
  • Open your project at http://localhost:3000 and check out the navbar.

📜 Commit Message Suggestion

feat: Added responsive Navbar with search, dropdown, and mobile support

💬 Contribution

Feel free to improve the navbar or suggest new features via pull requests.

📣 Credits

Developed by: Harshvardhan Dwivedi

VaishnaviMankala19 and others added 30 commits June 14, 2024 15:36
@VaishnaviMankala19
Updated README.md
64c42dc
@komal-agarwal5
currency converter
dee10eb
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#320 from VaishnaviMankala19/Virtu…
1430ad0 
…al-Piano

added Virtual-Piano
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#321 from AkhilaSunesh/edit
59ee205 
Hover text: edit
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#322 from komal-agarwal5/komal
aea68fb 
Added Currency converter
@chaanakyaaM
Reddit UI clone added to frontend projects
a132f97
@chaanakyaaM
reddit UI clone added
251edc1
@Asymtode712
added text-to-img-gen
ff0a2c3
@Asymtode712
Update README.md
31d38d3
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#335 from Asymtode712/TxtImgGen
8143eb2 
Added Text-to-Image Generator
@chaanakyaaM
name changed
9c2b14b
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#333 from chaanakyaaM/issue-312
ba2edfc 
Reddit UI Clone added
@AmrutaJayanti
Added Text Translator
cd46fd6
@VaishnaviMankala19
install package
db3f40c
@VaishnaviMankala19
added functionallity
9be5db8
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#339 from AmrutaJayanti/Text
a1b7c2e 
Added Text Translator
@Avdhesh-Varshney
Merge pull request Avdhesh-Varshney#342 from VaishnaviMankala19/back-…
0d928de 
…to-top

Scroll To up Button added
@zalabhavy
micorsoftfix (Avdhesh-Varshney#348)
0776dd9
@Anshika14528
Added Days between two Dates: Avdhesh-Varshney#338 (Avdhesh-Varshney#345
715ecf7 
)

* Added Days between two Dates: Avdhesh-Varshney#338

* Updated

* updated README.md file
@DharshiBalasubramaniyam
Added Notes app - React.js + Firebase (Avdhesh-Varshney#349)
caf90c2 
* Create README.md

* Added notes app project

* Update react.js README.md

* Update database-react.json

* Add screenshot.webp

* fixed the repetition in readme.md
@ParnaRoyChowdhury777
Issue#281 fixed. Added Meme Generator Project. (Avdhesh-Varshney#350)
59af971
@maradadivyasree020
code-editor added (Avdhesh-Varshney#340)
59b02b2 
* code-editor added

* changes added

* Updated README.md

* Update README.md badge

* Rename screenshot.png to screenshot.webp

* Update README.md ss
@Avdhesh-Varshney
bug-fix
44c781e
@AmrutaJayanti
Added Interactive-Periodic-Table (Avdhesh-Varshney#355)
b936af1
@Anshika14528
Added Password Strength Checker: Avdhesh-Varshney#347 (Avdhesh-Varshn…
8ac3e90 
…ey#356)

* Added Password Strength Checker: Avdhesh-Varshney#347

* updated README.md file
@VaishnaviMankala19
added movie-land (Avdhesh-Varshney#357)
ecef005
@zalabhavy
Facbook fix (Avdhesh-Varshney#369)
4f953a2
@Anshika14528
Added Anagram Checker: Avdhesh-Varshney#358 (Avdhesh-Varshney#371)
58e72ea 
* Added Anagram Checker: Avdhesh-Varshney#358

* Made changes
@1simransaini
Added project named Headline-Hub under Node-JS-Projects (Avdhesh-Vars…
d5e656b 
…hney#359)

* Added a News Website project under Node-Js-Project folder

* Renamed screenshot.webp.webp to screenshot.webp as requested
@DharshiBalasubramaniyam
Blog Website using NodeJS (Avdhesh-Varshney#379)
2ffc0d0 
* Add blog platform backend API

* Update node.js projects README.md

* Update node.json

* Delete package-lock.json
dependabot bot and others added 26 commits November 15, 2024 00:12
@dependabot
Bump rollup in /src/app/(category)/react/(projects)/password-generator (
574ee04 
Avdhesh-Varshney#1041)

Bumps [rollup](https://github.com/rollup/rollup) from 4.11.0 to 4.26.0.
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](rollup/rollup@v4.11.0...v4.26.0)

---
updated-dependencies:
- dependency-name: rollup
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@dependabot
Bump rollup in /src/app/(category)/react/(projects)/sudoku-solver (Av…
3086657 
…dhesh-Varshney#1042)

Bumps [rollup](https://github.com/rollup/rollup) from 4.18.0 to 4.26.0.
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](rollup/rollup@v4.18.0...v4.26.0)

---
updated-dependencies:
- dependency-name: rollup
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@dependabot
Bump micromatch in /src/app/(category)/react/(projects)/tesla-clone (A…
f4e35cd 
…vdhesh-Varshney#1043)

Bumps [micromatch](https://github.com/micromatch/micromatch) from 4.0.7 to 4.0.8.
- [Release notes](https://github.com/micromatch/micromatch/releases)
- [Changelog](https://github.com/micromatch/micromatch/blob/master/CHANGELOG.md)
- [Commits](micromatch/micromatch@4.0.7...4.0.8)

---
updated-dependencies:
- dependency-name: micromatch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@dependabot
Bump vite in /src/app/(category)/react/(projects)/password-generator (A…
b30ce66 
…vdhesh-Varshney#1044)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.1.3 to 5.4.11.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.11/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.11/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
@Avdhesh-Varshney
update: home page
3335709
@Avdhesh-Varshney
docs: update
2fec961
@Abankita
updated tags (Avdhesh-Varshney#1047)
e134e6f
@wildcraft958
Update Angular & Next Tags (Avdhesh-Varshney#1050)
2749abc 
* Update data.json

angular and next tags updates

* correction made

updated them as per package.json
@KajalDeore04
Avdhesh-Varshney#1059 - homepage styled (Avdhesh-Varshney#1060)
e49de39 
* Avdhesh-Varshney#1059 - homepage styled

* formatting
@Thunder-Blaze
Added FAQs Section (Avdhesh-Varshney#1061)
b53a1ca 
* Added FAQs Section

* Fixed Eslint Issues
@Sakshamjain98
🧑‍💻: 404 Error page Avdhesh-Varshney#402 (Avdhesh-Varshney#1066)
4b3778d
@monark1
Amazon clone (Avdhesh-Varshney#1064)
9073539 
* Create Readme.md

* Add files via upload

* Update and rename amazon.html to index.html

* Create d

* Add files via upload

* Delete amazon-clone/box1_image.jpg

* Delete amazon-clone/box2_image.jpg

* Delete amazon-clone/amazon_logo.png

* Delete amazon-clone/box3_image.jpg

* Delete amazon-clone/box4_image.jpg

* Delete amazon-clone/box5_image.jpg

* Delete amazon-clone/box6_image.jpg

* Delete amazon-clone/box7_image.jpg

* Delete amazon-clone/box8_image.jpg

* Delete amazon-clone/header1.jpg

* Delete amazon-clone/header2.jpg

* Delete amazon-clone/header3.jpg

* Delete amazon-clone/header4.jpg

* Delete amazon-clone/header5.jpg

* Delete amazon-clone/header6.jpg

* Delete amazon-clone/headphone2.webp

* Delete amazon-clone/footer.png

* Delete amazon-clone/headphone4.jpg

* Delete amazon-clone/hero_image.jpg

* Delete amazon-clone/home-page.png

* Update index.html

* Update amazon.css

* Update cart.html

* Update login.html

* Update product.html

* Add files via upload

* Update Readme.md

* Update index.html

* Delete amazon-clone/footer.webp

* Rename home-page.webp to Screenshot.webp

* Create d

* Add files via upload

* Add files via upload

* Add files via upload

* Update README.md

* Delete src/app/(category)/frontend/(projects)/Amazon-clone/images/d

* Update data.json

* moved folder

* Rename to screenshot.webp

* .

* Add files via upload

* move

* moved folder

* Update README.md

* Update data.json

* .
@DeyNik
real-time-chat-application (Avdhesh-Varshney#1069)
fdbaf4e 
* real-time-chat-application

* real-time-chat-application
@Avdhesh-Varshney
issue-templates-update
9d29c74
@Avdhesh-Varshney
update: pr-template
83ff799
@Avdhesh-Varshney
enhancement: main-readme
1e49ca8
@Sakshamjain98
Update Vanilla JS Data.json (Avdhesh-Varshney#1075)
efb6d54
@Sakshamjain98
Update data.json Next, Vue, Angular, TypeScript (Avdhesh-Varshney#1076)
58c1b31
@Avdhesh-Varshney
update: guidelines
9498c4b
@Avdhesh-Varshney
del: codeql workflow
e1a4d26
@Avdhesh-Varshney
update: workflow
53bc7b9
@Harshit457
medrecord added (Closes Avdhesh-Varshney#1078) (Avdhesh-Varshney#1079)
097adce 
* medrecord added

* medbrain-added-with-readme

* update readme

* med-brain added

* med-brain added

* add med-brain
@Harshit457
real time chat app added (Avdhesh-Varshney#1081)
68493b2 
* real time chat app added

* real-time-chat-app added

* real-time-chat-app added
@DeyNik
email-validator (Avdhesh-Varshney#1082)
c02ef70
@Sakshamjain98
React & Node json data update (Avdhesh-Varshney#1083)
30a25ba 
* Update Vanilla JS Data.json

* Update Next , Vue, Angular , TypeScript Tag in Data.json

* Done React And Node update data.json
@harshdwivediiiii
ADDING A COOL NAVBAR TO THE SITE
5e7b115
@vercel Vercel
Copy link

vercel bot commented Feb 27, 2025

@harshdwivediiiii is attempting to deploy a commit to the avdheshvarshney's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions GitHub Actions
Copy link

Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, join our discord server https://discord.gg/tSqtvHUJzE.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.