diff --git a/assets/icons/account_setting.svg b/assets/icons/account_setting.svg
new file mode 100644
index 00000000..0b27b849
--- /dev/null
+++ b/assets/icons/account_setting.svg
@@ -0,0 +1,6 @@
+
diff --git a/assets/icons/logo-grey.svg b/assets/icons/logo-grey.svg
new file mode 100644
index 00000000..4f835d2d
--- /dev/null
+++ b/assets/icons/logo-grey.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/icons/settings.svg b/assets/icons/settings.svg
new file mode 100644
index 00000000..c626454d
--- /dev/null
+++ b/assets/icons/settings.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/icons/sign_out.svg b/assets/icons/sign_out.svg
new file mode 100644
index 00000000..5980d13e
--- /dev/null
+++ b/assets/icons/sign_out.svg
@@ -0,0 +1,3 @@
+
diff --git a/lib/utils/constants/assets.dart b/lib/utils/constants/assets.dart
index 4ac64bb6..14f7a15e 100644
--- a/lib/utils/constants/assets.dart
+++ b/lib/utils/constants/assets.dart
@@ -168,4 +168,16 @@ class Assets {
//assets/icons/2gang.svg
static const String twoGang = 'assets/icons/2gang.svg';
+
+ //assets/icons/account_setting.svg
+ static const String accountSetting = 'assets/icons/account_setting.svg';
+
+ //assets/icons/settings.svg
+ static const String settings = 'assets/icons/settings.svg';
+
+ //assets/icons/sign_out.svg
+ static const String signOut = 'assets/icons/sign_out.svg';
+
+ //assets/icons/logo_grey.svg
+ static const String logoGrey = 'assets/icons/logo-grey.svg';
}
diff --git a/lib/utils/user_drop_down_menu.dart b/lib/utils/user_drop_down_menu.dart
new file mode 100644
index 00000000..dab01fd8
--- /dev/null
+++ b/lib/utils/user_drop_down_menu.dart
@@ -0,0 +1,224 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:go_router/go_router.dart';
+import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
+import 'package:syncrow_web/pages/auth/model/user_model.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/constants/routes_const.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class UserDropdownMenu extends StatefulWidget {
+ const UserDropdownMenu({super.key, required this.user});
+ final UserModel? user;
+
+ @override
+ _UserDropdownMenuState createState() => _UserDropdownMenuState();
+}
+
+class _UserDropdownMenuState extends State {
+ bool _isDropdownOpen = false;
+
+ void _toggleDropdown() {
+ setState(() {
+ _isDropdownOpen = !_isDropdownOpen;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ GestureDetector(
+ onTap: () async {
+ _toggleDropdown();
+ await _showPopupMenu(context);
+ setState(() {
+ _isDropdownOpen = false;
+ });
+ },
+ child: Transform.rotate(
+ angle: _isDropdownOpen ? -1.5708 : 1.5708,
+ child: const Icon(
+ Icons.arrow_forward_ios,
+ color: Colors.white,
+ size: 16,
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+
+ Future _showPopupMenu(BuildContext context) async {
+ final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
+ final RelativeRect position = RelativeRect.fromRect(
+ Rect.fromLTRB(
+ overlay.size.width,
+ 75,
+ 0,
+ overlay.size.height,
+ ),
+ Offset.zero & overlay.size,
+ );
+
+ await showMenu(
+ context: context,
+ position: position,
+ color: ColorsManager.whiteColors,
+ shape: const RoundedRectangleBorder(
+ borderRadius: BorderRadius.only(
+ bottomRight: Radius.circular(10),
+ bottomLeft: Radius.circular(10),
+ ),
+ ),
+ items: [
+ PopupMenuItem(
+ onTap: () {},
+ child: ListTile(
+ leading: SvgPicture.asset(Assets.accountSetting),
+ title: Text(
+ "Account Settings",
+ style: context.textTheme.bodyMedium,
+ ),
+ ),
+ ),
+ PopupMenuItem(
+ onTap: () {},
+ child: ListTile(
+ leading: SvgPicture.asset(Assets.settings),
+ title: Text(
+ "Settings",
+ style: context.textTheme.bodyMedium,
+ ),
+ ),
+ ),
+ PopupMenuItem(
+ onTap: () {
+ showDialog(
+ context: context,
+ builder: (BuildContext context) {
+ final size = MediaQuery.of(context).size;
+ return AlertDialog(
+ alignment: Alignment.center,
+ content: SizedBox(
+ height: 250,
+ width: 500,
+ child: Padding(
+ padding: const EdgeInsets.all(40),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ children: [
+ SvgPicture.asset(
+ Assets.blackLogo,
+ height: 40,
+ width: 200,
+ ),
+ Padding(
+ padding: const EdgeInsets.only(top: 8.0),
+ child: Text(
+ 'Log out of your Syncrow account',
+ style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ color: Colors.black,
+ ),
+ ),
+ ),
+ ListTile(
+ leading: SizedBox.square(
+ dimension: 80,
+ child: CircleAvatar(
+ backgroundColor: ColorsManager.whiteColors,
+ child: SizedBox.square(
+ dimension: 78,
+ child: SvgPicture.asset(
+ Assets.logoGrey,
+ fit: BoxFit.fitHeight,
+ height: 80,
+ ),
+ ),
+ ),
+ ),
+ title: Text(
+ '${widget.user?.firstName ?? ''} ${widget.user?.lastName}',
+ style: Theme.of(context).textTheme.titleMedium!.copyWith(
+ color: Colors.black,
+ fontWeight: FontWeight.bold,
+ fontSize: 20,
+ ),
+ ),
+ subtitle: Text(
+ ' ${widget.user?.email}',
+ style: Theme.of(context).textTheme.bodySmall!.copyWith(
+ color: Colors.black,
+ ),
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ actionsAlignment: MainAxisAlignment.center,
+ actions: [
+ SizedBox(
+ width: 200,
+ child: GestureDetector(
+ onTap: () {
+ context.pop();
+ },
+ child: DefaultButton(
+ backgroundColor: ColorsManager.boxColor,
+ elevation: 1,
+ child: Text(
+ 'Cancel',
+ style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+ fontSize: 12,
+ color: Colors.black,
+ ),
+ ),
+ ),
+ ),
+ ),
+ const SizedBox(
+ height: 10,
+ ),
+ GestureDetector(
+ onTap: () {
+ AuthBloc.logout();
+ context.go(RoutesConst.auth);
+ },
+ child: SizedBox(
+ width: 200,
+ child: DefaultButton(
+ elevation: 1,
+ child: Text(
+ 'Logout',
+ style:
+ Theme.of(context).textTheme.bodyMedium!.copyWith(fontSize: 12, color: Colors.white),
+ ),
+ ),
+ ),
+ ),
+ ]);
+ },
+ );
+ },
+ child: ListTile(
+ leading: SvgPicture.asset(Assets.signOut),
+ title: Text(
+ "Log Out",
+ style: context.textTheme.bodyMedium,
+ ),
+ ),
+ ),
+ ],
+ ).then((value) {
+ setState(() {
+ _isDropdownOpen = false;
+ });
+ });
+ }
+}
diff --git a/lib/web_layout/web_app_bar.dart b/lib/web_layout/web_app_bar.dart
index 1052a23d..777b0931 100644
--- a/lib/web_layout/web_app_bar.dart
+++ b/lib/web_layout/web_app_bar.dart
@@ -1,14 +1,12 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:go_router/go_router.dart';
-import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
-import 'package:syncrow_web/pages/common/custom_dialog.dart';
+import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/constants/routes_const.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+import 'package:syncrow_web/utils/user_drop_down_menu.dart';
class WebAppBar extends StatefulWidget {
final Widget? title;
@@ -58,15 +56,15 @@ class _WebAppBarState extends State with HelperResponsiveLayout {
if (widget.rightBody != null) widget.rightBody!,
Row(
children: [
- const SizedBox.square(
+ SizedBox.square(
dimension: 40,
child: CircleAvatar(
- backgroundColor: Colors.white,
+ backgroundColor: ColorsManager.whiteColors,
child: SizedBox.square(
dimension: 35,
- child: CircleAvatar(
- backgroundColor: Colors.grey,
- child: FlutterLogo(),
+ child: SvgPicture.asset(
+ Assets.logoGrey,
+ fit: BoxFit.cover,
),
),
),
@@ -112,15 +110,15 @@ class _WebAppBarState extends State with HelperResponsiveLayout {
const SizedBox(
width: 10,
),
- const SizedBox.square(
+ SizedBox.square(
dimension: 40,
child: CircleAvatar(
- backgroundColor: Colors.white,
+ backgroundColor: ColorsManager.whiteColors,
child: SizedBox.square(
dimension: 35,
- child: CircleAvatar(
- backgroundColor: Colors.grey,
- child: FlutterLogo(),
+ child: SvgPicture.asset(
+ Assets.logoGrey,
+ fit: BoxFit.cover,
),
),
),
@@ -136,54 +134,55 @@ class _WebAppBarState extends State with HelperResponsiveLayout {
const SizedBox(
width: 10,
),
- GestureDetector(
- onTap: () {
- showCustomDialog(
- context: context,
- barrierDismissible: true,
- title: 'Logout',
- message: 'Are you sure you want to logout?',
- actions: [
- GestureDetector(
- onTap: () {
- AuthBloc.logout();
- context.go(RoutesConst.auth);
- },
- child: DefaultButton(
- child: Text(
- 'Ok',
- style: Theme.of(context)
- .textTheme
- .bodyMedium!
- .copyWith(fontSize: 12, color: Colors.white),
- ),
- ),
- ),
- const SizedBox(
- height: 10,
- ),
- GestureDetector(
- onTap: () {
- context.pop();
- },
- child: DefaultButton(
- child: Text(
- 'Cancel',
- style: Theme.of(context)
- .textTheme
- .bodyMedium!
- .copyWith(fontSize: 12, color: Colors.white),
- ),
- ),
- ),
- ],
- );
- },
- child: const Icon(
- Icons.logout,
- color: ColorsManager.whiteColors,
- ),
- )
+ UserDropdownMenu(user: user),
+ // GestureDetector(
+ // onTap: () {
+ // showCustomDialog(
+ // context: context,
+ // barrierDismissible: true,
+ // title: 'Logout',
+ // message: 'Are you sure you want to logout?',
+ // actions: [
+ // GestureDetector(
+ // onTap: () {
+ // AuthBloc.logout();
+ // context.go(RoutesConst.auth);
+ // },
+ // child: DefaultButton(
+ // child: Text(
+ // 'Ok',
+ // style: Theme.of(context)
+ // .textTheme
+ // .bodyMedium!
+ // .copyWith(fontSize: 12, color: Colors.white),
+ // ),
+ // ),
+ // ),
+ // const SizedBox(
+ // height: 10,
+ // ),
+ // GestureDetector(
+ // onTap: () {
+ // context.pop();
+ // },
+ // child: DefaultButton(
+ // child: Text(
+ // 'Cancel',
+ // style: Theme.of(context)
+ // .textTheme
+ // .bodyMedium!
+ // .copyWith(fontSize: 12, color: Colors.white),
+ // ),
+ // ),
+ // ),
+ // ],
+ // );
+ // },
+ // child: const Icon(
+ // Icons.logout,
+ // color: ColorsManager.whiteColors,
+ // ),
+ // )
],
),
],