A professional, fully-customizable sidebar (drawer) that adapts seamlessly from desktop/tablet left-rail to mobile modal drawer. It features smooth open/close animations, active-item highlighting, icons, badges, nested groups, dividers, and a persistent profile/footer area. Route-aware and data-driven, it syncs selection with navigation (GoRouter/FlutterFlow actions), remembers state (pinned/collapsed width), supports swipe-to-open on mobile, hover on desktop, RTL, and light/dark themes. Built with accessibility in mind (focus order, ARIA semantics, keyboard shortcuts).

Functionality

• Collapsible states: mini-rail, expanded rail, full drawer; pin/unpin per breakpoint.

• Nested sections with headers, dividers, badges/counters, tooltips, and “active” styling.

• Gestures & input: edge-swipe open (mobile), ESC to close, ⌘/Ctrl+B toggle, drag-to-resize (desktop).

• Route sync & deep links; programmatic open/close; role-based item visibility.

• Theme & locale aware (M3 tokens, dark mode, RTL); persisted width & selection.

Use Cases

• Admin dashboards, analytics suites, internal tools.

• E-commerce back-office (orders/products/customers).

• SaaS apps with multi-module navigation (projects, tasks, docs).

• CMS/LMS portals and knowledge bases.

• PWAs targeting web + mobile with a unified nav pattern.

Keywords
Sidebar, Drawer, Navigation Rail, Collapsible Menu, Responsive UI, Admin Dashboard, FlutterFlow, Flutter, GoRouter, Badges, Nested List, Swipe Gesture, Keyboard Shortcuts, RTL, Dark Mode, Accessibility, Material 3, Animation, Data-driven Navigation.