Refactor Desktop Navbar to use individual dropdown menus

[Rutjake]

✨ Enhancement Description

• What is it?: Refactor the main navigation bar's dropdown logic. Instead of opening a single shared full-width bar for all sub-links, each main menu item with sub-links (e.g., Peli, Galleria, Opetus, PRG) should have its own independent context-aware dropdown menu that positions itself directly underneath the hovered/clicked menu item.
• Why improve it?: The current behavior opens all sub-menus on a single shared, full-width horizontal bar, which takes up too much screen space and feels disjointed. Implementing separate context-specific dropdown boxes follows modern UI/UX patterns, matches the design guidelines, and makes the navigation much cleaner.

---

🌟 Benefits of the Enhancement

• User Experience: Users can visually connect the open sub-menu items directly to the parent category they selected, rather than looking at a full-width bar. This improves navigation flow, reduces cognitive load, and looks much more professional.
• Project Impact: Refactors the navigation subsystem into a cleaner, more modular component structure where each menu item controls its own sub-menu state and positioning (e.g., using relative positioning or absolute anchoring).

---

🛠️ Proposed Implementation

• Technical Details:
  • Update the navigation CSS/styling so that the dropdown containers are absolute-positioned wrappers aligned below the parent <li> or flex item.
  • Implement dynamic positioning (or ensure the parent menu items have position: relative) so the dropdown boxes render inline with the text links, with a dark background, shadows, and rounded corners as shown in the Figma designs.
  • Ensure mouse interactions (hover/click) trigger only the specific dropdown active for that slot, closing any previously open ones.
• Implementation Plan:
  1. Review the exact design variables (background color, border-radius, shadows, padding) from the Figma file.
  2. Refactor the header navigation component to isolate dropdown rendering to individual menu item blocks.
  3. Apply correct CSS layouts (position: absolute; top: 100%; left: 0; or centered alignment relative to the item).
  4. Ensure proper accessibility (ARIA roles if necessary) and smooth transitions.

---

📎 Additional Information

• 🔗Figma Designs

📷Preview: