Scrollable Navigation Rail

lib/widgets/app_shell.dart

@@ -126,7 +126,7 @@ class AppScaffold extends ConsumerWidget {
   }
 }
 
-class AppNavigationRail extends StatelessWidget {
+class AppNavigationRail extends StatefulWidget {
   const AppNavigationRail({
     super.key,
     required this.items,
@@ -142,60 +142,153 @@ class AppNavigationRail extends StatelessWidget {
   final String displayName;
   final VoidCallback onLogout;
 
+  @override
+  State<AppNavigationRail> createState() => _AppNavigationRailState();
+}
+
+class _AppNavigationRailState extends State<AppNavigationRail> {
+  final _scrollController = ScrollController();
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final currentIndex = _currentIndex(location, items);
     final cs = Theme.of(context).colorScheme;
+    final currentIndex = _currentIndex(widget.location, widget.items);
 
     // M3 Expressive: tonal surface container instead of a hard border divider.
+    // Custom scrollable layout replaces NavigationRail so items are reachable
+    // on small viewport heights (web, small laptop screens).
     return Container(
       decoration: BoxDecoration(color: cs.surfaceContainerLow),
-      child: NavigationRail(
-        backgroundColor: Colors.transparent,
-        extended: extended,
-        selectedIndex: currentIndex,
-        onDestinationSelected: (value) {
-          items[value].onTap(context, onLogout: onLogout);
-        },
-        leading: Padding(
-          padding: EdgeInsets.symmetric(
-            vertical: extended ? 12 : 8,
-            horizontal: extended ? 16 : 0,
-          ),
-          child: Center(
-            child: Image.asset(
-              'assets/tasq_ico.png',
-              width: extended ? 48 : 40,
-              height: extended ? 48 : 40,
+      child: Column(
+        children: [
+          Padding(
+            padding: EdgeInsets.symmetric(
+              vertical: widget.extended ? 12 : 8,
+              horizontal: widget.extended ? 16 : 0,
             ),
-          ),
-        ),
-        trailing: Expanded(
-          child: Align(
-            alignment: Alignment.bottomCenter,
-            child: Padding(
-              padding: const EdgeInsets.only(bottom: 16),
-              child: IconButton(
-                tooltip: 'Sign out',
-                onPressed: onLogout,
-                icon: const Icon(Icons.logout),
+            child: Center(
+              child: Image.asset(
+                'assets/tasq_ico.png',
+                width: widget.extended ? 48 : 40,
+                height: widget.extended ? 48 : 40,
               ),
             ),
           ),
-        ),
-        destinations: [
-          for (final item in items)
-            NavigationRailDestination(
-              icon: Icon(item.icon),
-              selectedIcon: Icon(item.selectedIcon ?? item.icon),
-              label: Text(item.label),
+          Expanded(
+            child: Scrollbar(
+              controller: _scrollController,
+              child: SingleChildScrollView(
+                controller: _scrollController,
+                child: Column(
+                  children: [
+                    for (int i = 0; i < widget.items.length; i++)
+                      _NavRailItem(
+                        item: widget.items[i],
+                        selected: i == currentIndex,
+                        extended: widget.extended,
+                        onTap: () => widget.items[i]
+                            .onTap(context, onLogout: widget.onLogout),
+                      ),
+                  ],
+                ),
+              ),
             ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(bottom: 16),
+            child: IconButton(
+              tooltip: 'Sign out',
+              onPressed: widget.onLogout,
+              icon: const Icon(Icons.logout),
+            ),
+          ),
         ],
       ),
     );
   }
 }
 
+class _NavRailItem extends StatelessWidget {
+  const _NavRailItem({
+    required this.item,
+    required this.selected,
+    required this.extended,
+    required this.onTap,
+  });
+
+  final NavItem item;
+  final bool selected;
+  final bool extended;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    final icon = Icon(
+      selected ? (item.selectedIcon ?? item.icon) : item.icon,
+      size: 24,
+      color: selected ? cs.onSecondaryContainer : cs.onSurfaceVariant,
+    );
+
+    final indicator = AnimatedContainer(
+      duration: const Duration(milliseconds: 200),
+      width: 56,
+      height: 32,
+      decoration: BoxDecoration(
+        color: selected ? cs.secondaryContainer : Colors.transparent,
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Center(child: icon),
+    );
+
+    final Widget content = extended
+        ? Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12),
+            child: Row(
+              children: [
+                indicator,
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Text(
+                    item.label,
+                    style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                          color: selected
+                              ? cs.onSecondaryContainer
+                              : cs.onSurfaceVariant,
+                          fontWeight: selected
+                              ? FontWeight.w600
+                              : FontWeight.normal,
+                        ),
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+              ],
+            ),
+          )
+        : Center(child: indicator);
+
+    final tile = InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(8),
+      child: SizedBox(
+        height: 56,
+        width: double.infinity,
+        child: content,
+      ),
+    );
+
+    if (extended) return tile;
+    return Tooltip(message: item.label, child: tile);
+  }
+}
+
 class AppBottomNav extends StatelessWidget {
   const AppBottomNav({
     super.key,