minimize toggle desktop menu options

lib/pages_desktop_specific/home/desktop_home_view.dart

@@ -4,8 +4,6 @@ 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/utilities/cfcolors.dart';
 
-final homeContent = Provider<Widget>((ref) => const MyStackView());
-
 class DesktopHomeView extends ConsumerStatefulWidget {
   const DesktopHomeView({Key? key}) : super(key: key);
 
@@ -16,14 +14,50 @@ class DesktopHomeView extends ConsumerStatefulWidget {
 }
 
 class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
+  int currentViewIndex = 0;
+  final List<Widget> contentViews = [
+    const MyStackView(
+      key: Key("myStackViewKey"),
+    ),
+    Container(
+      color: Colors.green,
+    ),
+    Container(
+      color: Colors.red,
+    ),
+    Container(
+      color: Colors.orange,
+    ),
+    Container(
+      color: Colors.yellow,
+    ),
+    Container(
+      color: Colors.blue,
+    ),
+    Container(
+      color: Colors.pink,
+    ),
+    Container(
+      color: Colors.purple,
+    ),
+  ];
+
+  void onMenuSelectionChanged(int newIndex) {
+    setState(() {
+      currentViewIndex = newIndex;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: CFColors.almostWhite,
+      color: CFColors.background,
       child: Row(
         children: [
-          const DesktopMenu(),
+          DesktopMenu(
-          Expanded(child: ref.watch(homeContent)),
+            onSelectionChanged: onMenuSelectionChanged,
+          ),
+          Expanded(child: contentViews[currentViewIndex]),
         ],
       ),
     );

lib/pages_desktop_specific/home/desktop_menu.dart

@@ -1,25 +1,41 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/cfcolors.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 
-class DesktopMenu extends StatefulWidget {
+class DesktopMenu extends ConsumerStatefulWidget {
-  const DesktopMenu({Key? key}) : super(key: key);
+  const DesktopMenu({
+    Key? key,
+    required this.onSelectionChanged,
+  }) : super(key: key);
+
+  final void Function(int)? onSelectionChanged;
 
   @override
-  State<DesktopMenu> createState() => _DesktopMenuState();
+  ConsumerState<DesktopMenu> createState() => _DesktopMenuState();
 }
 
-class _DesktopMenuState extends State<DesktopMenu> {
+class _DesktopMenuState extends ConsumerState<DesktopMenu> {
-  double _width = 225;
+  static const expandedWidth = 225.0;
+  static const minimizedWidth = 72.0;
+
+  double _width = expandedWidth;
   int selectedMenuItem = 0;
 
   void updateSelectedMenuItem(int index) {
     setState(() {
       selectedMenuItem = index;
     });
+    widget.onSelectionChanged?.call(index);
+  }
+
+  void toggleMinimize() {
+    setState(() {
+      _width = _width == expandedWidth ? minimizedWidth : expandedWidth;
+    });
   }
 
   @override
@@ -31,12 +47,12 @@ class _DesktopMenuState extends State<DesktopMenu> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const SizedBox(
+            SizedBox(
-              height: 22,
+              height: _width == expandedWidth ? 22 : 25,
             ),
             SizedBox(
-              width: 70,
+              width: _width == expandedWidth ? 70 : 32,
-              height: 70,
+              height: _width == expandedWidth ? 70 : 32,
               child: SvgPicture.asset(
                 Assets.svg.stackIcon,
               ),
@@ -45,7 +61,7 @@ class _DesktopMenuState extends State<DesktopMenu> {
               height: 10,
             ),
             Text(
-              "Stack Wallet",
+              _width == expandedWidth ? "Stack Wallet" : "",
               style: STextStyles.desktopH2.copyWith(
                 fontSize: 18,
                 height: 23.4 / 18,
@@ -55,7 +71,9 @@ class _DesktopMenuState extends State<DesktopMenu> {
               height: 60,
             ),
             SizedBox(
-              width: _width - 32, // 16 padding on either side
+              width: _width == expandedWidth
+                  ? _width - 32 // 16 padding on either side
+                  : _width - 16, // 8 padding on either side
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
@@ -69,6 +87,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 0,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -80,6 +102,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 1,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -91,6 +117,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 2,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -102,6 +132,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 3,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -113,6 +147,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 4,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -124,6 +162,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 5,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -135,6 +177,10 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 6,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
+                  ),
+                  const SizedBox(
+                    height: 2,
                   ),
                   DesktopMenuItem(
                     icon: SvgPicture.asset(
@@ -146,10 +192,27 @@ class _DesktopMenuState extends State<DesktopMenu> {
                     value: 7,
                     group: selectedMenuItem,
                     onChanged: updateSelectedMenuItem,
+                    iconOnly: _width == minimizedWidth,
                   ),
                 ],
               ),
             ),
+            const Spacer(),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                const Spacer(),
+                IconButton(
+                  splashRadius: 18,
+                  onPressed: toggleMinimize,
+                  icon: SvgPicture.asset(
+                    Assets.svg.minimize,
+                    height: 12,
+                    width: 12,
+                  ),
+                ),
+              ],
+            )
           ],
         ),
       ),

lib/pages_desktop_specific/home/desktop_menu_item.dart

@@ -10,6 +10,7 @@ class DesktopMenuItem<T> extends StatelessWidget {
     required this.value,
     required this.group,
     required this.onChanged,
+    required this.iconOnly,
   }) : super(key: key);
 
   final Widget icon;
@@ -17,6 +18,7 @@ class DesktopMenuItem<T> extends StatelessWidget {
   final T value;
   final T group;
   final void Function(T) onChanged;
+  final bool iconOnly;
 
   @override
   Widget build(BuildContext context) {
@@ -28,16 +30,20 @@ class DesktopMenuItem<T> extends StatelessWidget {
         onChanged(value);
       },
       child: Padding(
-        padding: const EdgeInsets.symmetric(
+        padding: EdgeInsets.symmetric(
           vertical: 16,
-          horizontal: 16,
+          horizontal: iconOnly ? 0 : 16,
         ),
         child: Row(
+          mainAxisAlignment:
+              iconOnly ? MainAxisAlignment.center : MainAxisAlignment.start,
           children: [
             icon,
+            if (!iconOnly)
               const SizedBox(
                 width: 12,
               ),
+            if (!iconOnly)
               Text(
                 label,
                 style: value == group

lib/utilities/assets.dart

@@ -110,6 +110,9 @@ class _SVG {
   String get firo => "assets/svg/coin_icons/Firo.svg";
   String get monero => "assets/svg/coin_icons/Monero.svg";
 
+  // desktop specific
+  String get minimize => "assets/svg/minimize.svg";
+
 // TODO provide proper assets
   String get bitcoinTestnet => "assets/svg/coin_icons/Bitcoin.svg";
   String get firoTestnet => "assets/svg/coin_icons/Firo.svg";

pubspec.yaml

@@ -278,6 +278,8 @@ flutter:
     - assets/svg/socials/reddit-alien-brands.svg
     - assets/svg/socials/twitter-brands.svg
     - assets/svg/socials/telegram-brands.svg
+    # desktop specific
+    - assets/svg/minimize.svg
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.