feat: add Nav Panel with URL-routed section navigation
- Add NavPanel widget for room-level section navigation - Add Control Room feature router with URL routes: - /control-room/containers - /control-room/networks - /control-room/volumes - /control-room/images - Sections: Containers, Networks, Volumes, Images - Navigation updates URL and vice versa (deep-linkable) - Remove redundant Stacks section (handled by filter panel) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
c2b487610c
commit
b189c3518b
@@ -1,5 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:tatlock_ui/features/control_room/router.dart';
|
||||
import 'package:tatlock_ui/routing/app_router.dart';
|
||||
import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
|
||||
|
||||
@@ -52,7 +53,7 @@ class AppScaffold extends StatelessWidget {
|
||||
int _selectedIndex(BuildContext context) {
|
||||
final location = GoRouterState.of(context).matchedLocation;
|
||||
|
||||
if (location.startsWith(AppRoutes.controlRoom)) return 1;
|
||||
if (location.startsWith(ControlRoomRoutes.base)) return 1;
|
||||
if (location.startsWith(AppRoutes.parlor)) return 2;
|
||||
// Settings is no longer in main nav (accessed via Profile dropdown)
|
||||
return 0; // Front Hall
|
||||
@@ -61,7 +62,7 @@ class AppScaffold extends StatelessWidget {
|
||||
void _onNavSelected(BuildContext context, int index) {
|
||||
final route = switch (index) {
|
||||
0 => AppRoutes.frontHall,
|
||||
1 => AppRoutes.controlRoom,
|
||||
1 => ControlRoomRoutes.containers,
|
||||
2 => AppRoutes.parlor,
|
||||
_ => AppRoutes.frontHall,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'panel_header.dart';
|
||||
|
||||
/// A navigation section item in the NavPanel.
|
||||
class NavSection {
|
||||
const NavSection({
|
||||
required this.id,
|
||||
required this.label,
|
||||
required this.icon,
|
||||
this.badge,
|
||||
});
|
||||
|
||||
/// Unique identifier for routing.
|
||||
final String id;
|
||||
|
||||
/// Display label.
|
||||
final String label;
|
||||
|
||||
/// Section icon.
|
||||
final IconData icon;
|
||||
|
||||
/// Optional badge (e.g., item count).
|
||||
final String? badge;
|
||||
}
|
||||
|
||||
/// Left-side navigation panel for room-level section navigation.
|
||||
///
|
||||
/// Shows a list of sections within the current room (e.g., Containers, Stacks,
|
||||
/// Networks for Control Room). Header content is docked to bottom to
|
||||
/// accommodate the logo bulge overlay.
|
||||
///
|
||||
/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
|
||||
class NavPanel extends StatelessWidget {
|
||||
const NavPanel({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.icon,
|
||||
required this.sections,
|
||||
required this.selectedId,
|
||||
required this.onSectionSelected,
|
||||
this.width = 280,
|
||||
this.trailing,
|
||||
});
|
||||
|
||||
/// Panel title displayed in header.
|
||||
final String title;
|
||||
|
||||
/// Leading icon for the header.
|
||||
final IconData icon;
|
||||
|
||||
/// List of navigation sections.
|
||||
final List<NavSection> sections;
|
||||
|
||||
/// Currently selected section ID.
|
||||
final String selectedId;
|
||||
|
||||
/// Callback when a section is tapped.
|
||||
final ValueChanged<String> onSectionSelected;
|
||||
|
||||
/// Panel width (default 280px per UI_LAYOUT.md spec).
|
||||
final double width;
|
||||
|
||||
/// Optional trailing widget below sections (e.g., external links).
|
||||
final Widget? trailing;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return SizedBox(
|
||||
width: width,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
PanelHeader(
|
||||
title: title,
|
||||
icon: icon,
|
||||
dockToBottom: true, // Left-side panel
|
||||
),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: sections.length,
|
||||
itemBuilder: (context, index) {
|
||||
final section = sections[index];
|
||||
final isSelected = section.id == selectedId;
|
||||
|
||||
return _NavTile(
|
||||
section: section,
|
||||
isSelected: isSelected,
|
||||
onTap: () => onSectionSelected(section.id),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
if (trailing != null) ...[
|
||||
Divider(height: 1, color: colorScheme.outlineVariant),
|
||||
trailing!,
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _NavTile extends StatelessWidget {
|
||||
const _NavTile({
|
||||
required this.section,
|
||||
required this.isSelected,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final NavSection section;
|
||||
final bool isSelected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.4)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
section.icon,
|
||||
size: 20,
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
section.label,
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurface,
|
||||
fontWeight: isSelected ? FontWeight.w600 : null,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (section.badge != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? colorScheme.primary.withValues(alpha: 0.2)
|
||||
: colorScheme.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
section.badge!,
|
||||
style: textTheme.labelSmall?.copyWith(
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user