Fix issue #67: Implemented scrollbar and toggle functionality for theme list

[imsachin49]

Changes Made:

• Added scrollbar to the theme list for easier navigation!
• Implemented toggle functionality for the theme button to show/hide the theme list.

Details:

• Added CSS styles to create a scrollbar for the theme list container
• Modified the ThemeButton component to toggle the visibility of the theme list on clicking the theme button by utilizing the useState hook in React.
• Tested the changes locally to ensure smooth functionality

Related Issue:

This pull request addresses issue baoliay2008#67

[baoliay2008]

@imsachin49 Thank you so much for your prompt pull request, excellent work.

---

Regarding the toggling functionality, I noticed three issues with its behavior:

1. Click the theme button, click outside, then click the theme button again.

   #67-bug-1.webm

2. Click the theme button, select an item from the theme list, then click the theme button again.

   #67-bug-2.webm

3. Click the theme button, drag the scrollbar, then click the theme button again.

   #67-bug-3.webm

---

To address these issues:

• For Problem 1: We should add an event listener to detect when a click occurs outside of the dropdown component.

  #67-bug-1-fixed.webm

• For Problems 2 and 3: Simply remove the onBlur event.

  #67-bug-2-fixed.webm

  #67-bug-3-fixed.webm

---

Any other feedback is welcome. If you agree with these suggestions, I'll proceed with merging the pull request.

[imsachin49]

Yeah those changes makes sense and i believe they effectively resolves the identified issues. You can proceed with merging the pull request.