Refactor design

lib/consts.dart

@@ -302,6 +302,13 @@ enum ItemMenuOption {
   final String label;
 }
 
+enum SidebarMenuOption {
+  import("Import");
+
+  const SidebarMenuOption(this.label);
+  final String label;
+}
+
 enum HTTPVerb { get, head, post, put, patch, delete }
 
 enum FormDataType { text, file }
@@ -685,7 +692,7 @@ const kRaiseIssue =
 
 const kHintTextUrlCard = "Enter API endpoint like https://$kDefaultUri/";
 const kLabelPlusNew = "+ New";
-const kLabelImport = "Import";
+const kLabelMoreOptions = "More Options";
 const kLabelSend = "Send";
 const kLabelSending = "Sending..";
 const kLabelBusy = "Busy";

lib/screens/common_widgets/sidebar_header.dart

@@ -2,13 +2,18 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:apidash/providers/providers.dart';
 import 'package:apidash/extensions/extensions.dart';
+import 'package:apidash/widgets/widgets.dart';
 import 'package:apidash/consts.dart';
 import 'sidebar_save_button.dart';
 
 class SidebarHeader extends ConsumerWidget {
-  const SidebarHeader({super.key, this.onAddNew, this.onImport});
+  const SidebarHeader({
-  final Function()? onAddNew;
+    super.key,
-  final Function()? onImport;
+    this.onAddNew,
+    this.onImport,
+  });
+  final VoidCallback? onAddNew;
+  final VoidCallback? onImport;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -28,13 +33,14 @@ class SidebarHeader extends ConsumerWidget {
               style: kTextStyleButton,
             ),
           ),
-          kHSpacer12,
+          kHSpacer4,
-          ElevatedButton(
+          SizedBox(
-            onPressed: onImport,
+            width: 24,
-            style: kButtonSidebarStyle,
+            child: SidebarTopMenu(
-            child: const Text(
+              tooltip: kLabelMoreOptions,
-              kLabelImport,
+              onSelected: (option) => switch (option) {
-              style: kTextStyleButton,
+                SidebarMenuOption.import => onImport?.call(),
+              },
             ),
           ),
           context.width <= kMinWindowSize.width

lib/widgets/menu_sidebar_top.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:apidash/consts.dart';
+
+class SidebarTopMenu extends StatelessWidget {
+  const SidebarTopMenu({
+    super.key,
+    this.onSelected,
+    this.child,
+    this.offset = Offset.zero,
+    this.splashRadius = 14,
+    this.tooltip,
+    this.shape,
+  });
+  final Widget? child;
+  final Offset offset;
+  final double splashRadius;
+  final String? tooltip;
+  final ShapeBorder? shape;
+
+  final Function(SidebarMenuOption)? onSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return PopupMenuButton<SidebarMenuOption>(
+      tooltip: tooltip,
+      padding: EdgeInsets.zero,
+      splashRadius: splashRadius,
+      icon: const Icon(Icons.more_vert),
+      iconSize: 14,
+      offset: offset,
+      onSelected: onSelected,
+      shape: shape,
+      itemBuilder: (BuildContext context) => SidebarMenuOption.values
+          .map<PopupMenuEntry<SidebarMenuOption>>(
+            (e) => PopupMenuItem<SidebarMenuOption>(
+              value: e,
+              child: Text(e.label),
+            ),
+          )
+          .toList(),
+      child: child,
+    );
+  }
+}

lib/widgets/widgets.dart

@@ -31,6 +31,7 @@ export 'intro_message.dart';
 export 'json_previewer.dart';
 export 'markdown.dart';
 export 'menu_item_card.dart';
+export 'menu_sidebar_top.dart';
 export 'overlay_widget.dart';
 export 'popup_menu_codegen.dart';
 export 'popup_menu_env.dart';