skills.rest
qashsolutions
qashsolutionsCOMMUNITY
Explore all skills by this author →
GitHub

skill-more-menu

Create a responsive More menu with mobile sheet and desktop panel.

1|Updated Jun 18, 2025
Search Tags:#frontend#react#navigation#drawer#sheet#more-menu
One-click install
npx skills add https://github.com/qashsolutions/myhealthguide --skill skill-more-menu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-more-menu
Source: https://github.com/qashsolutions/myhealthguide/tree/main/.claude/skills/skill-more-menu
Command: npx skills add https://github.com/qashsolutions/myhealthguide --skill skill-more-menu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill creates a unified More menu (drawer on mobile, panel on desktop) to house all secondary navigation and settings that are hidden from the main view, keeping the primary workspace uncluttered.

Core Features & Use Cases

  • Unified access to all features: Houses all existing routes and features behind the More menu, preserving role-based visibility.
  • Responsive behavior: Mobile uses a full-screen sheet; desktop uses a left-side panel.
  • Reuses existing components: Utilizes the existing Sheet/Drawer, Sidebar references, and icons to maintain consistency.
  • Role-based access: Keeps admin vs family roles separation and visibility controls.
  • Navigation continuity: Closes on route changes, supports backdrops, and can be triggered from both BottomNav and IconRail.

Quick Start

Render the MoreMenu component and wire it to the BottomNav and IconRail triggers in your dashboard layout.

Frequently Asked Questions about skill-more-menu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I unify hidden features into a single More menu in a React dashboard?▼

To unify hidden features into a single More menu, implement a drawer component that houses secondary navigation routes, keeping the primary workspace uncluttered while preserving role-based visibility controls.

What is the best way to handle responsive navigation between mobile and desktop layouts?▼

Responsive navigation adapts by rendering a full-screen sheet on mobile devices and a left-side panel on desktop, utilizing existing sheet components to maintain UI consistency across different screen sizes.

Can I maintain role-based access control inside a hidden navigation drawer?▼

Yes, role-based access control can be maintained inside a hidden navigation drawer by preserving existing role separation and visibility controls for admin versus family roles within the unified menu.

How do I trigger a secondary navigation panel from both BottomNav and IconRail components?▼

You trigger a secondary navigation panel by wiring the MoreMenu component to both BottomNav and IconRail triggers in your dashboard layout, supporting backdrop interactions and closing upon route changes.

Does the unified More menu approach work for dashboards with many routes and multi-role access?▼

Yes, the unified More menu approach works for dashboards with many routes and multi-role access by consolidating secondary settings and features into a single panel without cluttering the main view.

When should I use a full-screen sheet versus a left-side panel for dashboard navigation?▼

Use a full-screen sheet for mobile dashboard navigation and a left-side panel for desktop layouts, reusing existing Sheet and Drawer references to ensure the interface adapts seamlessly across devices.

Related Skills

Explore More Software Engineering Skills→
JKKN-InstitutionsJKKN-Institutions

mobile-bottom-navbar

Implement a mobile bottom navigation pattern for Next.js 14+ apps.

Official
Intermediate
syncfusionsyncfusion
4

syncfusion-blazor-media-query

Detects screen size changes and binds ActiveBreakPoint for responsive Blazor UI.

Official
Intermediate
qashsolutionsqashsolutions
1

skill-layout-system

Replace a 256px sidebar with responsive bottom navigation and icon rail in Next.js dashboards.

Community
Advanced
heidsoftheidsoft
57

route-and-menu-config

Register ITSM module routes and menus across router.go, Sidebar, and seed_data.sql.

Community
Intermediate