Frontend first draft

frontend/pweb/lib/widgets/sidebar/side_menu.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:pweb/services/amplitude.dart';
+
+import 'package:pweb/widgets/sidebar/destinations.dart';
+
+
+class SideMenuColumn extends StatelessWidget {
+  final ThemeData theme;
+  final String? avatarUrl;
+  final String? userName;
+  final List<PayoutDestination> items;
+  final PayoutDestination selected;
+  final void Function(PayoutDestination) onSelected;
+
+  const SideMenuColumn({
+    super.key,
+    required this.theme,
+    required this.avatarUrl,
+    required this.userName,
+    required this.items,
+    required this.selected,
+    required this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxWidth: 320),
+      child: Material(
+        elevation: 4,
+        borderRadius: BorderRadius.circular(16),
+        color: theme.colorScheme.onSecondary,
+        child: ListView(
+          shrinkWrap: true,
+          padding: const EdgeInsets.symmetric(vertical: 8),
+          children: items.map((item) {
+            final isSelected = item == selected;
+            final backgroundColor = isSelected
+                ? theme.colorScheme.primaryContainer
+                : Colors.transparent;
+
+            return Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+              child: Container(
+                decoration: BoxDecoration(
+                  color: backgroundColor,
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: InkWell(
+                  onTap: () {
+                    onSelected(item);
+                    AmplitudeService.pageOpened(item, uiSource: 'sidebar');
+                  },
+                  borderRadius: BorderRadius.circular(12),
+                  hoverColor: theme.colorScheme.primaryContainer,
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
+                    child: Row(
+                      children: [
+                        Icon(item.icon, color: theme.iconTheme.color, size: 28),
+                        const SizedBox(width: 16),
+                        Text(
+                          item.localizedLabel(context),
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                            fontSize: 16,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+}