refactor(frontend): always Open Tab Menu

[ogerly]

🍰 Pullrequest

This PR modifies the TabControl component to keep the menu always open, addressing the issue of users not finding the cockpit option. The changes remove the auto-closing functionality while preserving the sliding animation between menu items.

Changes

TabControl.vue

1. Removed isOpen ref and related logic
2. Removed open() and closeWithDelay() functions
3. Removed timer and related onUnmounted hook
4. Modified setItem() function to handle only the sliding animation
5. Simplified CSS by removing logic related to opening and closing
6. Kept isSliding state to manage the sliding animation
7. Removed click handler that was opening the menu
8. Adjusted CSS to always show all items and keep the menu in its open state

TabControl.test.ts

1. Removed vi.useFakeTimers() and vi.runAllTimers() calls
2. Removed "click tab control button" describe block and nested tests
3. Removed "set item with menu closed" test
4. Removed "unmount" test checking for cleared timeouts
5. Added new test "always shows all items" to ensure all menu items are visible
6. Kept existing tests for setting active items based on routes and changing active item on click

Impact

• The tab menu will now always remain open, improving discoverability of all menu items
• Sliding animation between menu items is preserved
• User experience is simplified by removing the collapsible behavior

Testing

• Updated existing tests to reflect new always-open behavior
• Added new test to ensure all items are always visible
• Manually verified that the menu remains open and functions as expected

https://github.com/user-attachments/assets/7cd7db3f-00b5-4ef9-848d-519ea0fb041c

Issues

• fixes #2532

---

This PR description was generated with the assistance of an AI language model.

[ogerly]

c, [02.10.24 11:21] Jo sauber für iPhone 15 und 16 muss die Leiste Ca. 25 px tiefer da oben im Telefon noch eine Leiste ist

c, [02.10.24 11:22] [ Photo ]

A, [02.10.24 11:22] Ok

c , [02.10.24 11:23] Insgesamt kann es für mobil auch ca. 25% kleiner

[sebastian2357]

In general I didn't check it in deep yet, but would it be possible to avoid the JS timers completely and only use CSS transitions? These are much easier to maintain.

[ogerly]

https://github.com/user-attachments/assets/9e7c2188-25ae-4b53-9cf4-83bdfc7fc2f6