feat(nav): redesign mobile bottom nav with 5-item FAB layout

[alrescha79-cmd]

feat(nav): redesign mobile bottom nav with 5-item FAB layout

• Replaced 7-item grid with a cleaner 5-item layout
• Primary tabs: Overview, Proxies, Rules, Connections
• Center FAB "+" button opens a slide-up popup for secondary items:
  Data Usage, Logs, and Config
• FAB animates between + and X icons with spin transition
• Added indicator dot on FAB when a secondary page is active
• Removed prop dependency: MobileBottomNav is now self-contained
• Updated Sidebar.vue to remove the now-unused :nav-items prop

Before:

After:

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@6550ec2). Learn more about missing BASE report.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1899   +/-   ##
=======================================
  Coverage        ?   15.02%           
=======================================
  Files           ?       21           
  Lines           ?     1498           
  Branches        ?      238           
=======================================
  Hits            ?      225           
  Misses          ?     1269           
  Partials        ?        4           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[kunish]

Code Review

🔴 Main Issue: Popup should appear above the FAB X button

The secondary popup panel is currently positioned with:

<div class="fixed inset-x-0 bottom-[4.5rem] z-50 mx-auto w-max lg:hidden">

But the FAB button itself has a -top-3 offset (raises it 0.75rem above the nav bar):

<button class="group relative -top-3 flex h-14 w-14 ...">

This causes the popup panel to not sit directly above the X button. Specifically:

• Nav bar height h-16 (4rem) + mb-2 (0.5rem) = 4.5rem from the bottom
• But the FAB protrudes -top-3 (0.75rem) above it, so its top is at ~5.25rem

Suggested fix: Change bottom-[4.5rem] to bottom-[5.5rem], or better yet, wrap the FAB + popup in a single relative container so the popup is positioned relative to the FAB button itself — avoiding magic pixel values.

---

Other findings:

1. Duplicated template code — The left 2 items (primaryItems.slice(0, 2)) and right 2 items (primaryItems.slice(2, 4)) share nearly identical template markup. Consider extracting a shared template or using a single v-for loop with an insertion point for the FAB in the middle.

2. Duplicated navItems definition — Sidebar.vue already defines the same nav items (same icons and i18n keys). This PR re-defines them inside MobileBottomNav.vue, creating a maintenance burden — if a nav item changes, it needs to be updated in two places. Consider extracting a shared useNavItems() composable as a single source of truth.

3. more i18n key change — The PR capitalizes "more" → "More" in en.json. Please verify no other component depends on the lowercase form.

4. Accessibility — The FAB button has aria-label="More menu" which is good, but when the popup is open, consider adding aria-expanded="true" to communicate state to screen readers.

5. Overall — The FAB concept and animation work look nice! The main thing to fix is the popup positioning so it sits right above the X button.