Custom select menu for LangSwitcher

[Chromoprotein]

📄 Pull Request Overview

closes 211

🔧 Changes Made

1. Made a custom drop-down select menu for switching languages.

2. Added the requested style improvements: aligned the text to left, made the arrow smaller with more spacing, improved the border's style cohesion, and made the mobile version look cleaner.

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

[Skoivumaki]

@Chromoprotein is this a new PR? Did you do requested changes from the last one?

[Chromoprotein]

@Skoivumaki Yes, sorry I made a new branch and PR because I had some git problems. I made the requested changes except the animation. Is it ok if that's a separate issue?

[Skoivumaki]

@Chromoprotein Did you figure out the ident issue?

Is it ok if that's a separate issue?

Maybe if needed

[Chromoprotein]

@Skoivumaki I noticed the mobile version was making the logout button's text next to it look misaligned, so I fixed that, but I'm not sure that was the problem tbh.

[Skoivumaki]

@Skoivumaki I noticed the mobile version was making the logout button's text next to it look misaligned, so I fixed that, but I'm not sure that was the problem tbh.

Notice how the button used to look. Now that the border matches the size of "log out", the spacing seems too much imo. I think this is what was meant with ident. I would reduce spacing between text and svg to not make the button seem so wide. Only for desktop, mobile is fine as is.

[Skoivumaki]

@leolabdev clarification about the ident thing?

[leolabdev]

@Skoivumaki @Chromoprotein
It looks better, but I don't understand why the margins look different on mobile and desktop sizes.

VS

Also, on the browser solution, you can see that the option and label are on the same level and aligned to the left. I think we should also stick to this. Also, now when hovering over it, this is not shown to the user at all.

[leolabdev]

see my comments above

[Chromoprotein]

How does it look now? The margins are the same on mobile and desktop, the option and label are on the same level and aligned to the left, and hovering is indicated by the text color.

[Jonroi]

I think this implementation works well enough for now—it functions properly on both desktop and mobile. Let’s move forward with it as-is, since our next step will involve a complete navbar redesign.

Screenshots:

Desktop View:

Mobile View:

[Chromoprotein]

@leolabdev It looks like this can't be merged until you approve it, could you please review? 🙂