feat: improved the dropdown menu of filter section

[sambhavgupta0705]

Description

• enchanced the dropdown menu for better UI .
• works fine for mobile view also
• need help for design
• reduced the height of the menu.

Related issue(s)
Resolves #1318

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	92adfab
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64b6b5dc1267b80008f27124
😎 Deploy Preview	https://deploy-preview-1558--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	33
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1558--asyncapi-website.netlify.app/

[sambhavgupta0705]

hey @akshatnema I need help for design of selected items.

[akshatnema]

@sambhavgupta0705 Regarding design and UI colors, kindly take help from @Mayaleeeee

[Mayaleeeee]

Thanks @akshatnema I appreciate this.

@sambhavgupta0705 please let me know if you need my help.

[sambhavgupta0705]

yes @Mayaleeeee I need help with what your color should be given to selected items,for now light blue is being given

[sambhavgupta0705]

it is like this for now

need suggestions on how can we improve this

[akshatnema]

@sambhavgupta0705 tbh, present dropdown in your PR looks horrible to me in terms of design. You can make the dropdown from scratch also, using new designs and colors. Take help from @Mayaleeeee regarding this.

[akshatnema]

@sambhavgupta0705 what's the status of this PR?

[sambhavgupta0705]

@akshatnema PTAL

[akshatnema]

@sambhavgupta0705 See, it's not necessary to extend the space for dropdown for each field. Instead, you can also overflow the dropdown over each other using z-index. I just want that the dropdown should look professional in terms of UI. You can take reference of https://flowbite.com/docs/components/dropdowns/#background-hover.

[sambhavgupta0705]

ok @akshatnema I will keep this in mind.
Hey @Mayaleeeee can you help me with designing of the dropdown menu of tools filter

[derberg]

@Mayaleeeee any chance you can have a look?

[Mayaleeeee]

@Mayaleeeee any chance you can have a look?

Yes, please, I will.

[Mayaleeeee]

ok @akshatnema I will keep this in mind. Hey @Mayaleeeee can you help me with designing of the dropdown menu of tools filter

I'm sorry I missed this 😥 I will take a look at it soon

[Mayaleeeee]

Hi @sambhavgupta0705 please take a look at this and feel free to let me know if you need any further assistance.

screen-recording.1.webm

[sambhavgupta0705]

@Mayaleeeee please provide the access of the figma file

[Mayaleeeee]

@Mayaleeeee please provide the access of the figma file

I just did.

[sambhavgupta0705]

@Mayaleeeee the design is good but @akshatnema wanted something different.He said to make something like present in the preview but if he agrees then we can go with this one also.

[Mayaleeeee]

@Mayaleeeee the design is good but @akshatnema wanted something different.He said to make something like present in the preview but if he agrees then we can go with this one also.

Any update???

[sambhavgupta0705]

Any update???

@akshatnema 😄

[akshatnema]

Hi @sambhavgupta0705 please take a look at this and feel free to let me know if you need any further assistance.

Thanks @Mayaleeeee for designing the filter menu and I liked it as well. I personally liked the animation when we clicked on Filters and it has animation of slide-in as well as fade-out for the Filters box. We can surely update these animations in later PRs. But with the scope of present PR, we should render the dropdown in a way that it should be more standardised and easy for the viewers to find their respective options. With current implementation, finding out a specific language from list can be a difficult task as the list is spread out. Instead of this, can we go with this solution - https://codesandbox.io/s/keen-bhabha-2mpiq, but provide it with a multi-select option? In this way, we are giving the user to search for specific languages or technologies they want, and also can go with the search options as well. @Mayaleeeee, if you want, you can provide us with better version of this dropdown which is more inclined toward the AsyncAPI website theme and designs, but I think core crux for this dropdown is to make the dropdown in standard way and provide users with the option to search for languages as well.

cc: @sambhavgupta0705