mobile-bottom-navbarlisted

# Mobile Bottom Navbar ## Overview This skill provides a complete, production-ready mobile bottom navigation system for Next.js 15+ applications with App Router. The implementation features: - **3-Column Icon Grid Layouts** for submenus and More menu - **Accordion-Based More Menu** with collapsible group sections - **Submenu Dropdown** appearing above the navbar - Role-based filtering and smooth animations **📸 Visual Reference:** See `references/screenshots/` for actual UI examples from MyJKKN application. ### Key Features - **Icon Grid Submenus**: 3-column grid layout with icons + labels (like iOS app grid) - **Accordion More Menu**: Collapsible sections showing all overflow menu groups - **Always Visible Design**: Full navbar always shown on mobile (no separate minimized state) - **Role-Based Filtering**: Dynamic navigation based on user permissions - **Smart Active Detection**: Automatically highlights current page - **Submenu Expansion**: Click nav items to expand submenus with backdrop overlay - **Overflow Handling**: "More" menu for navigation groups beyond primary 4 items - **State Persistence**: Zustand with localStorage for cross-session state - **Hydration Safety**: Prevents flash of incorrect state on page load - **Smooth Animations**: Spring-based animations via Framer Motion - **iOS Safe Area Support**: Respects notch and home indicator spacing - **TypeScript First**: Fully typed for excellent DX - **Customizable**: Colors, animations, layouts, and icons #