desktop settings

lib/pages_desktop_specific/home/desktop_home_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
+import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
 import 'package:stackwallet/route_generator.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
@@ -30,8 +31,9 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
     Container(
       color: Colors.orange,
     ),
-    Container(
+    const Navigator(
-      color: Colors.yellow,
+      onGenerateRoute: RouteGenerator.generateRoute,
+      initialRoute: SettingsMenu.routeName,
     ),
     Container(
       color: Colors.blue,

lib/pages_desktop_specific/home/desktop_settings_view.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+
+class DesktopSettingsView extends ConsumerStatefulWidget {
+  const DesktopSettingsView({Key? key}) : super(key: key);
+
+  static const String routeName = "/desktopSettings";
+
+  @override
+  ConsumerState<DesktopSettingsView> createState() =>
+      _DesktopSettingsViewState();
+}
+
+class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> {
+  int currentViewIndex = 0;
+  final List<Widget> contentViews = [
+    Container(
+      color: Colors.lime,
+    ), //b+r
+    Container(
+      color: Colors.green,
+    ), //security
+    Container(
+      color: Colors.red,
+    ), //currency
+    Container(
+      color: Colors.orange,
+    ), //language
+    Container(
+      color: Colors.yellow,
+    ), //nodes
+    Container(
+      color: Colors.blue,
+    ), //syncing prefs
+    Container(
+      color: Colors.pink,
+    ), //appearance
+    Container(
+      color: Colors.purple,
+    ), //advanced
+  ];
+
+  void onMenuSelectionChanged(int newIndex) {
+    setState(() {
+      currentViewIndex = newIndex;
+    });
+  }
+
+  // will have a row with two items: SettingsMenu and settings contentxd
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Theme.of(context).extension<StackColors>()!.background,
+      child: Row(
+        children: [
+          SettingsMenu(
+            onSelectionChanged: onMenuSelectionChanged,
+          ),
+          Expanded(
+            child: contentViews[currentViewIndex],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages_desktop_specific/home/settings_menu/settings_menu.dart

@@ -0,0 +1,189 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:stackwallet/pages_desktop_specific/home/settings_menu_item.dart';
+import 'package:stackwallet/utilities/assets.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+
+class SettingsMenu extends ConsumerStatefulWidget {
+  const SettingsMenu({
+    Key? key,
+    required this.onSelectionChanged,
+  }) : super(key: key);
+
+  final void Function(int)?
+      onSelectionChanged; //is a function that takes in an int and returns void/.;
+
+  static const String routeName = "/settingsMenu";
+
+  @override
+  ConsumerState<ConsumerStatefulWidget> createState() => _SettingsMenuState();
+}
+
+class _SettingsMenuState extends ConsumerState<SettingsMenu> {
+  int selectedMenuItem = 0;
+
+  void updateSelectedMenuItem(int index) {
+    setState(() {
+      selectedMenuItem = index;
+    });
+    widget.onSelectionChanged?.call(index);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("BUILD: $runtimeType");
+
+    return Material(
+      color: Theme.of(context).extension<StackColors>()!.background,
+      child: SizedBox(
+        width: 300,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(24.0, 10.0, 0, 0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                height: 20,
+                // width: 300,
+              ),
+              Text(
+                "Settings",
+                style: STextStyles.desktopH3(context).copyWith(
+                  fontSize: 24,
+                ),
+              ),
+              Row(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.fromLTRB(
+                      3.0,
+                      30.0,
+                      55.0,
+                      0,
+                    ),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Backup and restore",
+                          value: 0,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Security",
+                          value: 1,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Currency",
+                          value: 2,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Language",
+                          value: 3,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Nodes",
+                          value: 4,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Syncing preferences",
+                          value: 5,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Appearance",
+                          value: 6,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Advanced",
+                          value: 7,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages_desktop_specific/home/settings_menu_item.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+
+class SettingsMenuItem<T> extends StatelessWidget {
+  const SettingsMenuItem({
+    Key? key,
+    required this.icon,
+    required this.label,
+    required this.value,
+    required this.group,
+    required this.onChanged,
+  }) : super(key: key);
+
+  final Widget icon;
+  final String label;
+  final T value;
+  final T group;
+  final void Function(T) onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      //if val == group, then button is selected, otherwise unselected
+      style: value == group
+          ? Theme.of(context)
+              .extension<StackColors>()!
+              .getDesktopSettingsButtonColor(context)
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .getDesktopSettingsButtonColor(context),
+      onPressed: () {
+        onChanged(value);
+      },
+      child: Padding(
+        padding: EdgeInsets.symmetric(
+          vertical: 16,
+          horizontal: 16,
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            icon,
+            const SizedBox(
+              width: 12,
+            ),
+            Text(
+              label,
+              style: value == group //checks if option is selected
+                  ? STextStyles.settingsMenuItemSelected(context)
+                  : STextStyles.settingsMenuItem(context),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages_desktop_specific/home/settings_view/settings_view.dart

@@ -1,20 +0,0 @@
-import 'package:flutter/cupertino.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-class SettingsView extends ConsumerStatefulWidget {
-  const SettingsView({Key? key}) : super(key: key);
-
-  static const String routeName = "/settingsView";
-
-  @override
-  ConsumerState<SettingsView> createState() => _SettingsView();
-}
-
-class _SettingsView extends ConsumerState<SettingsView> {
-  @override
-  Widget build(BuildContext context) {
-    debugPrint("BUILD: $runtimeType");
-    // TODO: implement build
-    throw UnimplementedError();
-  }
-}

lib/route_generator.dart

@@ -84,7 +84,9 @@ import 'package:stackwallet/pages/wallet_view/wallet_view.dart';
 import 'package:stackwallet/pages/wallets_view/wallets_view.dart';
 import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart';
+import 'package:stackwallet/pages_desktop_specific/home/desktop_settings_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
+import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
 import 'package:stackwallet/services/coins/manager.dart';
 import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart';
 import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
@@ -948,12 +950,26 @@ class RouteGenerator {
             builder: (_) => const DesktopHomeView(),
             settings: RouteSettings(name: settings.name));
 
+      case DesktopSettingsView.routeName:
+        return getRoute(
+            shouldUseMaterialRoute: useMaterialPageRoute,
+            builder: (_) => const DesktopSettingsView(),
+            settings: RouteSettings(name: settings.name));
+
       case MyStackView.routeName:
         return getRoute(
             shouldUseMaterialRoute: useMaterialPageRoute,
             builder: (_) => const MyStackView(),
             settings: RouteSettings(name: settings.name));
 
+      case SettingsMenu.routeName:
+        return getRoute(
+            shouldUseMaterialRoute: useMaterialPageRoute,
+            builder: (_) => SettingsMenu(
+                  onSelectionChanged: (int) {},
+                ),
+            settings: RouteSettings(name: settings.name));
+
       // == End of desktop specific routes =====================================
 
       default:

lib/utilities/text_styles.dart

@@ -793,6 +793,44 @@ class STextStyles {
     }
   }
 
+  static TextStyle settingsMenuItem(BuildContext context) {
+    switch (_theme(context).themeType) {
+      case ThemeType.light:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark.withOpacity(0.5),
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+      case ThemeType.dark:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark.withOpacity(0.5),
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+    }
+  }
+
+  static TextStyle settingsMenuItemSelected(BuildContext context) {
+    switch (_theme(context).themeType) {
+      case ThemeType.light:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark,
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+      case ThemeType.dark:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark,
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+    }
+  }
+
   static TextStyle stepIndicator(BuildContext context) {
     switch (_theme(context).themeType) {
       case ThemeType.light:

lib/utilities/theme/stack_colors.dart

@@ -1501,4 +1501,14 @@ class StackColors extends ThemeExtension<StackColors> {
               textFieldDefaultBG,
             ),
           );
+
+  ButtonStyle? getDesktopSettingsButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              background,
+            ),
+            overlayColor: MaterialStateProperty.all<Color>(
+              Colors.transparent,
+            ),
+          );
 }