created drop down menu for responsive devices and hide that menu in l…

[dhruv8433]

@Avdhesh-Varshney

…arge screens

Pull Request for WebMasterLog 💡

Issue Title:

Enhancement 🧑‍💻: We can provide drop down list instead of static opetaions in single line #183

• Name of the project : WebMasterLog
• Category: Next JS
• Name: Dhruv R Soni
• GitHub ID: https://github.com/dhruv8433
• Idenitfy yourself: GSSOC'24

Closes: #183

Describe the add-ons or changes you've made 📃

• i created one drop down list that only visible in responsive devices and also hide static options on responsive
• when user click on particular drop down options, the filter applied and all cards shown based on user's option selection

Type of change ☑️

What sort of change have you made:

1. hide static menu in responsive devices
2. add drop down on responsive devices

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Code style update (formatting, local variables)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested? ⚙️

• we can check it by see website in responsive devices

Checklist: ☑️

• My code follows the Contributing Guidelines & Code of Conduct of this project.
• This PR does not contain plagiarized content.
• I have performed a self-review of my own code.
• I have commented my code, particularly wherever it was hard to understand.
• My changes generate no new warnings.

Screenshots 📷

• in large pc screen
  

• in responsive devices
  

Note to reviewers 📄

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web-master-log	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 26, 2024 4:04pm

[github-actions]

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.

[dhruv8433]

@Avdhesh-Varshney please check this and merge it

[Avdhesh-Varshney]

@dhruv8433 loading is done many times, loader is called again and again. Try to resolve it.
Also I think, it's not looks attractive with the theme of the website.

[dhruv8433]

ok i will do it

[dhruv8433]

@Avdhesh-Varshney

i resolve multiple loading effect and
check this out i edited drop down as per theme
for all option selected we got

for easy option

for medium

and for hard option

[Avdhesh-Varshney]

@dhruv8433 LGTM. But color of All is not the dark blue so change it.
Why have you update single quotes into double quotes? and tab size from 4 to 2?
This makes pr review difficult, so always push your updated code only not change the style or formatting. OK.
And join discord, it will easy to mentained the pr clear.

[vercel]

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

A member of the Team first needs to authorize it.

[dhruv8433]

@Avdhesh-Varshney

as you say, i updated all bg to light blue

and i revert code to signle quote and just add my code below

[Avdhesh-Varshney]

Easy or any filter is not working?
And still no change in MainPage.jsx file?

[dhruv8433]

@Avdhesh-Varshney

now you can check

• medium
  

• easy
  

now filter is workin properly

[dhruv8433]

Hey @Avdhesh-Varshney ,review it and merged it

[Avdhesh-Varshney]

@dhruv8433 it's still not looks good and re-create the pr again by updating your forked repository.