fix: top menu on mobile view

[Nandos0804]

Enhance the mobile view by implementing a top menu that can be toggled open and closed.

This includes state management for the menu's visibility and path handling for navigation.

Related issue #431

[hlolli]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Walkthrough

The changes refactor menu and drawer UI state management from component-local to Redux store. A new menu-ui reducer slice manages header drawer, mobile top menu, and mobile navigation path state. The header component now sources drawer state from Redux and dispatches open/close actions. The menu-bar component is refactored to support separate desktop dropdown and mobile stacked menu behaviors, with mobile path navigation via push/pop/reset actions. Keyboard handlers for Escape key and focus management were added. Accessibility attributes, styling updates for mobile UI, and type constraints on hotkeys complete the changes.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change—implementing mobile view improvements with a top menu that can be toggled, which is the primary focus across multiple file changes.
Description check	✅ Passed	The description is relevant and aligns with the changeset, explaining the implementation of a toggleable top menu with state management and path handling for mobile view navigation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.

[coderabbitai]

🧹 Nitpick comments (1)

src/components/menu-ui/reducer.ts (1)

72-77: Type assertion on action.index lacks runtime validation.

The cast action.index as number assumes the payload is valid. While the action creator enforces typing, consider adding a guard for defensive programming:

🛡️ Optional defensive check

 case PUSH_MOBILE_TOP_MENU_PATH: {
-    const index = action.index as number;
+    const index = action.index;
+    if (typeof index !== "number") {
+        return state;
+    }
     return {
         ...state,
         mobileTopMenuPath: [...state.mobileTopMenuPath, index]
     };
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/menu-ui/reducer.ts` around lines 72 - 77, The reducer case for
PUSH_MOBILE_TOP_MENU_PATH casts action.index as a number without runtime
validation; update the PUSH_MOBILE_TOP_MENU_PATH branch to validate action.index
(e.g., check typeof index === "number" and Number.isInteger(index), and
optionally bounds-check against state.mobileTopMenuPath length) and only append
when valid—otherwise return the existing state or handle the error path;
reference the PUSH_MOBILE_TOP_MENU_PATH case and the mobileTopMenuPath
state/mutation when implementing the guard.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/menu-ui/reducer.ts`:
- Around line 72-77: The reducer case for PUSH_MOBILE_TOP_MENU_PATH casts
action.index as a number without runtime validation; update the
PUSH_MOBILE_TOP_MENU_PATH branch to validate action.index (e.g., check typeof
index === "number" and Number.isInteger(index), and optionally bounds-check
against state.mobileTopMenuPath length) and only append when valid—otherwise
return the existing state or handle the error path; reference the
PUSH_MOBILE_TOP_MENU_PATH case and the mobileTopMenuPath state/mutation when
implementing the guard.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f0383549-feae-4ecc-b354-c68887536c03

📥 Commits

Reviewing files that changed from the base of the PR and between 645880b and eb641d8.

📒 Files selected for processing (9)

• src/components/header/header.tsx
• src/components/menu-bar/menu-bar.tsx
• src/components/menu-bar/styles.ts
• src/components/menu-bar/types.ts
• src/components/menu-ui/actions.ts
• src/components/menu-ui/reducer.ts
• src/components/menu-ui/selectors.ts
• src/components/menu-ui/types.ts
• src/store/root-reducer.tsx