Madina/feature/380 new colours and dropdown for navbar

[madinamacow]

📄 Pull Request Overview

closes #380

🔧 Changes Made

1. Description
   This pull request introduces the new navbar design and improves UI consistency.
   The changes include:

• Copied the current navbar to NavbarMobileV2 and NavbarDesktopV2 folders.
• Applied new colors from the global SCSS system.
• Removed the Teachers link from the navbar.
• Implemented the dropdown system.
• Ensured responsiveness and UI consistency.
• Update tests to validate functionality.

---

✅ Testing*

• Verified that the new colors are applied correctly.
• Checked that the Teachers link is removed.
• Ensured that the dropdown system works as expected.
• Tested responsiveness on different screen sizes.

---

• Screenshots: [Include any screenshots or videos if the changes affect the UI]

• Desktop

I think this looks better in my opinion tell me you think?

• Mobile
  

[Jonroi]

1. Drop Shadows

• The drop shadows seen below and on the right are critical for the design. These shadows need to be added to maintain the original aesthetic.

2. Hover/Clicked Effect (Desktop Navbar)

• The Hover effect and clicked effect for the desktop navbar currently in place needs to be updated. Please replace the existing one with the effect shown in Figma for consistency.

3. Dropdown Behavior

• Please contact @Terhi-S for intended behavior of the dropdowns. Should they:
  • Open all at once when the navbar is hovered over?
  • Or should they open one by one when hovered over each item?
• This needs to be finalized for the correct implementation.

---

Hover Effect

---

Dropdowns & Drop Shadows

---

I'll continue reviewing once these are addressed. Overall, the work is great and includes the tuned storybook and tests, but a bit of tweaking is needed to complete it.

[Skoivumaki]

Please contact @Terhi-S for intended behavior of the dropdowns. Should they:
Open all at once when the navbar is hovered over?
Or should they open one by one when hovered over each item?

I believe developer should have an option to choose which to use, entire row or single column. Why: On smaller desktop devices the font size may become too big to handle and elements may collide/overflow.